Runs / loan-contract 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 44 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,101 104 $0.0002 1 write_file 2,057 3,545 $0.0020 2 stop 5,623 260 $0.0007
Output cap The provider's default 3
4 const { contract, schedule, documents } = data;
5
6 const money = new Intl.NumberFormat("en-GB", {
7 style: "currency",
8 currency: contract.currency,
9 });
10
11 const percent = new Intl.NumberFormat("en-GB", {
12 style: "percent",
13 minimumFractionDigits: 2,
14 maximumFractionDigits: 2,
15 });
16
17 const dateFormat = new Intl.DateTimeFormat("en-GB", {
18 day: "2-digit",
19 month: "short",
20 year: "numeric",
21 timeZone: "UTC",
22 });
23
24 function formatDate(iso: string): string {
25 return dateFormat.format(new Date(`${iso}T00:00:00Z`));
26 }
27
28 const contractStatusLabels: Record<string, string> = {
29 active: "Active",
30 closed: "Closed",
31 defaulted: "Defaulted",
32 };
33
34 const instalmentStatusLabels: Record<string, string> = {
35 paid: "Paid",
36 due: "Due",
37 upcoming: "Upcoming",
38 };
39
40 function instalmentStatusClass(status: string): string {
41 switch (status) {
42 case "paid":
43 return css({ color: "green.700", background: "green.50" });
44 case "due":
45 return css({ color: "orange.800", background: "orange.50", fontWeight: "semibold" });
46 default:
47 return css({ color: "gray.600", background: "gray.100" });
48 }
49 }
50
51 const page = css({
52 maxWidth: "1000px",
53 margin: "0 auto",
54 padding: "32px 24px",
55 display: "flex",
56 flexDirection: "column",
57 gap: "32px",
58 color: "gray.900",
59 });
60
61 const sectionTitle = css({
62 fontSize: "lg",
63 fontWeight: "semibold",
64 marginBottom: "12px",
65 });
66
67 const card = css({
68 border: "1px solid",
69 borderColor: "gray.200",
70 borderRadius: "12px",
71 padding: "20px",
72 background: "white",
73 });
74
75 const termsGrid = css({
76 display: "grid",
77 gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
78 gap: "16px",
79 margin: 0,
80 });
81
82 const termLabel = css({ fontSize: "sm", color: "gray.600" });
83 const termValue = css({ fontSize: "lg", fontWeight: "semibold", margin: 0 });
84
85 const table = css({
86 width: "100%",
87 borderCollapse: "collapse",
88 fontSize: "sm",
89 "& th, & td": {
90 padding: "10px 12px",
91 borderBottom: "1px solid",
92 borderColor: "gray.200",
93 textAlign: "left",
94 },
95 "& th": { fontWeight: "semibold", color: "gray.600" },
96 "& .num": { textAlign: "right", fontVariantNumeric: "tabular-nums" },
97 });
98
99 const badge = css({
100 display: "inline-block",
101 padding: "2px 10px",
102 borderRadius: "999px",
103 fontSize: "xs",
104 fontWeight: "medium",
105 });
106
107 const terms: { label: string; value: string }[] = [
108 { label: "Amount borrowed", value: money.format(contract.principal) },
109 { label: "Nominal interest rate", value: percent.format(contract.nominalRate) },
110 { label: "APR", value: percent.format(contract.apr) },
111 { label: "Term", value: `${contract.termMonths} months` },
112 { label: "Monthly payment", value: money.format(contract.monthlyPayment) },
113 { label: "Start date", value: formatDate(contract.startDate) },
114 { label: "Outstanding balance", value: money.format(contract.outstanding) },
115 ];
116
117 export default function LoanContractPage() {
118 return (
119 <main className={page}>
120 <header>
121 <p className={css({ fontSize: "sm", color: "gray.600", margin: 0 })}>
122 Contract {contract.number}
123 </p>
124 <div
125 className={css({
126 display: "flex",
127 alignItems: "center",
128 gap: "12px",
129 flexWrap: "wrap",
130 marginTop: "4px",
131 })}
132 >
133 <h1 className={css({ fontSize: "2xl", fontWeight: "bold", margin: 0 })}>
134 {contract.product}
135 </h1>
136 <span
137 className={`${badge} ${css({ color: "green.700", background: "green.50" })}`}
138 >
139 {contractStatusLabels[contract.status] ?? contract.status}
140 </span>
141 </div>
142 <p className={css({ fontSize: "sm", color: "gray.600", marginTop: "4px" })}>
143 Borrower: {contract.borrower}
144 </p>
145 </header>
146
147 <section aria-labelledby="terms-heading">
148 <h2 id="terms-heading" className={sectionTitle}>
149 Key terms
150 </h2>
151 <div className={card}>
152 <dl className={termsGrid}>
153 {terms.map((term) => (
154 <div key={term.label}>
155 <dt className={termLabel}>{term.label}</dt>
156 <dd className={termValue}>{term.value}</dd>
157 </div>
158 ))}
159 </dl>
160 </div>
161 </section>
162
163 <section aria-labelledby="schedule-heading">
164 <h2 id="schedule-heading" className={sectionTitle}>
165 Repayment schedule
166 </h2>
167 <div className={card} style={{ padding: 0, overflowX: "auto" }}>
168 <table className={table}>
169 <thead>
170 <tr>
171 <th scope="col">No.</th>
172 <th scope="col">Due date</th>
173 <th scope="col" className="num">Payment</th>
174 <th scope="col" className="num">Principal</th>
175 <th scope="col" className="num">Interest</th>
176 <th scope="col" className="num">Balance after</th>
177 <th scope="col">Status</th>
178 </tr>
179 </thead>
180 <tbody>
181 {schedule.map((row) => (
182 <tr key={row.number}>
183 <td>{row.number}</td>
184 <td>{formatDate(row.dueDate)}</td>
185 <td className="num">{money.format(row.payment)}</td>
186 <td className="num">{money.format(row.principal)}</td>
187 <td className="num">{money.format(row.interest)}</td>
188 <td className="num">{money.format(row.remaining)}</td>
189 <td>
190 <span className={`${badge} ${instalmentStatusClass(row.status)}`}>
191 {instalmentStatusLabels[row.status] ?? row.status}
192 </span>
193 </td>
194 </tr>
195 ))}
196 </tbody>
197 </table>
198 </div>
199 </section>
200
201 <section aria-labelledby="documents-heading">
202 <h2 id="documents-heading" className={sectionTitle}>
203 Signed documents
204 </h2>
205 <div className={card}>
206 <ul className={css({ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: "12px" })}>
207 {documents.map((doc) => (
208 <li
209 key={doc.name}
210 className={css({ display: "flex", justifyContent: "space-between", gap: "16px", flexWrap: "wrap" })}
211 >
212 <span>{doc.name}</span>
213 <span className={css({ color: "gray.600" })}>
214 Signed {formatDate(doc.signedAt)}
215 </span>
216 </li>
217 ))}
218 </ul>
219 </div>
220 </section>
221 </main>
222 );
223 }
224
`16px` is a raw length. Use a token.
token-roles/palette 16 design-system page.tsx:43:27 · green.700 `green.700` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:43:52 · green.50 `green.50` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:45:27 · orange.800 `orange.800` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:45:53 · orange.50 `orange.50` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:47:27 · gray.600 `gray.600` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:47:51 · gray.100 `gray.100` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:58:10 · gray.900 `gray.900` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:69:16 · gray.200 `gray.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:82:48 · gray.600 `gray.600` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:92:18 · gray.200 `gray.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:95:44 · gray.600 `gray.600` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:121:52 · gray.600 `gray.600` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:137:49 · green.700 `green.700` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:137:74 · green.50 `green.50` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:142:52 · gray.600 `gray.600` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:213:47 · gray.600 `gray.600` is a palette shade: it ignores the theme. Use a semantic color token. Every run that broke token-roles/palette typecheck/TS2769 4 quality