Runs / account-details 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 68 counted, under 9 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 295 36 $0.0000 1 read_file 89 36 $0.0000 2 list_files 478 40 $0.0000 3
Output cap The provider's default 3 import { useState } from "react";
4 import { css } from "styled-system/css";
5 import data from "./fixture.json";
6
7 const account = data.account;
8
9 function formatMoney(value: number) {
10 return new Intl.NumberFormat("en-US", {
11 style: "currency",
12 currency: account.currency,
13 }).format(value);
14 }
15
16 export default function AccountPage() {
17 const [copied, setCopied] = useState(false);
18
19 async function copyIban() {
20 try {
21 await navigator.clipboard.writeText(account.iban);
22 } catch {
23 const textarea = document.createElement("textarea");
24 textarea.value = account.iban;
25 document.body.appendChild(textarea);
26 textarea.select();
27 document.execCommand("copy");
28 document.body.removeChild(textarea);
29 }
30 setCopied(true);
31 window.setTimeout(() => setCopied(false), 2000);
32 }
33
34 return (
35 <main
36 className={css({
37 maxWidth: "960px",
38 margin: "0 auto",
39 padding: "2rem 1.5rem",
40 fontFamily: "sans-serif",
41 })}
42 >
43 <nav aria-label="Breadcrumb" className={css({ marginBottom: "1.5rem" })}>
44 <ol
45 className={css({
46 display: "flex",
47 gap: "0.5rem",
48 listStyle: "none",
49 padding: 0,
50 margin: 0,
51 fontSize: "0.9rem",
52 })}
53 >
54 <li>
55 <a href="/accounts" className={css({ color: "#2563eb", textDecoration: "none" })}>
56 Accounts
57 </a>
58 </li>
59 <li aria-hidden="true">/</li>
60 <li aria-current="page" className={css({ fontWeight: "600" })}>
61 {account.name}
62 </li>
63 </ol>
64 </nav>
65
66 <section
67 className={css({
68 border: "1px solid",
69 borderColor: "#e5e7eb",
70 borderRadius: "12px",
71 padding: "1.5rem",
72 marginBottom: "2rem",
73 })}
74 >
75 <h1 className={css({ fontSize: "1.5rem", marginBottom: "1rem" })}>
76 {account.name}
77 </h1>
78 <dl
79 className={css({
80 display: "grid",
81 gridTemplateColumns: "max-content 1fr",
82 gap: "0.5rem 1.5rem",
83 margin: 0,
84 })}
85 >
86 <dt className={css({ fontWeight: "600", color: "#4b5563" })}>Holder</dt>
87 <dd className={css({ margin: 0 })}>{account.holder}</dd>
88
89 <dt className={css({ fontWeight: "600", color: "#4b5563" })}>IBAN</dt>
90 <dd className={css({ margin: 0, display: "flex", alignItems: "center", gap: "0.5rem" })}>
91 <span>{account.iban}</span>
92 <button
93 type="button"
94 onClick={copyIban}
95 title="Copy IBAN"
96 aria-label="Copy IBAN"
97 className={css({
98 cursor: "pointer",
99 border: "1px solid",
100 borderColor: "#d1d5db",
101 background: "#ffffff",
102 borderRadius: "6px",
103 padding: "0.25rem 0.5rem",
104 fontSize: "0.85rem",
105 })}
106 >
107 Copy
108 </button>
109 {copied && (
110 <span
111 role="status"
112 aria-live="polite"
113 className={css({ color: "#16a34a", fontSize: "0.85rem" })}
114 >
115 Copied!
116 </span>
117 )}
118 </dd>
119
120 <dt className={css({ fontWeight: "600", color: "#4b5563" })}>BIC</dt>
121 <dd className={css({ margin: 0 })}>{account.bic}</dd>
122
123 <dt className={css({ fontWeight: "600", color: "#4b5563" })}>Balance</dt>
124 <dd className={css({ margin: 0 })}>{formatMoney(account.balance)}</dd>
125
126 <dt className={css({ fontWeight: "600", color: "#4b5563" })}>Available balance</dt>
127 <dd className={css({ margin: 0 })}>{formatMoney(account.available)}</dd>
128 </dl>
129 </section>
130
131 <section>
132 <h2 className={css({ fontSize: "1.25rem", marginBottom: "0.75rem" })}>
133 Recent transactions
134 </h2>
135 <ul
136 className={css({
137 listStyle: "none",
138 padding: 0,
139 margin: 0,
140 display: "flex",
141 flexDirection: "column",
142 gap: "0.5rem",
143 })}
144 >
145 {data.recent.map((tx) => (
146 <li
147 key={tx.id}
148 className={css({
149 display: "flex",
150 justifyContent: "space-between",
151 alignItems: "center",
152 padding: "0.75rem 1rem",
153 border: "1px solid",
154 borderColor: "#e5e7eb",
155 borderRadius: "8px",
156 })}
157 >
158 <div>
159 <div className={css({ fontWeight: "500" })}>{tx.description}</div>
160 <div className={css({ fontSize: "0.85rem", color: "#6b7280" })}>
161 {tx.date}
162 </div>
163 </div>
164 <span
165 className={css({
166 fontWeight: "600",
167 color: tx.amount < 0 ? "#dc2626" : "#16a34a",
168 })}
169 >
170 {formatMoney(tx.amount)}
171 </span>
172 </li>
173 ))}
174 </ul>
175 <div className={css({ marginTop: "1rem" })}>
176 <a
177 href="/accounts/business/transactions"
178 className={css({ color: "#2563eb", textDecoration: "none", fontWeight: "500" })}
179 >
180 View all transactions
181 </a>
182 </div>
183 </section>
184 </main>
185 );
186 }
187
page.tsx:82:18 · 0.5rem 1.5rem `0.5rem 1.5rem` is a raw length. Use a token. page.tsx:103:26 · 0.25rem 0.5rem `0.25rem 0.5rem` is a raw length. Use a token. token-names/unknown-token 10 design-system page.tsx:40:21 · sans-serif `fontFamily: "sans-serif"`: `sans-serif` is not a fonts token. Use one of: sans, mono. page.tsx:60:64 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:86:44 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:89:44 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:120:44 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:123:44 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:126:44 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:159:51 · 500 `fontWeight: "500"`: `500` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:166:31 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:178:84 · 500 `fontWeight: "500"`: `500` is not a fontWeights token. Use one of: normal, medium, semibold. Every run that broke token-names/unknown-token typecheck/TS2769 4 quality a11y/color-contrast 2 quality page.tsx:1:1 · <a href="/accounts" class="c_#2563eb td_none">Accounts</a> Elements must meet minimum color contrast ratio thresholds (16 elements, dark theme) page.tsx:1:1 · <div class="fs_0.85rem c_#6b7280">2026-11-08</div> Elements must meet minimum color contrast ratio thresholds (10 elements, light theme) Every run that broke a11y/color-contrast lint/jsx-a11y(prefer-tag-over-role) 1 quality 9 write_file 576 3,593 $0.0000
10 write_file 3,617 1,679 $0.0000