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 60 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 list_files 121 30 $0.0000 1 read_file 165 29 $0.0000 2 list_files 963 44 $0.0000 3
Output cap The provider's default 3 import { css } from "styled-system/css";
4 import data from "./fixture.json";
5
6 const formatMoney = (amount: number, currency: string) =>
7 `${amount.toFixed(2)} ${currency}`;
8
9 export default function OctoberStatementPage() {
10 const { account, transactions } = data;
11
12 return (
13 <main
14 className={css({
15 maxWidth: "960px",
16 margin: "0 auto",
17 padding: "2rem 1rem",
18 fontFamily: "system-ui, -apple-system, sans-serif",
19 color: "#1f2937",
20 })}
21 >
22 <h1
23 className={css({
24 fontSize: "1.75rem",
25 fontWeight: 700,
26 marginBottom: "1.5rem",
27 })}
28 >
29 October statement
30 </h1>
31
32 <section
33 className={css({
34 border: "1px solid #e5e7eb",
35 borderRadius: "12px",
36 padding: "1.25rem 1.5rem",
37 marginBottom: "2rem",
38 backgroundColor: "#ffffff",
39 boxShadow: "0 1px 3px rgba(0,0,0,0.06)",
40 })}
41 data-testid="account-summary"
42 >
43 <div className={css({ marginBottom: "0.5rem" })}>
44 <span className={css({ color: "#6b7280", fontSize: "0.875rem" })}>
45 Account holder
46 </span>
47 <div
48 className={css({ fontSize: "1.125rem", fontWeight: 600 })}
49 data-testid="account-holder"
50 >
51 {account.holder}
52 </div>
53 </div>
54 <div className={css({ marginBottom: "0.5rem" })}>
55 <span className={css({ color: "#6b7280", fontSize: "0.875rem" })}>
56 IBAN
57 </span>
58 <div className={css({ fontFamily: "monospace" })} data-testid="iban">
59 {account.iban}
60 </div>
61 </div>
62 <div>
63 <span className={css({ color: "#6b7280", fontSize: "0.875rem" })}>
64 Current balance
65 </span>
66 <div
67 className={css({ fontSize: "1.125rem", fontWeight: 600 })}
68 data-testid="balance"
69 >
70 {formatMoney(account.balance, account.currency)}
71 </div>
72 </div>
73 </section>
74
75 <section data-testid="transactions">
76 <h2
77 className={css({
78 fontSize: "1.25rem",
79 fontWeight: 600,
80 marginBottom: "1rem",
81 })}
82 >
83 Transactions
84 </h2>
85
86 <div
87 className={css({
88 display: "grid",
89 gridTemplateColumns: "120px 1fr 140px 120px 100px",
90 gap: "0.75rem",
91 padding: "0.75rem 1rem",
92 borderBottom: "2px solid #e5e7eb",
93 fontWeight: 600,
94 fontSize: "0.875rem",
95 color: "#6b7280",
96 })}
97 >
98 <div>Date</div>
99 <div>Description</div>
100 <div>Category</div>
101 <div>Amount</div>
102 <div>Status</div>
103 </div>
104
105 {transactions.map((tx) => {
106 const pending = tx.status === "pending";
107 return (
108 <div
109 key={tx.id}
110 data-testid="transaction"
111 className={css({
112 display: "grid",
113 gridTemplateColumns: "120px 1fr 140px 120px 100px",
114 gap: "0.75rem",
115 padding: "0.75rem 1rem",
116 borderBottom: "1px solid #f3f4f6",
117 alignItems: "center",
118 opacity: pending ? 0.85 : 1,
119 fontStyle: pending ? "italic" : "normal",
120 })}
121 >
122 <div data-testid="tx-date">{tx.date}</div>
123 <div data-testid="tx-description">{tx.description}</div>
124 <div data-testid="tx-category">{tx.category}</div>
125 <div
126 data-testid="tx-amount"
127 className={css({
128 fontWeight: 600,
129 color: tx.amount < 0 ? "#dc2626" : "#16a34a",
130 })}
131 >
132 {formatMoney(tx.amount, account.currency)}
133 </div>
134 <div>
135 {pending ? (
136 <span
137 data-testid="tx-pending"
138 className={css({
139 display: "inline-block",
140 padding: "0.125rem 0.5rem",
141 borderRadius: "9999px",
142 backgroundColor: "#fef3c7",
143 color: "#92400e",
144 fontSize: "0.75rem",
145 fontWeight: 600,
146 })}
147 >
148 Pending
149 </span>
150 ) : (
151 <span
152 data-testid="tx-status"
153 className={css({ fontSize: "0.75rem", color: "#6b7280" })}
154 >
155 Booked
156 </span>
157 )}
158 </div>
159 </div>
160 );
161 })}
162 </section>
163 </main>
164 );
165 }
166
page.tsx:89:34 · 120px 1fr 140px 120px 100px `120px 1fr 140px 120px 100px` is a raw length. Use a token. page.tsx:91:22 · 0.75rem 1rem `0.75rem 1rem` is a raw length. Use a token. page.tsx:113:38 · 120px 1fr 140px 120px 100px `120px 1fr 140px 120px 100px` is a raw length. Use a token. page.tsx:140:32 · 0.125rem 0.5rem `0.125rem 0.5rem` is a raw length. Use a token. raw-values/raw-color 15 design-system page.tsx:19:16 · #1f2937 `#1f2937` is a raw color. Use a semantic color token. page.tsx:34:19 · 1px solid #e5e7eb `1px solid #e5e7eb` is a raw color. Use a semantic color token. page.tsx:38:28 · #ffffff `#ffffff` is a raw color. Use a semantic color token. page.tsx:39:22 · 0 1px 3px rgba(0,0,0,0.06) `0 1px 3px rgba(0,0,0,0.06)` is a raw color. Use a semantic color token. page.tsx:44:41 · #6b7280 `#6b7280` is a raw color. Use a semantic color token. page.tsx:55:41 · #6b7280 `#6b7280` is a raw color. Use a semantic color token. page.tsx:63:41 · #6b7280 `#6b7280` is a raw color. Use a semantic color token. page.tsx:92:27 · 2px solid #e5e7eb `2px solid #e5e7eb` is a raw color. Use a semantic color token. page.tsx:95:20 · #6b7280 `#6b7280` is a raw color. Use a semantic color token. page.tsx:116:31 · 1px solid #f3f4f6 `1px solid #f3f4f6` is a raw color. Use a semantic color token. page.tsx:129:42 · #dc2626 `#dc2626` is a raw color. Use a semantic color token. page.tsx:129:54 · #16a34a `#16a34a` is a raw color. Use a semantic color token. page.tsx:142:40 · #fef3c7 `#fef3c7` is a raw color. Use a semantic color token. page.tsx:143:30 · #92400e `#92400e` is a raw color. Use a semantic color token. page.tsx:153:66 · #6b7280 `#6b7280` is a raw color. Use a semantic color token. Every run that broke raw-values/raw-color a11y/color-contrast 2 quality page.tsx:1:1 · <div>Date</div> Elements must meet minimum color contrast ratio thresholds (23 elements, light theme) page.tsx:1:1 · <h1 class="fs_1.75rem fw_700 mb_1.5rem">October statement</h1> Elements must meet minimum color contrast ratio thresholds (53 elements, dark theme) Every run that broke a11y/color-contrast token-names/unknown-token 2 design-system page.tsx:18:21 · system-ui, -apple-system, sans-serif `fontFamily: "system-ui, -apple-system, sans-serif"`: `system-ui, -apple-system, sans-serif` is not a fonts token. Use one of: sans, mono. page.tsx:58:45 · monospace `fontFamily: "monospace"`: `monospace` is not a fonts token. Use one of: sans, mono. Every run that broke token-names/unknown-token typecheck/TS2769 0 quality 4 list_files 1,468 69 $0.0000
10 write_file 241 2,692 $0.0000