Runs / statement 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 164 counted, under 6 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 401 14 $0.0000 1 read_file 428 19 $0.0001 2 write_file 3 3,469 $0.0019 3
Output cap
The provider's default 3
4 const page = css({
5 minHeight: "100vh",
6 background: "#f5f7f6",
7 color: "#172b28",
8 fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
9 });
10
11 const shell = css({ width: "min(1120px, calc(100% - 48px))", margin: "0 auto", padding: "34px 0 72px", "@media (max-width: 640px)": { width: "calc(100% - 32px)", paddingTop: "24px" } });
12 const eyebrow = css({ fontSize: "11px", fontWeight: 750, letterSpacing: "0.13em", textTransform: "uppercase", color: "#71817d" });
13 const title = css({ margin: "7px 0 0", fontSize: "32px", lineHeight: 1.15, letterSpacing: "-0.04em", fontWeight: 720, color: "#173d34", "@media (max-width: 640px)": { fontSize: "28px" } });
14 const topLine = css({ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: "20px", marginBottom: "27px", "@media (max-width: 640px)": { alignItems: "flex-start", flexDirection: "column", gap: "14px" } });
15 const period = css({ display: "inline-flex", alignItems: "center", gap: "8px", padding: "9px 12px", border: "1px solid #dfe7e3", borderRadius: "9px", background: "#fff", color: "#50625d", fontSize: "13px", fontWeight: 600, whiteSpace: "nowrap" });
16 const dot = css({ width: "7px", height: "7px", borderRadius: "50%", background: "#218469" });
17 const overview = css({ display: "grid", gridTemplateColumns: "1.15fr 0.85fr", overflow: "hidden", borderRadius: "16px", background: "#fff", border: "1px solid #e5ebe8", boxShadow: "0 8px 24px rgba(26, 55, 47, 0.045)", marginBottom: "34px", "@media (max-width: 700px)": { gridTemplateColumns: "1fr" } });
18 const holderBlock = css({ padding: "26px 30px", borderRight: "1px solid #e8eeeb", "@media (max-width: 700px)": { borderRight: 0, borderBottom: "1px solid #e8eeeb", padding: "23px 22px" } });
19 const balanceBlock = css({ padding: "26px 30px", display: "flex", flexDirection: "column", justifyContent: "center", background: "#f9fbfa", "@media (max-width: 700px)": { padding: "22px" } });
20 const holder = css({ margin: "9px 0 16px", fontSize: "21px", fontWeight: 680, letterSpacing: "-0.025em", color: "#1b3932" });
21 const ibanLabel = css({ color: "#84918d", fontSize: "11px", letterSpacing: "0.1em", textTransform: "uppercase", fontWeight: 700, marginBottom: "5px" });
22 const iban = css({ fontSize: "14px", color: "#4b5e59", fontVariantNumeric: "tabular-nums", letterSpacing: "0.025em" });
23 const balanceLabel = css({ fontSize: "12px", fontWeight: 650, color: "#71817d" });
24 const balance = css({ marginTop: "8px", color: "#173d34", fontWeight: 730, letterSpacing: "-0.045em", fontSize: "34px", lineHeight: 1.15, fontVariantNumeric: "tabular-nums", "@media (max-width: 640px)": { fontSize: "30px" } });
25 const currency = css({ color: "#72827d", fontSize: "14px", fontWeight: 600, letterSpacing: "0", marginLeft: "8px" });
26 const transactionsSection = css({ background: "#fff", border: "1px solid #e5ebe8", borderRadius: "16px", overflow: "hidden", boxShadow: "0 8px 24px rgba(26, 55, 47, 0.035)" });
27 const sectionHead = css({ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "23px 26px 20px", gap: "16px", "@media (max-width: 640px)": { padding: "20px 18px 16px", alignItems: "flex-start", flexDirection: "column", gap: "5px" } });
28 const sectionTitle = css({ margin: 0, fontSize: "18px", fontWeight: 700, letterSpacing: "-0.02em", color: "#1d3932" });
29 const count = css({ color: "#7a8984", fontSize: "12px", fontWeight: 550 });
30 const tableHeader = css({ display: "grid", gridTemplateColumns: "112px minmax(0, 1fr) 155px 132px", gap: "16px", padding: "11px 26px", background: "#f7f9f8", borderTop: "1px solid #edf1ef", borderBottom: "1px solid #edf1ef", color: "#86938f", fontSize: "10px", fontWeight: 750, letterSpacing: "0.1em", textTransform: "uppercase", "@media (max-width: 700px)": { display: "none" } });
31 const row = css({ display: "grid", gridTemplateColumns: "112px minmax(0, 1fr) 155px 132px", gap: "16px", alignItems: "center", minHeight: "76px", padding: "14px 26px", borderBottom: "1px solid #edf1ef", "&:last-child": { borderBottom: 0 }, "@media (max-width: 700px)": { gridTemplateColumns: "1fr auto", columnGap: "12px", rowGap: "8px", padding: "15px 18px", minHeight: "auto" } });
32 const dateStyle = css({ color: "#667771", fontSize: "13px", fontWeight: 550, whiteSpace: "nowrap", "@media (max-width: 700px)": { gridColumn: "1", gridRow: "1", fontSize: "12px" } });
33 const details = css({ minWidth: 0, "@media (max-width: 700px)": { gridColumn: "1", gridRow: "2" } });
34 const description = css({ color: "#203c35", fontSize: "14px", fontWeight: 650, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" });
35 const txid = css({ marginTop: "4px", color: "#9aa5a1", fontSize: "11px", letterSpacing: "0.015em" });
36 const categoryWrap = css({ display: "flex", alignItems: "center", gap: "8px", "@media (max-width: 700px)": { gridColumn: "2", gridRow: "2", justifySelf: "end" } });
37 const category = css({ display: "inline-flex", alignItems: "center", padding: "6px 10px", borderRadius: "999px", background: "#f1f5f3", color: "#62726d", fontSize: "11px", fontWeight: 620, whiteSpace: "nowrap" });
38 const pending = css({ display: "inline-flex", alignItems: "center", gap: "5px", padding: "5px 8px", borderRadius: "999px", background: "#fff4df", color: "#97630c", fontSize: "10px", fontWeight: 750, letterSpacing: "0.025em", whiteSpace: "nowrap" });
39 const pendingDot = css({ width: "5px", height: "5px", borderRadius: "50%", background: "#d89a25" });
40 const amount = css({ textAlign: "right", fontSize: "14px", fontWeight: 700, fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap", color: "#25473e", "@media (max-width: 700px)": { gridColumn: "2", gridRow: "1", alignSelf: "start", fontSize: "14px" } });
41 const amountOut = css({ color: "#263d38" });
42 const footer = css({ display: "flex", justifyContent: "space-between", gap: "16px", padding: "16px 26px", background: "#fbfcfb", borderTop: "1px solid #edf1ef", color: "#84918d", fontSize: "11px", "@media (max-width: 640px)": { padding: "14px 18px", flexDirection: "column", gap: "5px" } });
43
44 function formatDate(value: string) {
45 return new Intl.DateTimeFormat("en-GB", { day: "2-digit", month: "short", year: "numeric", timeZone: "UTC" }).format(new Date(`${value}T00:00:00Z`));
46 }
47
48 function formatMoney(value: number) {
49 const formatted = new Intl.NumberFormat("it-IT", { style: "currency", currency: data.account.currency, minimumFractionDigits: 2 }).format(Math.abs(value));
50 return value < 0 ? `−${formatted}` : `+${formatted}`;
51 }
52
53 export default function Page() {
54 return (
55 <main className={page}>
56 <div className={shell}>
57 <header className={topLine}>
58 <div>
59 <div className={eyebrow}>Current account · Statement</div>
60 <h1 className={title}>October 2026</h1>
61 </div>
62 <div className={period}><span className={dot} />01 Oct — 31 Oct 2026</div>
63 </header>
64
65 <section className={overview} aria-label="Account overview">
66 <div className={holderBlock}>
67 <div className={eyebrow}>Account holder</div>
68 <div className={holder}>{data.account.holder}</div>
69 <div className={ibanLabel}>IBAN</div>
70 <div className={iban}>{data.account.iban}</div>
71 </div>
72 <div className={balanceBlock}>
73 <div className={balanceLabel}>Current balance</div>
74 <div className={balance}>{new Intl.NumberFormat("it-IT", { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(data.account.balance)}<span className={currency}>{data.account.currency}</span></div>
75 </div>
76 </section>
77
78 <section className={transactionsSection} aria-labelledby="transactions-title">
79 <div className={sectionHead}>
80 <h2 id="transactions-title" className={sectionTitle}>Transactions</h2>
81 <div className={count}>{data.transactions.length} transactions this period</div>
82 </div>
83 <div className={tableHeader} aria-hidden="true">
84 <span>Date</span><span>Description</span><span>Category</span><span style={{ textAlign: "right" }}>Amount</span>
85 </div>
86 <div>
87 {data.transactions.map((transaction) => (
88 <article className={row} key={transaction.id}>
89 <time className={dateStyle} dateTime={transaction.date}>{formatDate(transaction.date)}</time>
90 <div className={details}>
91 <div className={description}>{transaction.description}</div>
92 <div className={txid}>{transaction.id}</div>
93 </div>
94 <div className={categoryWrap}>
95 <span className={category}>{transaction.category}</span>
96 {transaction.status === "pending" && <span className={pending}><span className={pendingDot} />Pending</span>}
97 </div>
98 <div className={`${amount} ${transaction.amount < 0 ? amountOut : ""}`}>{formatMoney(transaction.amount)}</div>
99 </article>
100 ))}
101 </div>
102 <div className={footer}>
103 <span>Pending transactions are not yet final and may change.</span>
104 <span>Amounts shown in {data.account.currency}</span>
105 </div>
106 </section>
107 </div>
108 </main>
109 );
110 }
111
`0.13em` is a raw length. Use a token.
page.tsx:27:108 · 23px 26px 20px `23px 26px 20px` is a raw length. Use a token. page.tsx:27:179 · 20px 18px 16px `20px 18px 16px` is a raw length. Use a token. page.tsx:30:65 · 112px minmax(0, 1fr) 155px 132px `112px minmax(0, 1fr) 155px 132px` is a raw length. Use a token. page.tsx:31:57 · 112px minmax(0, 1fr) 155px 132px `112px minmax(0, 1fr) 155px 132px` is a raw length. Use a token. raw-values/raw-color 29 design-system page.tsx:6:15 · #f5f7f6 `#f5f7f6` is a raw color. Use a semantic color token. page.tsx:7:10 · #172b28 `#172b28` is a raw color. Use a semantic color token. page.tsx:12:118 · #71817d `#71817d` is a raw color. Use a semantic color token. page.tsx:13:126 · #173d34 `#173d34` is a raw color. Use a semantic color token. page.tsx:15:109 · 1px solid #dfe7e3 `1px solid #dfe7e3` is a raw color. Use a semantic color token. page.tsx:15:163 · #fff `#fff` is a raw color. Use a semantic color token. page.tsx:15:178 · #50625d `#50625d` is a raw color. Use a semantic color token. page.tsx:16:81 · #218469 `#218469` is a raw color. Use a semantic color token. page.tsx:17:133 · #fff `#fff` is a raw color. Use a semantic color token. page.tsx:17:149 · 1px solid #e5ebe8 `1px solid #e5ebe8` is a raw color. Use a semantic color token. page.tsx:17:181 · 0 8px 24px rgba(26, 55, 47, 0.045) `0 8px 24px rgba(26, 55, 47, 0.045)` is a raw color. Use a semantic color token. page.tsx:18:62 · 1px solid #e8eeeb `1px solid #e8eeeb` is a raw color. Use a semantic color token. page.tsx:18:144 · 1px solid #e8eeeb `1px solid #e8eeeb` is a raw color. Use a semantic color token. page.tsx:19:130 · #f9fbfa `#f9fbfa` is a raw color. Use a semantic color token. page.tsx:20:113 · #1b3932 `#1b3932` is a raw color. Use a semantic color token. page.tsx:21:32 · #84918d `#84918d` is a raw color. Use a semantic color token. page.tsx:22:45 · #4b5e59 `#4b5e59` is a raw color. Use a semantic color token. page.tsx:23:70 · #71817d `#71817d` is a raw color. Use a semantic color token. page.tsx:24:48 · #173d34 `#173d34` is a raw color. Use a semantic color token. page.tsx:25:31 · #72827d `#72827d` is a raw color. Use a semantic color token. page.tsx:26:47 · #fff `#fff` is a raw color. Use a semantic color token. page.tsx:26:63 · 1px solid #e5ebe8 `1px solid #e5ebe8` is a raw color. Use a semantic color token. page.tsx:26:137 · 0 8px 24px rgba(26, 55, 47, 0.035) `0 8px 24px rgba(26, 55, 47, 0.035)` is a raw color. Use a semantic color token. page.tsx:28:107 · #1d3932 `#1d3932` is a raw color. Use a semantic color token. page.tsx:29:28 · #7a8984 `#7a8984` is a raw color. Use a semantic color token. page.tsx:30:148 · #f7f9f8 `#f7f9f8` is a raw color. Use a semantic color token. page.tsx:30:170 · 1px solid #edf1ef `1px solid #edf1ef` is a raw color. Use a semantic color token. page.tsx:30:205 · 1px solid #edf1ef `1px solid #edf1ef` is a raw color. Use a semantic color token. page.tsx:30:233 · #86938f `#86938f` is a raw color. Use a semantic color token. Every run that broke raw-values/raw-color raw-values/raw-number 13 design-system page.tsx:12:53 · 750 `fontWeight: 750` skips the token scale. Use a fontWeight token. page.tsx:13:70 · 1.15 `lineHeight: 1.15` skips the token scale. Use a lineHeight token. page.tsx:13:114 · 720 `fontWeight: 720` skips the token scale. Use a fontWeight token. page.tsx:15:219 · 600 `fontWeight: 600` skips the token scale. Use a fontWeight token. page.tsx:20:74 · 680 `fontWeight: 680` skips the token scale. Use a fontWeight token. page.tsx:21:125 · 700 `fontWeight: 700` skips the token scale. Use a fontWeight token. page.tsx:23:58 · 650 `fontWeight: 650` skips the token scale. Use a fontWeight token. page.tsx:24:71 · 730 `fontWeight: 730` skips the token scale. Use a fontWeight token. page.tsx:24:133 · 1.15 `lineHeight: 1.15` skips the token scale. Use a lineHeight token. page.tsx:25:72 · 600 `fontWeight: 600` skips the token scale. Use a fontWeight token. page.tsx:28:69 · 700 `fontWeight: 700` skips the token scale. Use a fontWeight token. page.tsx:29:69 · 550 `fontWeight: 550` skips the token scale. Use a fontWeight token. page.tsx:30:274 · 750 `fontWeight: 750` skips the token scale. Use a fontWeight token. Every run that broke raw-values/raw-number lint/@pandacss(no-physical-properties) 12 quality page.tsx:11:163 Use the logical property "paddingBlockStart" instead of the physical "paddingTop". page.tsx:14:110 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:17:219 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:18:49 Use the logical property "borderInlineEnd" instead of the physical "borderRight". page.tsx:18:114 Use the logical property "borderInlineEnd" instead of the physical "borderRight". page.tsx:18:130 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:21:130 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:24:23 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:25:97 Use the logical property "marginInlineStart" instead of the physical "marginLeft". page.tsx:30:159 Use the logical property "borderBlockStart" instead of the physical "borderTop". page.tsx:30:191 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:31:169 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". Every run that broke lint/@pandacss(no-physical-properties) a11y/color-contrast 2 quality page.tsx:1:1 · <div class="fs_11px fw_750 ls_0.13em tt_uppercase c_#71817d">Current account · Statement</div> Elements must meet minimum color contrast ratio thresholds (22 elements, light theme) page.tsx:1:1 · <div class="fs_11px fw_750 ls_0.13em tt_uppercase c_#71817d">Current account · Statement</div> Elements must meet minimum color contrast ratio thresholds (22 elements, dark theme) Every run that broke a11y/color-contrast typecheck/TS2769 0 quality