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 272 counted, under 7 rules. “Not counted” marks a compiler error that restates a design-system violation, “Ignored” one the agent silenced with a comment. The first 200 are listed.
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 445 14 $0.0001 1 read_file 472 19 $0.0001 2 write_file 3 4,428 $0.0024 3
Output cap
The provider's default 3
4 const formatCurrency = (value: number) =>
5 new Intl.NumberFormat("en-IE", {
6 style: "currency",
7 currency: data.contract.currency,
8 }).format(value);
9
10 const formatDate = (value: string) =>
11 new Intl.DateTimeFormat("en-GB", {
12 day: "2-digit",
13 month: "short",
14 year: "numeric",
15 }).format(new Date(`${value}T12:00:00`));
16
17 const statusLabels: Record<string, string> = {
18 active: "Active",
19 paid: "Paid",
20 due: "Due now",
21 upcoming: "Upcoming",
22 };
23
24 export default function LoanContractPage() {
25 const { contract, schedule, documents } = data;
26
27 return (
28 <main className={css({ minHeight: "100vh", bg: "#f5f7fa", color: "#182433", fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" })}>
29 <header className={css({ bg: "white", borderBottom: "1px solid #e6ebf0" })}>
30 <div className={css({ maxW: "1200px", mx: "auto", px: { base: "20px", md: "32px" }, h: "68px", display: "flex", alignItems: "center", justifyContent: "space-between" })}>
31 <div className={css({ display: "flex", alignItems: "center", gap: "11px" })}>
32 <div className={css({ w: "34px", h: "34px", borderRadius: "10px", bg: "#164e63", display: "grid", placeItems: "center", color: "white", fontSize: "18px", fontWeight: "700" })}>v</div>
33 <span className={css({ fontSize: "17px", fontWeight: "700", letterSpacing: "-0.04em" })}>vektos</span>
34 </div>
35 <div className={css({ display: "flex", alignItems: "center", gap: "12px", color: "#526173", fontSize: "13px" })}>
36 <span className={css({ display: { base: "none", sm: "inline" } })}>{contract.borrower}</span>
37 <div className={css({ width: "34px", height: "34px", borderRadius: "50%", bg: "#e5f1f2", color: "#164e63", display: "grid", placeItems: "center", fontWeight: "700" })}>GR</div>
38 </div>
39 </div>
40 </header>
41
42 <div className={css({ maxW: "1200px", mx: "auto", px: { base: "20px", md: "32px" }, py: { base: "25px", md: "38px" } })}>
43 <nav aria-label="Breadcrumb" className={css({ display: "flex", alignItems: "center", gap: "9px", color: "#8290a0", fontSize: "13px", mb: "24px" })}>
44 <span>My finances</span><span aria-hidden="true">/</span><span>Loans</span><span aria-hidden="true">/</span><span className={css({ color: "#344456" })}>Contract details</span>
45 </nav>
46
47 <section className={css({ display: "flex", flexWrap: "wrap", alignItems: "flex-start", justifyContent: "space-between", gap: "18px", mb: "26px" })}>
48 <div>
49 <div className={css({ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "12px", mb: "8px" })}>
50 <h1 className={css({ m: 0, fontSize: { base: "26px", md: "32px" }, lineHeight: "1.2", letterSpacing: "-0.04em", fontWeight: "700" })}>{contract.product}</h1>
51 <span className={css({ display: "inline-flex", alignItems: "center", gap: "7px", px: "10px", py: "5px", borderRadius: "999px", bg: "#e8f5ef", color: "#17734b", fontSize: "12px", fontWeight: "650" })}><span className={css({ width: "7px", height: "7px", borderRadius: "50%", bg: "#23a36d" })} />{statusLabels[contract.status] ?? contract.status}</span>
52 </div>
53 <p className={css({ m: 0, color: "#687789", fontSize: "14px" })}>Contract <span className={css({ color: "#344456", fontWeight: "600" })}>{contract.number}</span></p>
54 </div>
55 <div className={css({ color: "#687789", fontSize: "13px", pt: "4px" })}>Borrower <span className={css({ color: "#344456", fontWeight: "600", ml: "5px" })}>{contract.borrower}</span></div>
56 </section>
57
58 <section aria-label="Outstanding balance" className={css({ bg: "#164e63", color: "white", borderRadius: "16px", p: { base: "22px", md: "28px 32px" }, mb: "22px", display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: "20px", position: "relative", overflow: "hidden" })}>
59 <div className={css({ position: "relative", zIndex: 1 })}>
60 <p className={css({ m: 0, mb: "8px", color: "#c5dce2", fontSize: "13px", fontWeight: "500" })}>Outstanding balance</p>
61 <div className={css({ fontSize: { base: "30px", md: "38px" }, lineHeight: "1.15", letterSpacing: "-0.04em", fontWeight: "700" })}>{formatCurrency(contract.outstanding)}</div>
62 </div>
63 <div className={css({ position: "relative", zIndex: 1, borderLeft: { base: "none", sm: "1px solid rgba(255,255,255,.22)" }, pl: { base: "0", sm: "28px" }, minW: "190px" })}>
64 <p className={css({ m: 0, mb: "7px", color: "#c5dce2", fontSize: "13px" })}>Next payment</p>
65 <div className={css({ fontSize: "19px", fontWeight: "650" })}>{formatCurrency(schedule.find((item) => item.status === "due")?.payment ?? contract.monthlyPayment)}</div>
66 <div className={css({ mt: "4px", color: "#d8e8eb", fontSize: "13px" })}>{formatDate(schedule.find((item) => item.status === "due")?.dueDate ?? schedule[0].dueDate)}</div>
67 </div>
68 <div aria-hidden="true" className={css({ position: "absolute", width: "260px", height: "260px", border: "1px solid rgba(255,255,255,.09)", borderRadius: "50%", right: "-50px", top: "-125px", _after: { content: "\"\"", position: "absolute", inset: "25px", border: "1px solid rgba(255,255,255,.08)", borderRadius: "50%" } })} />
69 </section>
70
71 <section className={css({ bg: "white", border: "1px solid #e6ebf0", borderRadius: "14px", p: { base: "20px", md: "25px 28px" }, mb: "22px" })}>
72 <div className={css({ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "12px", mb: "20px" })}>
73 <div><h2 className={css({ m: 0, fontSize: "17px", letterSpacing: "-0.02em" })}>Key terms</h2><p className={css({ m: 0, mt: "4px", color: "#8290a0", fontSize: "12px" })}>Your loan at a glance</p></div>
74 <span aria-hidden="true" className={css({ color: "#9aa6b2", fontSize: "19px" })}>↗</span>
75 </div>
76 <div className={css({ display: "grid", gridTemplateColumns: { base: "repeat(2, minmax(0, 1fr))", md: "repeat(3, minmax(0, 1fr))", lg: "repeat(6, minmax(0, 1fr))" }, gap: { base: "20px 12px", md: "24px 18px" } })}>
77 {[
78 ["Amount borrowed", formatCurrency(contract.principal)],
79 ["Nominal interest", `${(contract.nominalRate * 100).toFixed(2)}%`],
80 ["APR", `${(contract.apr * 100).toFixed(2)}%`],
81 ["Term", `${contract.termMonths} months`],
82 ["Monthly payment", formatCurrency(contract.monthlyPayment)],
83 ["Start date", formatDate(contract.startDate)],
84 ].map(([label, value]) => <div key={label}>
85 <div className={css({ mb: "7px", color: "#8290a0", fontSize: "12px" })}>{label}</div>
86 <div className={css({ color: "#253446", fontSize: "14px", fontWeight: "650" })}>{value}</div>
87 </div>)}
88 </div>
89 </section>
90
91 <section className={css({ bg: "white", border: "1px solid #e6ebf0", borderRadius: "14px", overflow: "hidden", mb: "22px" })}>
92 <div className={css({ p: { base: "20px", md: "24px 28px" }, display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: "10px" })}>
93 <div><h2 className={css({ m: 0, fontSize: "17px", letterSpacing: "-0.02em" })}>Repayment schedule</h2><p className={css({ m: 0, mt: "4px", color: "#8290a0", fontSize: "12px" })}>Your instalments and remaining balance</p></div>
94 <span className={css({ color: "#687789", fontSize: "12px", bg: "#f4f6f8", borderRadius: "6px", px: "9px", py: "6px" })}>{schedule.length} instalments shown</span>
95 </div>
96 <div className={css({ overflowX: "auto", width: "100%" })}>
97 <table className={css({ width: "100%", minW: "850px", borderCollapse: "collapse", textAlign: "left" })}>
98 <thead><tr className={css({ bg: "#f8fafb" })}>
99 {["Instalment", "Due date", "Payment", "Principal", "Interest", "Balance after", "Status"].map((heading) => <th key={heading} className={css({ px: "18px", py: "12px", color: "#758395", fontSize: "11px", fontWeight: "600", whiteSpace: "nowrap", borderTop: "1px solid #edf0f3", borderBottom: "1px solid #edf0f3" })}>{heading}</th>)}
100 </tr></thead>
101 <tbody>{schedule.map((item) => <tr key={item.number} className={css({ _last: { "& td": { borderBottom: "none" } } })}>
102 <td className={css({ px: "18px", py: "15px", color: "#344456", fontSize: "13px", fontWeight: "600", borderBottom: "1px solid #edf0f3" })}>#{String(item.number).padStart(2, "0")}</td>
103 <td className={css({ px: "18px", py: "15px", color: "#526173", fontSize: "13px", whiteSpace: "nowrap", borderBottom: "1px solid #edf0f3" })}>{formatDate(item.dueDate)}</td>
104 <td className={css({ px: "18px", py: "15px", color: "#253446", fontSize: "13px", fontWeight: "600", whiteSpace: "nowrap", borderBottom: "1px solid #edf0f3" })}>{formatCurrency(item.payment)}</td>
105 <td className={css({ px: "18px", py: "15px", color: "#526173", fontSize: "13px", whiteSpace: "nowrap", borderBottom: "1px solid #edf0f3" })}>{formatCurrency(item.principal)}</td>
106 <td className={css({ px: "18px", py: "15px", color: "#526173", fontSize: "13px", whiteSpace: "nowrap", borderBottom: "1px solid #edf0f3" })}>{formatCurrency(item.interest)}</td>
107 <td className={css({ px: "18px", py: "15px", color: "#526173", fontSize: "13px", whiteSpace: "nowrap", borderBottom: "1px solid #edf0f3" })}>{formatCurrency(item.remaining)}</td>
108 <td className={css({ px: "18px", py: "15px", borderBottom: "1px solid #edf0f3" })}><span className={css({ display: "inline-flex", alignItems: "center", gap: "6px", whiteSpace: "nowrap", fontSize: "11px", fontWeight: "600", color: item.status === "paid" ? "#17734b" : item.status === "due" ? "#a45b12" : "#66768a", bg: item.status === "paid" ? "#e8f5ef" : item.status === "due" ? "#fff3e5" : "#eef1f4", px: "9px", py: "5px", borderRadius: "999px" })}><span className={css({ width: "6px", height: "6px", bg: item.status === "paid" ? "#23a36d" : item.status === "due" ? "#dc8b27" : "#8996a5", borderRadius: "50%" })} />{statusLabels[item.status] ?? item.status}</span></td>
109 </tr>)}</tbody>
110 </table>
111 </div>
112 <div className={css({ borderTop: "1px solid #edf0f3", px: { base: "20px", md: "28px" }, py: "13px", color: "#8290a0", fontSize: "11px" })}>Amounts shown in {contract.currency}. Schedule reflects the instalments currently available for this contract.</div>
113 </section>
114
115 <section className={css({ bg: "white", border: "1px solid #e6ebf0", borderRadius: "14px", p: { base: "20px", md: "24px 28px" } })}>
116 <div className={css({ mb: "17px" })}><h2 className={css({ m: 0, fontSize: "17px", letterSpacing: "-0.02em" })}>Signed documents</h2><p className={css({ m: 0, mt: "4px", color: "#8290a0", fontSize: "12px" })}>Documents associated with this contract</p></div>
117 <div className={css({ display: "grid", gridTemplateColumns: { base: "1fr", md: "repeat(3, minmax(0, 1fr))" }, gap: "10px" })}>
118 {documents.map((document) => <article key={document.name} className={css({ display: "flex", alignItems: "center", gap: "12px", border: "1px solid #e9edf1", borderRadius: "10px", p: "13px" })}>
119 <div aria-hidden="true" className={css({ width: "36px", height: "40px", borderRadius: "7px", bg: "#eef5f6", color: "#236578", display: "grid", placeItems: "center", flexShrink: 0, fontSize: "17px" })}>▤</div>
120 <div className={css({ minW: 0 })}><div className={css({ color: "#344456", fontSize: "13px", fontWeight: "600", lineHeight: "1.4" })}>{document.name}</div><div className={css({ mt: "4px", color: "#8290a0", fontSize: "11px" })}>Signed {formatDate(document.signedAt)}</div></div>
121 <span aria-label="Signed" className={css({ ml: "auto", color: "#219066", fontSize: "15px", flexShrink: 0 })}>✓</span>
122 </article>)}
123 </div>
124 </section>
125 <footer className={css({ pt: "24px", pb: "6px", textAlign: "center", color: "#9aa6b2", fontSize: "11px" })}>Contract details · {contract.number}</footer>
126 </div>
127 </main>
128 );
129 }
130
raw-values/raw-color 25 design-system page.tsx:28:52 · #f5f7fa `#f5f7fa` is a raw color. Use a semantic color token. page.tsx:28:70 · #182433 `#182433` is a raw color. Use a semantic color token. page.tsx:29:36 · white `white` is a raw color. Use a semantic color token. page.tsx:29:59 · 1px solid #e6ebf0 `1px solid #e6ebf0` is a raw color. Use a semantic color token. page.tsx:32:83 · #164e63 `#164e63` is a raw color. Use a semantic color token. page.tsx:32:140 · white `white` is a raw color. Use a semantic color token. page.tsx:35:92 · #526173 `#526173` is a raw color. Use a semantic color token. page.tsx:37:91 · #e5f1f2 `#e5f1f2` is a raw color. Use a semantic color token. page.tsx:37:109 · #164e63 `#164e63` is a raw color. Use a semantic color token. page.tsx:43:113 · #8290a0 `#8290a0` is a raw color. Use a semantic color token. page.tsx:44:149 · #344456 `#344456` is a raw color. Use a semantic color token. page.tsx:51:146 · #e8f5ef `#e8f5ef` is a raw color. Use a semantic color token. page.tsx:51:164 · #17734b `#17734b` is a raw color. Use a semantic color token. page.tsx:51:292 · #23a36d `#23a36d` is a raw color. Use a semantic color token. page.tsx:53:46 · #687789 `#687789` is a raw color. Use a semantic color token. page.tsx:53:117 · #344456 `#344456` is a raw color. Use a semantic color token. page.tsx:55:40 · #687789 `#687789` is a raw color. Use a semantic color token. page.tsx:55:122 · #344456 `#344456` is a raw color. Use a semantic color token. page.tsx:58:72 · #164e63 `#164e63` is a raw color. Use a semantic color token. page.tsx:58:90 · white `white` is a raw color. Use a semantic color token. page.tsx:60:57 · #c5dce2 `#c5dce2` is a raw color. Use a semantic color token. page.tsx:63:98 · 1px solid rgba(255,255,255,.22) `1px solid rgba(255,255,255,.22)` is a raw color. Use a semantic color token. page.tsx:64:57 · #c5dce2 `#c5dce2` is a raw color. Use a semantic color token. page.tsx:66:53 · #d8e8eb `#d8e8eb` is a raw color. Use a semantic color token. page.tsx:68:115 · 1px solid rgba(255,255,255,.09) `1px solid rgba(255,255,255,.09)` is a raw color. Use a semantic color token. Every run that broke raw-values/raw-color lint/@pandacss(no-physical-properties) 12 quality page.tsx:29:45 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:43:142 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:47:142 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:49:105 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:55:69 Use the logical property "paddingBlockStart" instead of the physical "paddingTop". page.tsx:55:152 Use the logical property "marginInlineStart" instead of the physical "marginLeft". page.tsx:58:159 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:60:39 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:63:66 Use the logical property "borderInlineStart" instead of the physical "borderLeft". page.tsx:63:135 Use the logical property "paddingInlineStart" instead of the physical "paddingLeft". page.tsx:64:39 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:66:35 Use the logical property "marginBlockStart" instead of the physical "marginTop". Every run that broke lint/@pandacss(no-physical-properties) typecheck/TS2532 1 quality typecheck/TS2769 1 quality