Runs / transfer-form Batch Runs from different design-system versions should not be compared.
The page A screenshot in each theme, as the benchmark took it.
page.tsx As the agent left it; marked lines broke a rule.
Violations 199 counted, under 8 rules. “Not counted” marks a compiler error that restates a design-system violation, “Ignored” one the agent silenced with a comment. The first 200 are listed.
Steps One row per model call, with the tools it asked for. An agent that reads the guidelines before writing shows it here; what a checker or submit_view answered is under its call.
Step Tools Tokens in Tokens out Cost 0 list_files 419 14 $0.0000 1 read_file 446 19 $0.0001 2 write_file 663 4,442 $0.0023 3
Output cap
The provider's default 3 import { useState, type FormEvent } from "react";
4 import data from "./fixture.json";
5 import { css } from "styled-system/css";
6
7 const formatMoney = (amount: number) =>
8 new Intl.NumberFormat("it-IT", {
9 style: "currency",
10 currency: data.currency,
11 }).format(amount);
12
13 export default function Page() {
14 const [accountId, setAccountId] = useState(data.defaultAccountId);
15 const [beneficiary, setBeneficiary] = useState("");
16 const [iban, setIban] = useState("");
17 const [amount, setAmount] = useState("");
18 const [reference, setReference] = useState("");
19 const [confirmation, setConfirmation] = useState<{
20 amount: number;
21 beneficiary: string;
22 } | null>(null);
23
24 const selectedAccount =
25 data.accounts.find((account) => account.id === accountId) ?? data.accounts[0];
26 const numericAmount = Number(amount);
27 const amountExceedsBalance = amount !== "" && numericAmount > selectedAccount.available;
28
29 function handleSubmit(event: FormEvent<HTMLFormElement>) {
30 event.preventDefault();
31 if (amountExceedsBalance || !Number.isFinite(numericAmount) || numericAmount <= 0) return;
32 setConfirmation({ amount: numericAmount, beneficiary: beneficiary.trim() });
33 }
34
35 return (
36 <main className={css({ minH: "100vh", bg: "#f5f7fa", color: "#172b4d", fontFamily: "system-ui, sans-serif" })}>
37 <header className={css({ h: "72px", bg: "white", borderBottom: "1px solid #e7ebf0", display: "flex", alignItems: "center" })}>
38 <div className={css({ maxW: "1080px", w: "full", mx: "auto", px: { base: "5", md: "8" }, display: "flex", alignItems: "center", justifyContent: "space-between" })}>
39 <div className={css({ display: "flex", alignItems: "center", gap: "3", fontWeight: "700", fontSize: "18px", letterSpacing: "-0.02em" })}>
40 <span className={css({ w: "34px", h: "34px", borderRadius: "10px", bg: "#174ea6", color: "white", display: "grid", placeItems: "center", fontSize: "17px" })} aria-hidden="true">V</span>
41 <span>Vela</span>
42 </div>
43 <span className={css({ fontSize: "13px", color: "#68778c", display: { base: "none", sm: "block" } })}>PERSONAL BANKING</span>
44 </div>
45 </header>
46
47 <div className={css({ maxW: "1080px", mx: "auto", px: { base: "5", md: "8" }, py: { base: "8", md: "12" } })}>
48 <div className={css({ mb: "7" })}>
49 <a href="#" className={css({ color: "#52647d", fontSize: "13px", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: "2", mb: "5", _hover: { color: "#174ea6" } })}>
50 <span aria-hidden="true">←</span> Accounts
51 </a>
52 <p className={css({ m: "0", mb: "2", color: "#174ea6", textTransform: "uppercase", letterSpacing: "0.12em", fontSize: "11px", fontWeight: "700" })}>Payments</p>
53 <h1 className={css({ m: "0", fontSize: { base: "28px", md: "34px" }, letterSpacing: "-0.04em", lineHeight: "1.15", color: "#142943" })}>Send a SEPA transfer</h1>
54 <p className={css({ mt: "3", mb: "0", color: "#65758b", fontSize: "15px" })}>Make a euro payment to an account in the SEPA area.</p>
55 </div>
56
57 {confirmation ? (
58 <section className={css({ maxW: "680px", bg: "white", border: "1px solid #e4eaf1", borderRadius: "16px", p: { base: "6", md: "9" }, boxShadow: "0 8px 24px rgba(26, 48, 78, 0.05)" })} aria-live="polite">
59 <div className={css({ w: "52px", h: "52px", borderRadius: "full", bg: "#e8f6ee", color: "#18834b", display: "grid", placeItems: "center", fontSize: "26px", mb: "5" })} aria-hidden="true">✓</div>
60 <p className={css({ m: "0 0 2", color: "#18834b", fontSize: "12px", fontWeight: "700", letterSpacing: "0.1em", textTransform: "uppercase" })}>Transfer submitted</p>
61 <h2 className={css({ m: "0", color: "#142943", fontSize: "26px", letterSpacing: "-0.03em" })}>You’re all set</h2>
62 <p className={css({ color: "#65758b", lineHeight: "1.6", mt: "3", mb: "6" })}>
63 {formatMoney(confirmation.amount)} is on its way to <strong className={css({ color: "#263b57" })}>{confirmation.beneficiary}</strong>.
64 </p>
65 <button type="button" onClick={() => setConfirmation(null)} className={css({ border: "0", borderRadius: "8px", bg: "#174ea6", color: "white", px: "5", py: "3", fontWeight: "650", cursor: "pointer", _hover: { bg: "#103f8c" } })}>Make another transfer</button>
66 </section>
67 ) : (
68 <div className={css({ display: "grid", gridTemplateColumns: { base: "1fr", lg: "minmax(0, 1fr) 310px" }, alignItems: "start", gap: "6" })}>
69 <form onSubmit={handleSubmit} className={css({ bg: "white", border: "1px solid #e4eaf1", borderRadius: "16px", p: { base: "5", md: "8" }, boxShadow: "0 8px 24px rgba(26, 48, 78, 0.04)" })}>
70 <h2 className={css({ m: "0 0 6", fontSize: "18px", color: "#203650", letterSpacing: "-0.02em" })}>Transfer details</h2>
71
72 <div className={css({ mb: "6" })}>
73 <label htmlFor="account" className={css({ display: "block", mb: "2", color: "#334860", fontSize: "13px", fontWeight: "650" })}>Pay from</label>
74 <select id="account" value={accountId} onChange={(event) => setAccountId(event.target.value)} className={css({ w: "full", h: "48px", boxSizing: "border-box", border: "1px solid #ced7e2", borderRadius: "8px", px: "3", bg: "white", color: "#203650", fontSize: "14px", outline: "none", _focus: { borderColor: "#2870cb", boxShadow: "0 0 0 3px rgba(40,112,203,0.12)" } })}>
75 {data.accounts.map((account) => <option key={account.id} value={account.id}>{account.name} ···· {account.iban.replace(/\s/g, "").slice(-4)}</option>)}
76 </select>
77 <div className={css({ mt: "2", display: "flex", justifyContent: "space-between", fontSize: "12px", color: "#687a90" })}>
78 <span>Available balance</span><strong className={css({ color: "#334860", fontWeight: "650" })}>{formatMoney(selectedAccount.available)}</strong>
79 </div>
80 </div>
81
82 <div className={css({ h: "1px", bg: "#edf0f4", mb: "6" })} />
83 <div className={css({ mb: "5" })}>
84 <label htmlFor="beneficiary" className={css({ display: "block", mb: "2", color: "#334860", fontSize: "13px", fontWeight: "650" })}>Beneficiary name</label>
85 <input id="beneficiary" autoComplete="name" required value={beneficiary} onChange={(event) => setBeneficiary(event.target.value)} placeholder="Name as it appears on the account" className={css({ w: "full", h: "48px", boxSizing: "border-box", border: "1px solid #ced7e2", borderRadius: "8px", px: "3", color: "#203650", fontSize: "14px", outline: "none", _placeholder: { color: "#9aa6b5" }, _focus: { borderColor: "#2870cb", boxShadow: "0 0 0 3px rgba(40,112,203,0.12)" } })} />
86 </div>
87
88 <div className={css({ mb: "5" })}>
89 <label htmlFor="iban" className={css({ display: "block", mb: "2", color: "#334860", fontSize: "13px", fontWeight: "650" })}>Beneficiary IBAN</label>
90 <input id="iban" autoComplete="off" required value={iban} onChange={(event) => setIban(event.target.value)} placeholder="e.g. IT60 X054 2811 1010 0000 0123 456" className={css({ w: "full", h: "48px", boxSizing: "border-box", border: "1px solid #ced7e2", borderRadius: "8px", px: "3", color: "#203650", fontSize: "14px", outline: "none", _placeholder: { color: "#9aa6b5" }, _focus: { borderColor: "#2870cb", boxShadow: "0 0 0 3px rgba(40,112,203,0.12)" } })} />
91 </div>
92
93 <div className={css({ display: "grid", gridTemplateColumns: { base: "1fr", sm: "1fr 1fr" }, gap: "4", mb: "5" })}>
94 <div>
95 <label htmlFor="amount" className={css({ display: "block", mb: "2", color: "#334860", fontSize: "13px", fontWeight: "650" })}>Amount</label>
96 <div className={css({ position: "relative" })}>
97 <input id="amount" type="number" inputMode="decimal" min="0.01" step="0.01" required value={amount} onChange={(event) => setAmount(event.target.value)} aria-invalid={amountExceedsBalance} aria-describedby={amountExceedsBalance ? "amount-error" : "amount-hint"} placeholder="0.00" className={css({ w: "full", h: "48px", boxSizing: "border-box", border: amountExceedsBalance ? "1px solid #c93636" : "1px solid #ced7e2", borderRadius: "8px", pl: "3", pr: "14", color: "#203650", fontSize: "14px", outline: "none", _focus: { borderColor: amountExceedsBalance ? "#c93636" : "#2870cb", boxShadow: amountExceedsBalance ? "0 0 0 3px rgba(201,54,54,0.1)" : "0 0 0 3px rgba(40,112,203,0.12)" } })} />
98 <span className={css({ position: "absolute", right: "3", top: "50%", transform: "translateY(-50%)", color: "#687a90", fontSize: "13px", pointerEvents: "none" })}>EUR</span>
99 </div>
100 {amountExceedsBalance ? <p id="amount-error" role="alert" className={css({ mt: "2", mb: "0", color: "#b4232c", fontSize: "12px", lineHeight: "1.4" })}>Amount exceeds your available balance.</p> : <p id="amount-hint" className={css({ mt: "2", mb: "0", color: "#8390a0", fontSize: "12px" })}>Up to {formatMoney(selectedAccount.available)}</p>}
101 </div>
102 <div>
103 <label htmlFor="reference" className={css({ display: "block", mb: "2", color: "#334860", fontSize: "13px", fontWeight: "650" })}>Reference <span className={css({ color: "#8794a4", fontWeight: "400" })}>· Optional</span></label>
104 <input id="reference" maxLength={140} value={reference} onChange={(event) => setReference(event.target.value)} placeholder="What’s this transfer for?" className={css({ w: "full", h: "48px", boxSizing: "border-box", border: "1px solid #ced7e2", borderRadius: "8px", px: "3", color: "#203650", fontSize: "14px", outline: "none", _placeholder: { color: "#9aa6b5" }, _focus: { borderColor: "#2870cb", boxShadow: "0 0 0 3px rgba(40,112,203,0.12)" } })} />
105 </div>
106 </div>
107
108 <button type="submit" disabled={amountExceedsBalance} className={css({ w: "full", h: "50px", border: "0", borderRadius: "8px", bg: amountExceedsBalance ? "#aab8c9" : "#174ea6", color: "white", fontSize: "14px", fontWeight: "700", cursor: amountExceedsBalance ? "not-allowed" : "pointer", transition: "background 0.15s ease", _hover: amountExceedsBalance ? {} : { bg: "#103f8c" } })}>Review and send transfer <span aria-hidden="true">→</span></button>
109 <p className={css({ m: "3 0 0", textAlign: "center", color: "#8390a0", fontSize: "11px" })}>Your payment will be sent securely.</p>
110 </form>
111
112 <aside className={css({ bg: "#eaf1fa", borderRadius: "14px", p: "6", color: "#334860" })}>
113 <div className={css({ display: "flex", gap: "3", alignItems: "flex-start" })}>
114 <span className={css({ flex: "0 0 32px", h: "32px", display: "grid", placeItems: "center", bg: "white", borderRadius: "full", color: "#174ea6", fontSize: "15px" })} aria-hidden="true">i</span>
115 <div>
116 <h2 className={css({ mt: "1", mb: "2", fontSize: "14px", color: "#203650" })}>About SEPA transfers</h2>
117 <p className={css({ m: "0", fontSize: "13px", lineHeight: "1.65", color: "#62748b" })}>Send euros to any account in the Single Euro Payments Area. Transfers typically arrive within one business day.</p>
118 </div>
119 </div>
120 <div className={css({ mt: "5", pt: "4", borderTop: "1px solid #d5e0ee", fontSize: "12px", color: "#62748b", display: "flex", gap: "2", alignItems: "center" })}>
121 <span aria-hidden="true">🔒</span> Your transfer details are protected
122 </div>
123 </aside>
124 </div>
125 )}
126 </div>
127 </main>
128 );
129 }
130
page.tsx:68:90 · minmax(0, 1fr) 310px `minmax(0, 1fr) 310px` is a raw length. Use a token. raw-values/raw-color 41 design-system page.tsx:36:47 · #f5f7fa `#f5f7fa` is a raw color. Use a semantic color token. page.tsx:36:65 · #172b4d `#172b4d` is a raw color. Use a semantic color token. page.tsx:37:47 · white `white` is a raw color. Use a semantic color token. page.tsx:37:70 · 1px solid #e7ebf0 `1px solid #e7ebf0` is a raw color. Use a semantic color token. page.tsx:40:84 · #174ea6 `#174ea6` is a raw color. Use a semantic color token. page.tsx:40:102 · white `white` is a raw color. Use a semantic color token. page.tsx:43:59 · #68778c `#68778c` is a raw color. Use a semantic color token. page.tsx:49:47 · #52647d `#52647d` is a raw color. Use a semantic color token. page.tsx:49:182 · #174ea6 `#174ea6` is a raw color. Use a semantic color token. page.tsx:52:55 · #174ea6 `#174ea6` is a raw color. Use a semantic color token. page.tsx:53:133 · #142943 `#142943` is a raw color. Use a semantic color token. page.tsx:54:56 · #65758b `#65758b` is a raw color. Use a semantic color token. page.tsx:58:56 · white `white` is a raw color. Use a semantic color token. page.tsx:58:73 · 1px solid #e4eaf1 `1px solid #e4eaf1` is a raw color. Use a semantic color token. page.tsx:58:154 · 0 8px 24px rgba(26, 48, 78, 0.05) `0 8px 24px rgba(26, 48, 78, 0.05)` is a raw color. Use a semantic color token. page.tsx:59:83 · #e8f6ee `#e8f6ee` is a raw color. Use a semantic color token. page.tsx:59:101 · #18834b `#18834b` is a raw color. Use a semantic color token. page.tsx:60:52 · #18834b `#18834b` is a raw color. Use a semantic color token. page.tsx:61:49 · #142943 `#142943` is a raw color. Use a semantic color token. page.tsx:62:40 · #65758b `#65758b` is a raw color. Use a semantic color token. page.tsx:63:99 · #263b57 `#263b57` is a raw color. Use a semantic color token. page.tsx:65:128 · #174ea6 `#174ea6` is a raw color. Use a semantic color token. page.tsx:65:146 · white `white` is a raw color. Use a semantic color token. page.tsx:65:225 · #103f8c `#103f8c` is a raw color. Use a semantic color token. page.tsx:69:64 · white `white` is a raw color. Use a semantic color token. page.tsx:69:81 · 1px solid #e4eaf1 `1px solid #e4eaf1` is a raw color. Use a semantic color token. page.tsx:69:162 · 0 8px 24px rgba(26, 48, 78, 0.04) `0 8px 24px rgba(26, 48, 78, 0.04)` is a raw color. Use a semantic color token. page.tsx:70:73 · #203650 `#203650` is a raw color. Use a semantic color token. page.tsx:73:93 · #334860 `#334860` is a raw color. Use a semantic color token. page.tsx:74:183 · 1px solid #ced7e2 `1px solid #ced7e2` is a raw color. Use a semantic color token. page.tsx:74:238 · white `white` is a raw color. Use a semantic color token. page.tsx:74:254 · #203650 `#203650` is a raw color. Use a semantic color token. page.tsx:74:323 · #2870cb `#2870cb` is a raw color. Use a semantic color token. page.tsx:74:345 · 0 0 0 3px rgba(40,112,203,0.12) `0 0 0 3px rgba(40,112,203,0.12)` is a raw color. Use a semantic color token. page.tsx:77:123 · #687a90 `#687a90` is a raw color. Use a semantic color token. page.tsx:78:81 · #334860 `#334860` is a raw color. Use a semantic color token. page.tsx:82:51 · #edf0f4 `#edf0f4` is a raw color. Use a semantic color token. page.tsx:84:97 · #334860 `#334860` is a raw color. Use a semantic color token. page.tsx:85:267 · 1px solid #ced7e2 `1px solid #ced7e2` is a raw color. Use a semantic color token. page.tsx:85:325 · #203650 `#203650` is a raw color. Use a semantic color token. page.tsx:85:394 · #9aa6b5 `#9aa6b5` is a raw color. Use a semantic color token. Every run that broke raw-values/raw-color lint/@pandacss(no-physical-properties) 15 quality page.tsx:37:56 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:48:31 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:49:156 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:52:39 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:54:31 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:54:40 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:59:169 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:62:70 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:62:79 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:72:37 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:73:77 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:77:39 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:82:62 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:83:37 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:84:81 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". Every run that broke lint/@pandacss(no-physical-properties) a11y/color-contrast 2 quality page.tsx:1:1 · <p class="mt_3 mb_0 c_#65758b fs_15px">Make a euro payment to an account in the SEPA area.</p> Elements must meet minimum color contrast ratio thresholds (8 elements, light theme) page.tsx:1:1 · <p class="mt_3 mb_0 c_#65758b fs_15px">Make a euro payment to an account in the SEPA area.</p> Elements must meet minimum color contrast ratio thresholds (8 elements, dark theme) Every run that broke a11y/color-contrast typecheck/TS18048 2 quality typecheck/TS2769 2 quality lint/jsx-a11y(anchor-is-valid) 1 quality