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 51 counted, under 7 rules. “Not counted” marks a compiler error that restates a design-system violation, “Ignored” one the agent silenced with a comment.
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 read_file, list_files 1,035 74 $0.0001 1 write_file 2,073 2,397 $0.0014 2 stop 4,491 60 $0.0005
Output cap The provider's default 3
4 type Transaction = {
5 id: string;
6 date: string;
7 description: string;
8 category: string;
9 amount: number;
10 status: "booked" | "pending";
11 };
12
13 const { account, transactions } = data as {
14 account: {
15 holder: string;
16 iban: string;
17 currency: string;
18 balance: number;
19 period: { from: string; to: string };
20 };
21 transactions: Transaction[];
22 };
23
24 const money = (value: number) =>
25 new Intl.NumberFormat("en-IE", {
26 style: "currency",
27 currency: account.currency,
28 signDisplay: "exceptZero",
29 }).format(value);
30
31 const formatDate = (iso: string) =>
32 new Intl.DateTimeFormat("en-GB", {
33 day: "2-digit",
34 month: "short",
35 year: "numeric",
36 timeZone: "UTC",
37 }).format(new Date(`${iso}T00:00:00Z`));
38
39 export default function StatementPage() {
40 const pendingCount = transactions.filter((t) => t.status === "pending").length;
41
42 return (
43 <main
44 className={css({
45 maxWidth: "960px",
46 margin: "0 auto",
47 padding: "32px 24px",
48 fontFamily: "sans-serif",
49 color: "gray.900",
50 })}
51 >
52 <header
53 className={css({
54 display: "flex",
55 flexWrap: "wrap",
56 justifyContent: "space-between",
57 alignItems: "flex-end",
58 gap: "16px",
59 borderBottom: "1px solid",
60 borderColor: "gray.200",
61 paddingBottom: "24px",
62 marginBottom: "24px",
63 })}
64 >
65 <div>
66 <p className={css({ fontSize: "sm", color: "gray.600", margin: 0 })}>
67 Account statement · {formatDate(account.period.from)} –{" "}
68 {formatDate(account.period.to)}
69 </p>
70 <h1 className={css({ fontSize: "2xl", fontWeight: "bold", margin: "4px 0" })}>
71 {account.holder}
72 </h1>
73 <p className={css({ fontFamily: "monospace", fontSize: "sm", margin: 0 })}>
74 IBAN {account.iban}
75 </p>
76 </div>
77 <div className={css({ textAlign: "right" })}>
78 <p className={css({ fontSize: "sm", color: "gray.600", margin: 0 })}>
79 Current balance
80 </p>
81 <p
82 className={css({
83 fontSize: "3xl",
84 fontWeight: "bold",
85 margin: "4px 0 0",
86 fontVariantNumeric: "tabular-nums",
87 })}
88 >
89 {new Intl.NumberFormat("en-IE", {
90 style: "currency",
91 currency: account.currency,
92 }).format(account.balance)}
93 </p>
94 </div>
95 </header>
96
97 <section aria-labelledby="transactions-heading">
98 <div
99 className={css({
100 display: "flex",
101 justifyContent: "space-between",
102 alignItems: "baseline",
103 marginBottom: "12px",
104 })}
105 >
106 <h2 id="transactions-heading" className={css({ fontSize: "lg", fontWeight: "semibold", margin: 0 })}>
107 Transactions
108 </h2>
109 <span className={css({ fontSize: "sm", color: "gray.600" })}>
110 {transactions.length} transactions
111 {pendingCount > 0 ? ` · ${pendingCount} pending` : ""}
112 </span>
113 </div>
114
115 <table
116 className={css({
117 width: "100%",
118 borderCollapse: "collapse",
119 fontSize: "sm",
120 })}
121 >
122 <thead>
123 <tr className={css({ textAlign: "left", borderBottom: "1px solid", borderColor: "gray.300" })}>
124 <th className={css({ padding: "8px", width: "140px" })}>Date</th>
125 <th className={css({ padding: "8px" })}>Description</th>
126 <th className={css({ padding: "8px", width: "160px" })}>Category</th>
127 <th className={css({ padding: "8px", width: "140px", textAlign: "right" })}>
128 Amount
129 </th>
130 </tr>
131 </thead>
132 <tbody>
133 {transactions.map((t) => {
134 const isPending = t.status === "pending";
135 return (
136 <tr
137 key={t.id}
138 data-status={t.status}
139 className={css({
140 borderBottom: "1px solid",
141 borderColor: "gray.100",
142 background: isPending ? "amber.50" : "transparent",
143 })}
144 >
145 <td className={css({ padding: "10px 8px", whiteSpace: "nowrap" })}>
146 {formatDate(t.date)}
147 </td>
148 <td className={css({ padding: "10px 8px" })}>
149 {t.description}
150 {isPending && (
151 <span
152 className={css({
153 marginLeft: "8px",
154 padding: "2px 8px",
155 borderRadius: "999px",
156 fontSize: "xs",
157 fontWeight: "semibold",
158 background: "amber.200",
159 color: "amber.900",
160 })}
161 >
162 Pending
163 </span>
164 )}
165 </td>
166 <td className={css({ padding: "10px 8px", color: "gray.700" })}>{t.category}</td>
167 <td
168 className={css({
169 padding: "10px 8px",
170 textAlign: "right",
171 fontVariantNumeric: "tabular-nums",
172 whiteSpace: "nowrap",
173 color: t.amount < 0 ? "red.700" : "green.700",
174 fontStyle: isPending ? "italic" : "normal",
175 })}
176 >
177 {money(t.amount)}
178 </td>
179 </tr>
180 );
181 })}
182 </tbody>
183 </table>
184 </section>
185 </main>
186 );
187 }
188
`4px 0 0` is a raw length. Use a token.
token-roles/palette 13 design-system page.tsx:49:16 · gray.900 `gray.900` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:60:24 · gray.200 `gray.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:66:54 · gray.600 `gray.600` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:78:54 · gray.600 `gray.600` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:109:57 · gray.600 `gray.600` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:123:93 · gray.300 `gray.300` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:141:34 · gray.100 `gray.100` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:142:45 · amber.50 `amber.50` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:158:39 · amber.200 `amber.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:159:34 · amber.900 `amber.900` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:166:68 · gray.700 `gray.700` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:173:45 · red.700 `red.700` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:173:57 · green.700 `green.700` is a palette shade: it ignores the theme. Use a semantic color token. Every run that broke token-roles/palette typecheck/TS2769 3 quality a11y/color-contrast 1 quality page.tsx:1:1 · <td class="p_10px_8px ta_right fv-num_tabular-nums white-space_nowrap c_red.700 font-style_italic">-€13.99</td> Elements must meet minimum color contrast ratio thresholds (8 elements, dark theme) Every run that broke a11y/color-contrast