Runs / statement 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 171 counted, under 5 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 401 14 $0.0000 1 read_file 428 19 $0.0001 2 write_file 3 3,709 $0.0020 3
3
4 const formatDate = (value: string) =>
5 new Intl.DateTimeFormat("en-GB", {
6 day: "2-digit",
7 month: "short",
8 year: "numeric",
9 timeZone: "UTC",
10 }).format(new Date(`${value}T00:00:00Z`));
11
12 const formatMoney = (amount: number) =>
13 new Intl.NumberFormat("it-IT", {
14 style: "currency",
15 currency: data.account.currency,
16 }).format(amount);
17
18 const periodLabel = `${new Intl.DateTimeFormat("en-GB", { month: "long", timeZone: "UTC" }).format(new Date(`${data.account.period.from}T00:00:00Z`))} ${new Date(`${data.account.period.from}T00:00:00Z`).getUTCFullYear()}`;
19
20 const styles = {
21 page: css({ minH: "100vh", bg: "#f5f7fa", color: "#172535", fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif", pb: "64px" }),
22 shell: css({ maxW: "1120px", mx: "auto", px: { base: "20px", md: "40px" } }),
23 topbar: css({ height: "76px", display: "flex", alignItems: "center", justifyContent: "space-between", borderBottom: "1px solid #e8edf2" }),
24 brand: css({ display: "flex", alignItems: "center", gap: "11px", color: "#172535", fontSize: "17px", fontWeight: "750", letterSpacing: "-0.4px" }),
25 brandMark: css({ width: "34px", height: "34px", borderRadius: "11px", bg: "#176b58", display: "grid", placeItems: "center", color: "white" }),
26 topRight: css({ display: "flex", alignItems: "center", gap: "10px", color: "#607080", fontSize: "13px", fontWeight: "550" }),
27 avatar: css({ width: "34px", height: "34px", borderRadius: "50%", bg: "#e5eee9", color: "#176b58", display: "grid", placeItems: "center", fontWeight: "700", fontSize: "12px" }),
28 main: css({ pt: { base: "30px", md: "48px" } }),
29 headingRow: css({ display: "flex", alignItems: { base: "flex-start", sm: "flex-end" }, justifyContent: "space-between", gap: "16px", flexWrap: "wrap", mb: "24px" }),
30 eyebrow: css({ fontSize: "11px", fontWeight: "750", letterSpacing: "1.5px", textTransform: "uppercase", color: "#718092", mb: "8px" }),
31 title: css({ fontSize: { base: "30px", md: "36px" }, lineHeight: "1.1", letterSpacing: "-1.4px", fontWeight: "720", m: 0, color: "#172535" }),
32 period: css({ color: "#728092", fontSize: "14px", mt: "9px" }),
33 statementTag: css({ display: "inline-flex", alignItems: "center", gap: "8px", px: "12px", py: "8px", border: "1px solid #dfe7e7", borderRadius: "999px", color: "#526675", bg: "#fff", fontSize: "12px", fontWeight: "650" }),
34 dot: css({ width: "7px", height: "7px", borderRadius: "50%", bg: "#42a784" }),
35 account: css({ position: "relative", overflow: "hidden", bg: "#142d36", color: "white", borderRadius: "20px", p: { base: "23px", md: "32px" }, mb: "34px", boxShadow: "0 14px 35px rgba(21, 43, 51, 0.12)" }),
36 accountGlow: css({ position: "absolute", width: "340px", height: "340px", borderRadius: "50%", right: "-90px", top: "-210px", bg: "rgba(69, 160, 127, .2)", pointerEvents: "none" }),
37 accountTop: css({ position: "relative", display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: "20px", flexWrap: "wrap" }),
38 accountLabel: css({ color: "#a8c0c1", fontSize: "11px", letterSpacing: "1.1px", textTransform: "uppercase", fontWeight: "700", mb: "8px" }),
39 holder: css({ fontSize: "16px", fontWeight: "600", color: "#f3f7f5" }),
40 balanceLabel: css({ color: "#a8c0c1", fontSize: "11px", letterSpacing: "1.1px", textTransform: "uppercase", fontWeight: "700", textAlign: "right", mb: "7px" }),
41 balance: css({ color: "#fff", fontSize: { base: "30px", md: "36px" }, lineHeight: "1", letterSpacing: "-1px", fontWeight: "700", textAlign: "right", fontVariantNumeric: "tabular-nums" }),
42 divider: css({ position: "relative", border: 0, borderTop: "1px solid rgba(255,255,255,.14)", my: "24px" }),
43 accountBottom: css({ position: "relative", display: "flex", justifyContent: "space-between", alignItems: "center", gap: "16px", flexWrap: "wrap" }),
44 ibanLabel: css({ color: "#a8c0c1", fontSize: "10px", letterSpacing: "1.1px", textTransform: "uppercase", fontWeight: "700", mb: "7px" }),
45 iban: css({ color: "#eff6f3", fontSize: "14px", letterSpacing: ".4px", fontVariantNumeric: "tabular-nums" }),
46 currency: css({ color: "#d4e6de", fontSize: "12px", fontWeight: "650", border: "1px solid rgba(255,255,255,.22)", px: "11px", py: "7px", borderRadius: "999px" }),
47 sectionHead: css({ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: "14px", mb: "15px" }),
48 sectionTitle: css({ fontSize: "20px", fontWeight: "700", letterSpacing: "-.45px", m: 0 }),
49 count: css({ fontSize: "12px", color: "#7a8896" }),
50 list: css({ bg: "white", border: "1px solid #e8edf1", borderRadius: "16px", overflow: "hidden", boxShadow: "0 5px 18px rgba(22, 42, 55, .035)" }),
51 tableHead: css({ display: { base: "none", sm: "grid" }, gridTemplateColumns: "112px minmax(0, 1fr) 150px 140px", alignItems: "center", px: "22px", py: "12px", bg: "#fafbfd", borderBottom: "1px solid #edf0f3", color: "#8a96a2", fontSize: "10px", textTransform: "uppercase", letterSpacing: "1px", fontWeight: "700" }),
52 row: css({ display: "grid", gridTemplateColumns: { base: "1fr auto", sm: "112px minmax(0, 1fr) 150px 140px" }, alignItems: "center", columnGap: "12px", rowGap: "8px", px: { base: "16px", sm: "22px" }, py: "17px", borderBottom: "1px solid #edf0f3", _last: { borderBottom: "none" } }),
53 date: css({ color: "#718092", fontSize: "12px", fontWeight: "550", fontVariantNumeric: "tabular-nums", gridColumn: { base: "1", sm: "auto" }, gridRow: { base: "2", sm: "auto" } }),
54 details: css({ minW: 0, gridColumn: { base: "1", sm: "auto" }, gridRow: { base: "1", sm: "auto" } }),
55 description: css({ color: "#203241", fontSize: "13px", fontWeight: "650", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }),
56 mobileCategory: css({ display: { base: "block", sm: "none" }, mt: "4px", color: "#8793a0", fontSize: "11px" }),
57 category: css({ color: "#657585", fontSize: "12px" }),
58 amount: css({ textAlign: "right", fontSize: "13px", fontWeight: "700", fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap", color: "#263745", gridColumn: { base: "2", sm: "auto" }, gridRow: { base: "1 / span 2", sm: "auto" } }),
59 positive: css({ color: "#168060" }),
60 status: css({ display: "inline-flex", alignItems: "center", gap: "5px", ml: "9px", px: "7px", py: "4px", borderRadius: "999px", bg: "#fff5e5", color: "#a46a17", fontSize: "10px", fontWeight: "700", verticalAlign: "middle" }),
61 statusDot: css({ width: "5px", height: "5px", borderRadius: "50%", bg: "#e5a43c" }),
62 footer: css({ mt: "15px", color: "#8995a1", fontSize: "11px", lineHeight: "1.5" }),
63 };
64
65 export default function OctoberStatementPage() {
66 return (
67 <div className={styles.page}>
68 <header className={styles.shell}>
69 <div className={styles.topbar}>
70 <div className={styles.brand}>
71 <span className={styles.brandMark} aria-hidden="true">
72 <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 5.1 9 2l6 3.1v7.8L9 16l-6-3.1V5.1Z" stroke="currentColor" strokeWidth="1.5"/><path d="M6 9h6M9 6v6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
73 </span>
74 <span>northstar</span>
75 </div>
76 <div className={styles.topRight}>
77 <span>Personal account</span>
78 <span className={styles.avatar} aria-label={data.account.holder}>{data.account.holder.split(" ").map((part) => part[0]).join("")}</span>
79 </div>
80 </div>
81 </header>
82
83 <main className={`${styles.shell} ${styles.main}`}>
84 <div className={styles.headingRow}>
85 <div>
86 <div className={styles.eyebrow}>Account statement</div>
87 <h1 className={styles.title}>{periodLabel}</h1>
88 <div className={styles.period}>{formatDate(data.account.period.from)} – {formatDate(data.account.period.to)}</div>
89 </div>
90 <div className={styles.statementTag}><span className={styles.dot} /> Monthly statement</div>
91 </div>
92
93 <section className={styles.account} aria-label="Account overview">
94 <div className={styles.accountGlow} aria-hidden="true" />
95 <div className={styles.accountTop}>
96 <div>
97 <div className={styles.accountLabel}>Account holder</div>
98 <div className={styles.holder}>{data.account.holder}</div>
99 </div>
100 <div>
101 <div className={styles.balanceLabel}>Current balance</div>
102 <div className={styles.balance}>{formatMoney(data.account.balance)}</div>
103 </div>
104 </div>
105 <hr className={styles.divider} />
106 <div className={styles.accountBottom}>
107 <div>
108 <div className={styles.ibanLabel}>IBAN</div>
109 <div className={styles.iban}>{data.account.iban}</div>
110 </div>
111 <span className={styles.currency}>{data.account.currency} · Euro</span>
112 </div>
113 </section>
114
115 <section aria-labelledby="transactions-heading">
116 <div className={styles.sectionHead}>
117 <h2 className={styles.sectionTitle} id="transactions-heading">Transactions</h2>
118 <span className={styles.count}>{data.transactions.length} transactions</span>
119 </div>
120 <div className={styles.list}>
121 <div className={styles.tableHead} aria-hidden="true">
122 <span>Date</span><span>Description</span><span>Category</span><span style={{ textAlign: "right" }}>Amount</span>
123 </div>
124 {data.transactions.map((transaction) => (
125 <article className={styles.row} key={transaction.id}>
126 <time className={styles.date} dateTime={transaction.date}>{formatDate(transaction.date)}</time>
127 <div className={styles.details}>
128 <div className={styles.description}>
129 {transaction.description}
130 {transaction.status === "pending" && <span className={styles.status}><span className={styles.statusDot} />Pending</span>}
131 </div>
132 <div className={styles.mobileCategory}>{transaction.category}</div>
133 </div>
134 <div className={styles.category}>{transaction.category}</div>
135 <div className={`${styles.amount} ${transaction.amount > 0 ? styles.positive : ""}`}>
136 {transaction.amount > 0 ? "+" : "−"}{formatMoney(Math.abs(transaction.amount))}
137 </div>
138 </article>
139 ))}
140 </div>
141 <p className={styles.footer}>Pending transactions are not final and may change before they are booked.</p>
142 </section>
143 </main>
144 </div>
145 );
146 }
147
raw-values/raw-color 28 design-system page.tsx:21:34 · #f5f7fa `#f5f7fa` is a raw color. Use a semantic color token. page.tsx:21:52 · #172535 `#172535` is a raw color. Use a semantic color token. page.tsx:23:119 · 1px solid #e8edf2 `1px solid #e8edf2` is a raw color. Use a semantic color token. page.tsx:24:75 · #172535 `#172535` is a raw color. Use a semantic color token. page.tsx:25:77 · #176b58 `#176b58` is a raw color. Use a semantic color token. page.tsx:25:134 · white `white` is a raw color. Use a semantic color token. page.tsx:26:78 · #607080 `#607080` is a raw color. Use a semantic color token. page.tsx:27:73 · #e5eee9 `#e5eee9` is a raw color. Use a semantic color token. page.tsx:27:91 · #176b58 `#176b58` is a raw color. Use a semantic color token. page.tsx:30:114 · #718092 `#718092` is a raw color. Use a semantic color token. page.tsx:31:132 · #172535 `#172535` is a raw color. Use a semantic color token. page.tsx:32:24 · #728092 `#728092` is a raw color. Use a semantic color token. page.tsx:33:112 · 1px solid #dfe7e7 `1px solid #dfe7e7` is a raw color. Use a semantic color token. page.tsx:33:163 · #526675 `#526675` is a raw color. Use a semantic color token. page.tsx:33:178 · #fff `#fff` is a raw color. Use a semantic color token. page.tsx:34:68 · #42a784 `#42a784` is a raw color. Use a semantic color token. page.tsx:35:64 · #142d36 `#142d36` is a raw color. Use a semantic color token. page.tsx:35:82 · white `white` is a raw color. Use a semantic color token. page.tsx:35:169 · 0 14px 35px rgba(21, 43, 51, 0.12) `0 14px 35px rgba(21, 43, 51, 0.12)` is a raw color. Use a semantic color token. page.tsx:36:133 · rgba(69, 160, 127, .2) `rgba(69, 160, 127, .2)` is a raw color. Use a semantic color token. page.tsx:38:30 · #a8c0c1 `#a8c0c1` is a raw color. Use a semantic color token. page.tsx:39:61 · #f3f7f5 `#f3f7f5` is a raw color. Use a semantic color token. page.tsx:40:30 · #a8c0c1 `#a8c0c1` is a raw color. Use a semantic color token. page.tsx:41:25 · #fff `#fff` is a raw color. Use a semantic color token. page.tsx:42:62 · 1px solid rgba(255,255,255,.14) `1px solid rgba(255,255,255,.14)` is a raw color. Use a semantic color token. page.tsx:44:27 · #a8c0c1 `#a8c0c1` is a raw color. Use a semantic color token. page.tsx:45:22 · #eff6f3 `#eff6f3` is a raw color. Use a semantic color token. page.tsx:46:26 · #d4e6de `#d4e6de` is a raw color. Use a semantic color token. Every run that broke raw-values/raw-color lint/@pandacss(no-physical-properties) 13 quality page.tsx:21:122 Use the logical property "paddingBlockEnd" instead of the physical "paddingBottom". page.tsx:23:105 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:28:15 Use the logical property "paddingBlockStart" instead of the physical "paddingTop". page.tsx:29:154 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:30:125 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:32:53 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:35:146 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:36:98 Use the logical property "insetInlineEnd" instead of the physical "right". page.tsx:36:114 Use the logical property "insetBlockStart" instead of the physical "top". page.tsx:38:130 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:40:150 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:42:51 Use the logical property "borderBlockStart" instead of the physical "borderTop". page.tsx:44:127 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". Every run that broke lint/@pandacss(no-physical-properties) a11y/color-contrast 2 quality page.tsx:1:1 · <div class="fs_11px fw_750 ls_1.5px tt_uppercase c_#718092 mb_8px">Account statement</div> Elements must meet minimum color contrast ratio thresholds (26 elements, light theme) page.tsx:1:1 · <div class="fs_11px fw_750 ls_1.5px tt_uppercase c_#718092 mb_8px">Account statement</div> Elements must meet minimum color contrast ratio thresholds (26 elements, dark theme) Every run that broke a11y/color-contrast typecheck/TS2769 0 quality