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 68 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 165 32 $0.0000 1 read_file 83 34 $0.0000 2 list_files 1,003 33 $0.0000 3
Output cap The provider's default 3
4 const contract = data.contract;
5
6 function money(value: number) {
7 return new Intl.NumberFormat("en-US", {
8 style: "currency",
9 currency: contract.currency,
10 }).format(value);
11 }
12
13 function percent(value: number) {
14 return `${(value * 100).toFixed(2)}%`;
15 }
16
17 export default function Page() {
18 return (
19 <main
20 className={css({
21 maxWidth: "960px",
22 margin: "0 auto",
23 padding: "2rem 1.5rem",
24 color: "gray.900",
25 })}
26 >
27 <header
28 className={css({
29 marginBottom: "2rem",
30 borderBottom: "1px solid",
31 borderColor: "gray.200",
32 paddingBottom: "1rem",
33 })}
34 >
35 <h1 className={css({ fontSize: "2xl", fontWeight: "bold", marginBottom: "0.25rem" })}>
36 {contract.product}
37 </h1>
38 <p className={css({ color: "gray.600" })}>
39 Contract {contract.number} · {contract.borrower}
40 </p>
41 <span
42 className={css({
43 display: "inline-block",
44 marginTop: "0.5rem",
45 padding: "0.25rem 0.75rem",
46 borderRadius: "full",
47 backgroundColor: "green.100",
48 color: "green.800",
49 fontSize: "sm",
50 fontWeight: "medium",
51 textTransform: "capitalize",
52 })}
53 >
54 {contract.status}
55 </span>
56 </header>
57
58 <section className={css({ marginBottom: "2.5rem" })}>
59 <h2 className={css({ fontSize: "xl", fontWeight: "semibold", marginBottom: "1rem" })}>
60 Key terms
61 </h2>
62 <dl
63 className={css({
64 display: "grid",
65 gridTemplateColumns: "repeat(2, 1fr)",
66 gap: "1rem",
67 })}
68 >
69 <div>
70 <dt className={css({ color: "gray.500", fontSize: "sm" })}>Amount borrowed</dt>
71 <dd className={css({ fontWeight: "medium" })}>{money(contract.principal)}</dd>
72 </div>
73 <div>
74 <dt className={css({ color: "gray.500", fontSize: "sm" })}>Nominal interest rate</dt>
75 <dd className={css({ fontWeight: "medium" })}>{percent(contract.nominalRate)}</dd>
76 </div>
77 <div>
78 <dt className={css({ color: "gray.500", fontSize: "sm" })}>APR</dt>
79 <dd className={css({ fontWeight: "medium" })}>{percent(contract.apr)}</dd>
80 </div>
81 <div>
82 <dt className={css({ color: "gray.500", fontSize: "sm" })}>Term (months)</dt>
83 <dd className={css({ fontWeight: "medium" })}>{contract.termMonths}</dd>
84 </div>
85 <div>
86 <dt className={css({ color: "gray.500", fontSize: "sm" })}>Monthly payment</dt>
87 <dd className={css({ fontWeight: "medium" })}>{money(contract.monthlyPayment)}</dd>
88 </div>
89 <div>
90 <dt className={css({ color: "gray.500", fontSize: "sm" })}>Start date</dt>
91 <dd className={css({ fontWeight: "medium" })}>{contract.startDate}</dd>
92 </div>
93 <div>
94 <dt className={css({ color: "gray.500", fontSize: "sm" })}>Amount still owed</dt>
95 <dd className={css({ fontWeight: "medium" })}>{money(contract.outstanding)}</dd>
96 </div>
97 </dl>
98 </section>
99
100 <section className={css({ marginBottom: "2.5rem" })}>
101 <h2 className={css({ fontSize: "xl", fontWeight: "semibold", marginBottom: "1rem" })}>
102 Repayment schedule
103 </h2>
104 <div className={css({ overflowX: "auto" })}>
105 <table className={css({ width: "full", borderCollapse: "collapse", fontSize: "sm" })}>
106 <thead>
107 <tr className={css({ borderBottom: "2px solid", borderColor: "gray.200", textAlign: "left" })}>
108 <th className={css({ padding: "0.5rem" })}>#</th>
109 <th className={css({ padding: "0.5rem" })}>Due date</th>
110 <th className={css({ padding: "0.5rem" })}>Payment</th>
111 <th className={css({ padding: "0.5rem" })}>Principal</th>
112 <th className={css({ padding: "0.5rem" })}>Interest</th>
113 <th className={css({ padding: "0.5rem" })}>Balance after</th>
114 <th className={css({ padding: "0.5rem" })}>Status</th>
115 </tr>
116 </thead>
117 <tbody>
118 {data.schedule.map((row) => (
119 <tr key={row.number} className={css({ borderBottom: "1px solid", borderColor: "gray.100" })}>
120 <td className={css({ padding: "0.5rem" })}>{row.number}</td>
121 <td className={css({ padding: "0.5rem" })}>{row.dueDate}</td>
122 <td className={css({ padding: "0.5rem" })}>{money(row.payment)}</td>
123 <td className={css({ padding: "0.5rem" })}>{money(row.principal)}</td>
124 <td className={css({ padding: "0.5rem" })}>{money(row.interest)}</td>
125 <td className={css({ padding: "0.5rem" })}>{money(row.remaining)}</td>
126 <td className={css({ padding: "0.5rem", textTransform: "capitalize" })}>{row.status}</td>
127 </tr>
128 ))}
129 </tbody>
130 </table>
131 </div>
132 </section>
133
134 <section>
135 <h2 className={css({ fontSize: "xl", fontWeight: "semibold", marginBottom: "1rem" })}>
136 Signed documents
137 </h2>
138 <ul className={css({ listStyle: "none", padding: 0, margin: 0 })}>
139 {data.documents.map((doc) => (
140 <li
141 key={doc.name}
142 className={css({
143 display: "flex",
144 justifyContent: "space-between",
145 padding: "0.75rem 0",
146 borderBottom: "1px solid",
147 borderColor: "gray.100",
148 })}
149 >
150 <span>{doc.name}</span>
151 <span className={css({ color: "gray.500" })}>{doc.signedAt}</span>
152 </li>
153 ))}
154 </ul>
155 </section>
156 </main>
157 );
158 }
159
page.tsx:45:22 · 0.25rem 0.75rem `0.25rem 0.75rem` is a raw length. Use a token. token-roles/palette 16 design-system page.tsx:24:16 · gray.900 `gray.900` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:31:24 · gray.200 `gray.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:38:36 · gray.600 `gray.600` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:47:30 · green.100 `green.100` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:48:20 · green.800 `green.800` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:70:41 · gray.500 `gray.500` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:74:41 · gray.500 `gray.500` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:78:41 · gray.500 `gray.500` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:82:41 · gray.500 `gray.500` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:86:41 · gray.500 `gray.500` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:90:41 · gray.500 `gray.500` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:94:41 · gray.500 `gray.500` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:107:76 · gray.200 `gray.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:119:95 · gray.100 `gray.100` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:147:30 · gray.100 `gray.100` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:151:45 · gray.500 `gray.500` is a palette shade: it ignores the theme. Use a semantic color token. Every run that broke token-roles/palette lint/@pandacss(no-physical-properties) 13 quality page.tsx:29:11 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:30:11 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:32:11 Use the logical property "paddingBlockEnd" instead of the physical "paddingBottom". page.tsx:35:67 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:44:13 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:58:33 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:59:70 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:100:33 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:101:70 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:107:36 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:119:55 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:135:70 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:146:17 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". Every run that broke lint/@pandacss(no-physical-properties) a11y/color-contrast 2 quality page.tsx:1:1 · <dt class="c_gray.500 fs_sm">Amount borrowed</dt> Elements must meet minimum color contrast ratio thresholds (10 elements, light theme) page.tsx:1:1 · <h1 class="fs_2xl fw_bold mb_0.25rem">Personal loan</h1> Elements must meet minimum color contrast ratio thresholds (58 elements, dark theme) Every run that broke a11y/color-contrast typecheck/TS2769 2 quality 9 write_file 88 3,782 $0.0000