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 132 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,824 $0.0021 3
3
4 const pageStyle = css({ minHeight: "100vh", background: "#f4f6f4", color: "#192922", fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", padding: { base: "24px 16px 48px", md: "40px 32px 64px" } });
5 const shellStyle = css({ maxWidth: "1120px", margin: "0 auto" });
6 const topbarStyle = css({ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: { base: "28px", md: "42px" } });
7 const brandStyle = css({ display: "flex", alignItems: "center", gap: "11px" });
8 const brandMarkStyle = css({ width: "36px", height: "36px", borderRadius: "12px", display: "grid", placeItems: "center", background: "#165b43", color: "white", fontSize: "18px", fontWeight: "800" });
9 const brandNameStyle = css({ fontSize: "16px", fontWeight: "750", letterSpacing: "-0.03em" });
10 const topLabelStyle = css({ color: "#64736b", fontSize: "12px", fontWeight: "650", letterSpacing: "0.08em", textTransform: "uppercase" });
11 const introStyle = css({ marginBottom: "24px" });
12 const eyebrowStyle = css({ display: "flex", alignItems: "center", gap: "9px", color: "#617168", fontSize: "13px", fontWeight: "650", marginBottom: "9px" });
13 const dotStyle = css({ width: "7px", height: "7px", borderRadius: "50%", background: "#318565" });
14 const headingStyle = css({ margin: 0, fontSize: { base: "30px", md: "38px" }, lineHeight: 1.1, letterSpacing: "-0.045em", fontWeight: "750" });
15 const subheadingStyle = css({ margin: "9px 0 0", color: "#68776f", fontSize: "14px" });
16 const accountCardStyle = css({ background: "#164b39", color: "#fff", borderRadius: { base: "20px", md: "24px" }, padding: { base: "24px 22px", md: "30px 34px" }, display: "grid", gridTemplateColumns: { base: "1fr", md: "1.1fr 1fr" }, gap: { base: "26px", md: "32px" }, position: "relative", overflow: "hidden", boxShadow: "0 16px 36px rgba(17, 66, 48, 0.14)", "&::after": { content: "''", position: "absolute", width: "270px", height: "270px", border: "1px solid rgba(255,255,255,0.09)", borderRadius: "50%", right: "-85px", top: "-172px", pointerEvents: "none" } });
17 const balanceLabelStyle = css({ color: "rgba(255,255,255,0.69)", fontSize: "13px", marginBottom: "8px" });
18 const balanceStyle = css({ margin: 0, fontSize: { base: "36px", md: "44px" }, lineHeight: 1.1, letterSpacing: "-0.045em", fontWeight: "700", fontVariantNumeric: "tabular-nums" });
19 const accountDetailsStyle = css({ borderLeft: { base: "none", md: "1px solid rgba(255,255,255,0.2)" }, paddingLeft: { base: "0", md: "32px" }, display: "grid", alignContent: "center", gap: "17px" });
20 const detailLabelStyle = css({ display: "block", color: "rgba(255,255,255,0.62)", fontSize: "11px", fontWeight: "650", letterSpacing: "0.09em", textTransform: "uppercase", marginBottom: "5px" });
21 const detailValueStyle = css({ fontSize: "15px", fontWeight: "600", letterSpacing: "0.005em" });
22 const transactionsSectionStyle = css({ marginTop: { base: "36px", md: "48px" } });
23 const sectionHeaderStyle = css({ display: "flex", alignItems: "end", justifyContent: "space-between", gap: "16px", marginBottom: "17px" });
24 const sectionTitleStyle = css({ margin: 0, fontSize: "20px", letterSpacing: "-0.025em", fontWeight: "720" });
25 const sectionNoteStyle = css({ margin: "5px 0 0", color: "#718078", fontSize: "13px" });
26 const countStyle = css({ color: "#617168", background: "#e8ede9", borderRadius: "999px", padding: "6px 10px", fontSize: "12px", fontWeight: "650", whiteSpace: "nowrap" });
27 const tableWrapStyle = css({ overflow: "hidden", border: "1px solid #e3e9e4", borderRadius: "18px", background: "#fff", boxShadow: "0 5px 18px rgba(25, 41, 34, 0.035)" });
28 const responsiveTableStyle = css({ "@media (max-width: 640px)": { overflowX: "auto", table: { minWidth: "620px" }, "th, td": { padding: "14px 15px" } } });
29 const tableStyle = css({ width: "100%", borderCollapse: "collapse", textAlign: "left" });
30 const thStyle = css({ padding: "14px 22px", color: "#78857e", background: "#fbfcfb", fontSize: "10px", fontWeight: "700", letterSpacing: "0.09em", textTransform: "uppercase", borderBottom: "1px solid #e9eeea", whiteSpace: "nowrap" });
31 const tdStyle = css({ padding: "16px 22px", borderBottom: "1px solid #edf0ed", verticalAlign: "middle" });
32 const lastRowStyle = css({ "& td": { borderBottom: "none" } });
33 const dateStyle = css({ color: "#65736b", fontSize: "13px", whiteSpace: "nowrap", fontVariantNumeric: "tabular-nums" });
34 const descriptionStyle = css({ fontSize: "14px", fontWeight: "650", color: "#20332a" });
35 const statusLineStyle = css({ display: "flex", alignItems: "center", gap: "8px", flexWrap: "wrap" });
36 const pendingStyle = css({ display: "inline-flex", alignItems: "center", gap: "5px", color: "#855b16", background: "#fff4dc", border: "1px solid #f2e4c5", borderRadius: "999px", padding: "3px 7px", fontSize: "10px", lineHeight: 1.25, fontWeight: "700" });
37 const categoryStyle = css({ display: "inline-flex", alignItems: "center", color: "#52645a", background: "#f0f4f1", borderRadius: "999px", padding: "6px 10px", fontSize: "12px", fontWeight: "550", whiteSpace: "nowrap" });
38 const amountStyle = css({ textAlign: "right", whiteSpace: "nowrap", fontSize: "14px", fontWeight: "700", fontVariantNumeric: "tabular-nums" });
39 const amountOutStyle = css({ color: "#293b32" });
40 const amountInStyle = css({ color: "#16724e" });
41
42 function formatDate(value: string) {
43 return new Intl.DateTimeFormat("it-IT", { day: "2-digit", month: "short", year: "numeric", timeZone: "UTC" }).format(new Date(`${value}T12:00:00Z`));
44 }
45
46 function formatMoney(value: number) {
47 return new Intl.NumberFormat("it-IT", { style: "currency", currency: data.account.currency, signDisplay: "always" }).format(value);
48 }
49
50 function formatBalance(value: number) {
51 return new Intl.NumberFormat("it-IT", { style: "currency", currency: data.account.currency }).format(value);
52 }
53
54 function formatPeriod(from: string, to: string) {
55 const month = new Intl.DateTimeFormat("en", { month: "long", year: "numeric", timeZone: "UTC" }).format(new Date(`${from}T12:00:00Z`));
56 const dateFormat = new Intl.DateTimeFormat("it-IT", { day: "2-digit", month: "short", year: "numeric", timeZone: "UTC" });
57 return `${month} · ${dateFormat.format(new Date(`${from}T12:00:00Z`))} — ${dateFormat.format(new Date(`${to}T12:00:00Z`))}`;
58 }
59
60 export default function Page() {
61 const { account, transactions } = data;
62
63 return (
64 <main className={pageStyle}>
65 <div className={shellStyle}>
66 <header className={topbarStyle}>
67 <div className={brandStyle} aria-label="Vektos Banking">
68 <span className={brandMarkStyle} aria-hidden="true">v.</span>
69 <span className={brandNameStyle}>vektos</span>
70 </div>
71 <span className={topLabelStyle}>Current account</span>
72 </header>
73
74 <section className={introStyle} aria-labelledby="statement-title">
75 <div className={eyebrowStyle}><span className={dotStyle} /> Account statement</div>
76 <h1 className={headingStyle} id="statement-title">October statement</h1>
77 <p className={subheadingStyle}>{formatPeriod(account.period.from, account.period.to)}</p>
78 </section>
79
80 <section className={accountCardStyle} aria-label="Account summary">
81 <div>
82 <div className={balanceLabelStyle}>Current balance</div>
83 <p className={balanceStyle}>{formatBalance(account.balance)}</p>
84 </div>
85 <div className={accountDetailsStyle}>
86 <div><span className={detailLabelStyle}>Account holder</span><div className={detailValueStyle}>{account.holder}</div></div>
87 <div><span className={detailLabelStyle}>IBAN</span><div className={detailValueStyle}>{account.iban}</div></div>
88 </div>
89 </section>
90
91 <section className={transactionsSectionStyle} aria-labelledby="transactions-title">
92 <div className={sectionHeaderStyle}>
93 <div><h2 className={sectionTitleStyle} id="transactions-title">Transactions</h2><p className={sectionNoteStyle}>All activity for this statement period</p></div>
94 <span className={countStyle}>{transactions.length} transactions</span>
95 </div>
96
97 <div className={`${tableWrapStyle} ${responsiveTableStyle}`}>
98 <table className={tableStyle}>
99 <thead><tr>
100 <th className={thStyle} scope="col">Date</th>
101 <th className={thStyle} scope="col">Description</th>
102 <th className={thStyle} scope="col">Category</th>
103 <th className={thStyle} scope="col" style={{ textAlign: "right" }}>Amount</th>
104 </tr></thead>
105 <tbody>
106 {transactions.map((transaction, index) => (
107 <tr className={index === transactions.length - 1 ? lastRowStyle : undefined} key={transaction.id}>
108 <td className={`${tdStyle} ${dateStyle}`}>{formatDate(transaction.date)}</td>
109 <td className={tdStyle}><div className={statusLineStyle}>
110 <span className={descriptionStyle}>{transaction.description}</span>
111 {transaction.status === "pending" && <span className={pendingStyle} aria-label="Pending transaction"><span aria-hidden="true">◷</span> Pending</span>}
112 </div></td>
113 <td className={tdStyle}><span className={categoryStyle}>{transaction.category}</span></td>
114 <td className={`${tdStyle} ${amountStyle} ${transaction.amount < 0 ? amountOutStyle : amountInStyle}`}>{formatMoney(transaction.amount)}</td>
115 </tr>
116 ))}
117 </tbody>
118 </table>
119 </div>
120 </section>
121 </div>
122 </main>
123 );
124 }
125
raw-values/raw-color 25 design-system page.tsx:4:57 · #f4f6f4 `#f4f6f4` is a raw color. Use a semantic color token. page.tsx:4:75 · #192922 `#192922` is a raw color. Use a semantic color token. page.tsx:8:134 · #165b43 `#165b43` is a raw color. Use a semantic color token. page.tsx:8:152 · white `white` is a raw color. Use a semantic color token. page.tsx:10:36 · #64736b `#64736b` is a raw color. Use a semantic color token. page.tsx:12:86 · #617168 `#617168` is a raw color. Use a semantic color token. page.tsx:13:86 · #318565 `#318565` is a raw color. Use a semantic color token. page.tsx:15:57 · #68776f `#68776f` is a raw color. Use a semantic color token. page.tsx:16:44 · #164b39 `#164b39` is a raw color. Use a semantic color token. page.tsx:16:62 · #fff `#fff` is a raw color. Use a semantic color token. page.tsx:16:323 · 0 16px 36px rgba(17, 66, 48, 0.14) `0 16px 36px rgba(17, 66, 48, 0.14)` is a raw color. Use a semantic color token. page.tsx:16:453 · 1px solid rgba(255,255,255,0.09) `1px solid rgba(255,255,255,0.09)` is a raw color. Use a semantic color token. page.tsx:17:40 · rgba(255,255,255,0.69) `rgba(255,255,255,0.69)` is a raw color. Use a semantic color token. page.tsx:19:67 · 1px solid rgba(255,255,255,0.2) `1px solid rgba(255,255,255,0.2)` is a raw color. Use a semantic color token. page.tsx:20:57 · rgba(255,255,255,0.62) `rgba(255,255,255,0.62)` is a raw color. Use a semantic color token. page.tsx:25:58 · #718078 `#718078` is a raw color. Use a semantic color token. page.tsx:26:33 · #617168 `#617168` is a raw color. Use a semantic color token. page.tsx:26:56 · #e8ede9 `#e8ede9` is a raw color. Use a semantic color token. page.tsx:27:58 · 1px solid #e3e9e4 `1px solid #e3e9e4` is a raw color. Use a semantic color token. page.tsx:27:113 · #fff `#fff` is a raw color. Use a semantic color token. page.tsx:27:132 · 0 5px 18px rgba(25, 41, 34, 0.035) `0 5px 18px rgba(25, 41, 34, 0.035)` is a raw color. Use a semantic color token. page.tsx:30:52 · #78857e `#78857e` is a raw color. Use a semantic color token. page.tsx:30:75 · #fbfcfb `#fbfcfb` is a raw color. Use a semantic color token. page.tsx:30:190 · 1px solid #e9eeea `1px solid #e9eeea` is a raw color. Use a semantic color token. page.tsx:31:59 · 1px solid #edf0ed `1px solid #edf0ed` is a raw color. Use a semantic color token. Every run that broke raw-values/raw-color lint/@pandacss(no-physical-properties) 14 quality page.tsx:6:99 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:11:26 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:12:134 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:16:510 Use the logical property "insetInlineEnd" instead of the physical "right". page.tsx:16:526 Use the logical property "insetBlockStart" instead of the physical "top". page.tsx:17:84 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:19:35 Use the logical property "borderInlineStart" instead of the physical "borderLeft". page.tsx:19:104 Use the logical property "paddingInlineStart" instead of the physical "paddingLeft". page.tsx:20:173 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:22:40 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:23:116 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:30:176 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:31:45 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:32:38 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 · <p class="m_9px_0_0 c_#68776f fs_14px">October 2026 · 01 ott 2026 — 31 ott 2026</p> Elements must meet minimum color contrast ratio thresholds (7 elements, light theme) page.tsx:1:1 · <p class="m_9px_0_0 c_#68776f fs_14px">October 2026 · 01 ott 2026 — 31 ott 2026</p> Elements must meet minimum color contrast ratio thresholds (7 elements, dark theme) Every run that broke a11y/color-contrast typecheck/TS2769 1 quality