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