Runs / kyc-form 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 231 counted, under 6 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 748 4,863 $0.0025 3
Output cap
The provider's default 3 import { useState, type FormEvent } from "react";
4 import { css } from "styled-system/css";
5 import data from "./fixture.json";
6
7 type FormValues = {
8 dateOfBirth: string;
9 nationality: string;
10 residence: string;
11 taxId: string;
12 documentType: string;
13 documentNumber: string;
14 politicallyExposed: string;
15 };
16
17 type FieldName = keyof FormValues;
18
19 const initialValues: FormValues = {
20 dateOfBirth: "",
21 nationality: "",
22 residence: "",
23 taxId: "",
24 documentType: "",
25 documentNumber: "",
26 politicallyExposed: "",
27 };
28
29 const inputStyle = (hasError: boolean) =>
30 css({
31 width: "100%",
32 height: "48px",
33 boxSizing: "border-box",
34 px: "14px",
35 border: hasError ? "1px solid #c83b45" : "1px solid #d9e0e8",
36 borderRadius: "8px",
37 background: "white",
38 color: "#182536",
39 fontSize: "14px",
40 outline: "none",
41 transition: "border-color 150ms ease, box-shadow 150ms ease",
42 _placeholder: { color: "#9aa6b4" },
43 _focus: { borderColor: "#3068d8", boxShadow: "0 0 0 3px rgba(48,104,216,.12)" },
44 });
45
46 export default function IdentityVerificationPage() {
47 const [values, setValues] = useState<FormValues>(initialValues);
48 const [submitted, setSubmitted] = useState(false);
49 const [complete, setComplete] = useState(false);
50
51 const updateField = (field: FieldName, value: string) => {
52 setValues((current) => ({ ...current, [field]: value }));
53 };
54
55 const isMissing = (field: FieldName) => submitted && !values[field].trim();
56
57 const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
58 event.preventDefault();
59 setSubmitted(true);
60 if (Object.values(values).every((value) => value.trim().length > 0)) {
61 setComplete(true);
62 }
63 };
64
65 const fieldLabel = (text: string, field: FieldName) => (
66 <label
67 htmlFor={field}
68 className={css({ display: "block", mb: "7px", color: "#26364a", fontSize: "13px", fontWeight: "600" })}
69 >
70 {text} <span className={css({ color: "#c83b45" })}>*</span>
71 </label>
72 );
73
74 const errorMessage = (field: FieldName) =>
75 isMissing(field) ? (
76 <span id={`${field}-error`} className={css({ display: "block", mt: "6px", color: "#b8323b", fontSize: "12px" })}>
77 This field is required.
78 </span>
79 ) : null;
80
81 if (complete) {
82 return (
83 <main className={css({ minH: "100vh", bg: "#f4f7fb", color: "#182536", fontFamily: "Arial, sans-serif" })}>
84 <header className={css({ h: "68px", bg: "white", borderBottom: "1px solid #e7ebf0", display: "flex", alignItems: "center", px: { base: "20px", md: "8vw" } })}>
85 <div className={css({ display: "flex", alignItems: "center", gap: "10px" })}>
86 <span className={css({ width: "30px", height: "30px", display: "grid", placeItems: "center", borderRadius: "9px", bg: "#2459c5", color: "white", fontSize: "15px", fontWeight: "700" })}>v</span>
87 <span className={css({ color: "#182536", fontSize: "17px", fontWeight: "700", letterSpacing: "-.3px" })}>Vektos</span>
88 </div>
89 <span className={css({ ml: "auto", color: "#68778a", fontSize: "13px" })}>Account opening</span>
90 </header>
91 <section className={css({ maxW: "620px", mx: "auto", px: "20px", pt: { base: "64px", md: "100px" } })}>
92 <div className={css({ bg: "white", border: "1px solid #e7ebf0", borderRadius: "16px", p: { base: "28px", md: "48px" }, boxShadow: "0 8px 30px rgba(25,44,73,.05)", textAlign: "center" })}>
93 <div className={css({ width: "58px", height: "58px", mx: "auto", mb: "22px", borderRadius: "50%", bg: "#e9f3ee", color: "#218451", display: "grid", placeItems: "center", fontSize: "27px" })} aria-hidden="true">✓</div>
94 <p className={css({ color: "#3068d8", fontSize: "12px", fontWeight: "700", letterSpacing: ".1em", textTransform: "uppercase", mb: "10px" })}>Identity verification</p>
95 <h1 className={css({ color: "#182536", fontSize: { base: "24px", md: "30px" }, lineHeight: "1.2", letterSpacing: "-.7px", fontWeight: "700", mb: "12px" })}>Your details are being reviewed</h1>
96 <p className={css({ maxW: "420px", mx: "auto", color: "#68778a", fontSize: "15px", lineHeight: "1.7" })}>Thanks, {data.customer.firstName}. We’ve received your information and will let you know when the review is complete.</p>
97 </div>
98 </section>
99 </main>
100 );
101 }
102
103 return (
104 <main className={css({ minH: "100vh", bg: "#f4f7fb", color: "#182536", fontFamily: "Arial, sans-serif" })}>
105 <header className={css({ h: "68px", bg: "white", borderBottom: "1px solid #e7ebf0", display: "flex", alignItems: "center", px: { base: "20px", md: "8vw" } })}>
106 <div className={css({ display: "flex", alignItems: "center", gap: "10px" })}>
107 <span className={css({ width: "30px", height: "30px", display: "grid", placeItems: "center", borderRadius: "9px", bg: "#2459c5", color: "white", fontSize: "15px", fontWeight: "700" })}>v</span>
108 <span className={css({ color: "#182536", fontSize: "17px", fontWeight: "700", letterSpacing: "-.3px" })}>Vektos</span>
109 </div>
110 <span className={css({ ml: "auto", color: "#68778a", fontSize: "13px" })}>Account opening</span>
111 </header>
112
113 <div className={css({ maxW: "1000px", mx: "auto", px: { base: "16px", md: "24px" }, py: { base: "30px", md: "48px" } })}>
114 <div className={css({ display: "flex", alignItems: "center", gap: "12px", mb: "28px" })}>
115 <div className={css({ width: "34px", height: "34px", borderRadius: "50%", bg: "#2459c5", color: "white", display: "grid", placeItems: "center", fontSize: "14px", fontWeight: "700" })}>2</div>
116 <div>
117 <p className={css({ color: "#2459c5", fontSize: "11px", fontWeight: "700", letterSpacing: ".1em", textTransform: "uppercase", mb: "3px" })}>Step 2 of 3</p>
118 <p className={css({ color: "#68778a", fontSize: "13px" })}>Verify your identity</p>
119 </div>
120 <div className={css({ ml: "auto", display: "none", gap: "5px", alignItems: "center", color: "#718093", fontSize: "12px", md: { display: "flex" } })}>
121 <span aria-hidden="true">▣</span> Your information is encrypted and secure
122 </div>
123 </div>
124
125 <div className={css({ display: "grid", gridTemplateColumns: { base: "1fr", md: "minmax(0, 1fr) 270px" }, gap: "24px", alignItems: "start" })}>
126 <section className={css({ bg: "white", border: "1px solid #e5eaf0", borderRadius: "14px", p: { base: "22px", md: "34px" }, boxShadow: "0 8px 30px rgba(25,44,73,.04)" })}>
127 <div className={css({ mb: "27px" })}>
128 <h1 className={css({ color: "#182536", fontSize: { base: "24px", md: "28px" }, lineHeight: "1.2", letterSpacing: "-.6px", fontWeight: "700", mb: "9px" })}>Verify your identity</h1>
129 <p className={css({ color: "#68778a", fontSize: "14px", lineHeight: "1.6" })}>We need a few more details to meet our regulatory requirements.</p>
130 </div>
131
132 <div className={css({ border: "1px solid #e4e9ef", borderRadius: "9px", bg: "#f9fafc", p: "16px", mb: "28px", display: "grid", gridTemplateColumns: { base: "1fr", sm: "1fr 1fr" }, gap: "14px 20px" })}>
133 <div>
134 <p className={css({ mb: "5px", color: "#798698", fontSize: "11px", fontWeight: "700", letterSpacing: ".06em", textTransform: "uppercase" })}>Full name</p>
135 <p className={css({ color: "#26364a", fontSize: "14px", fontWeight: "600" })}>{data.customer.firstName} {data.customer.lastName}</p>
136 </div>
137 <div>
138 <p className={css({ mb: "5px", color: "#798698", fontSize: "11px", fontWeight: "700", letterSpacing: ".06em", textTransform: "uppercase" })}>Email address</p>
139 <p className={css({ color: "#26364a", fontSize: "14px", fontWeight: "600", overflowWrap: "anywhere" })}>{data.customer.email}</p>
140 </div>
141 </div>
142
143 <form onSubmit={handleSubmit} noValidate>
144 <div className={css({ display: "grid", gridTemplateColumns: { base: "1fr", sm: "1fr 1fr" }, gap: "20px 18px" })}>
145 <div>
146 {fieldLabel("Date of birth", "dateOfBirth")}
147 <input id="dateOfBirth" type="date" value={values.dateOfBirth} onChange={(event) => updateField("dateOfBirth", event.target.value)} className={inputStyle(isMissing("dateOfBirth"))} aria-invalid={isMissing("dateOfBirth")} aria-describedby={isMissing("dateOfBirth") ? "dateOfBirth-error" : undefined} />
148 {errorMessage("dateOfBirth")}
149 </div>
150 <div>
151 {fieldLabel("Nationality", "nationality")}
152 <select id="nationality" value={values.nationality} onChange={(event) => updateField("nationality", event.target.value)} className={inputStyle(isMissing("nationality"))} aria-invalid={isMissing("nationality")} aria-describedby={isMissing("nationality") ? "nationality-error" : undefined}>
153 <option value="">Select nationality</option>
154 {data.countries.map((country) => <option key={country.code} value={country.code}>{country.name}</option>)}
155 </select>
156 {errorMessage("nationality")}
157 </div>
158 <div>
159 {fieldLabel("Country of residence", "residence")}
160 <select id="residence" value={values.residence} onChange={(event) => updateField("residence", event.target.value)} className={inputStyle(isMissing("residence"))} aria-invalid={isMissing("residence")} aria-describedby={isMissing("residence") ? "residence-error" : undefined}>
161 <option value="">Select country</option>
162 {data.countries.map((country) => <option key={country.code} value={country.code}>{country.name}</option>)}
163 </select>
164 {errorMessage("residence")}
165 </div>
166 <div>
167 {fieldLabel("Tax identification number", "taxId")}
168 <input id="taxId" type="text" autoComplete="off" placeholder="Enter your tax ID" value={values.taxId} onChange={(event) => updateField("taxId", event.target.value)} className={inputStyle(isMissing("taxId"))} aria-invalid={isMissing("taxId")} aria-describedby={isMissing("taxId") ? "taxId-error" : undefined} />
169 {errorMessage("taxId")}
170 </div>
171 <div>
172 {fieldLabel("Type of identity document", "documentType")}
173 <select id="documentType" value={values.documentType} onChange={(event) => updateField("documentType", event.target.value)} className={inputStyle(isMissing("documentType"))} aria-invalid={isMissing("documentType")} aria-describedby={isMissing("documentType") ? "documentType-error" : undefined}>
174 <option value="">Select document type</option>
175 {data.documentTypes.map((document) => <option key={document.value} value={document.value}>{document.label}</option>)}
176 </select>
177 {errorMessage("documentType")}
178 </div>
179 <div>
180 {fieldLabel("Document number", "documentNumber")}
181 <input id="documentNumber" type="text" autoComplete="off" placeholder="Enter document number" value={values.documentNumber} onChange={(event) => updateField("documentNumber", event.target.value)} className={inputStyle(isMissing("documentNumber"))} aria-invalid={isMissing("documentNumber")} aria-describedby={isMissing("documentNumber") ? "documentNumber-error" : undefined} />
182 {errorMessage("documentNumber")}
183 </div>
184 </div>
185
186 <fieldset className={css({ mt: "24px", p: 0, border: 0 })}>
187 <legend className={css({ mb: "10px", color: "#26364a", fontSize: "13px", fontWeight: "600" })}>Are you a politically exposed person? <span className={css({ color: "#c83b45" })}>*</span></legend>
188 <div className={css({ display: "flex", gap: "12px" })}>
189 {[{ value: "yes", label: "Yes" }, { value: "no", label: "No" }].map((option) => (
190 <label key={option.value} className={css({ minW: "100px", height: "44px", px: "14px", display: "flex", alignItems: "center", gap: "9px", border: values.politicallyExposed === option.value ? "1px solid #3068d8" : "1px solid #d9e0e8", borderRadius: "8px", bg: values.politicallyExposed === option.value ? "#f3f7ff" : "white", color: "#26364a", fontSize: "14px", cursor: "pointer" })}>
191 <input type="radio" name="politicallyExposed" value={option.value} checked={values.politicallyExposed === option.value} onChange={(event) => updateField("politicallyExposed", event.target.value)} className={css({ accentColor: "#2459c5" })} />
192 {option.label}
193 </label>
194 ))}
195 </div>
196 {errorMessage("politicallyExposed")}
197 </fieldset>
198
199 <div className={css({ display: "flex", justifyContent: "flex-end", mt: "30px", pt: "22px", borderTop: "1px solid #edf0f4" })}>
200 <button type="submit" className={css({ minW: "168px", height: "48px", px: "22px", border: 0, borderRadius: "8px", bg: "#2459c5", color: "white", fontSize: "14px", fontWeight: "700", cursor: "pointer", transition: "background 150ms ease", _hover: { bg: "#194aa9" }, _focusVisible: { outline: "3px solid rgba(48,104,216,.28)", outlineOffset: "2px" } })}>
201 Submit for review <span aria-hidden="true">→</span>
202 </button>
203 </div>
204 </form>
205 </section>
206
207 <aside className={css({ display: { base: "none", md: "block" }, pt: "8px" })}>
208 <div className={css({ borderRadius: "12px", bg: "#eaf1fc", p: "22px" })}>
209 <div className={css({ width: "36px", height: "36px", mb: "16px", borderRadius: "10px", bg: "white", color: "#2459c5", display: "grid", placeItems: "center", fontSize: "17px" })} aria-hidden="true">⌑</div>
210 <h2 className={css({ mb: "8px", color: "#1d355c", fontSize: "15px", fontWeight: "700" })}>Why we need this</h2>
211 <p className={css({ color: "#5f718b", fontSize: "13px", lineHeight: "1.7" })}>We’re required to verify your identity and understand our customers. Your details are handled securely and only used for compliance checks.</p>
212 </div>
213 <p className={css({ mt: "16px", px: "4px", color: "#8793a2", fontSize: "12px", lineHeight: "1.6" })}>Have questions? Our support team is here to help.</p>
214 </aside>
215 </div>
216 </div>
217 </main>
218 );
219 }
220
`12px` is a raw length. Use a token.
raw-values/raw-color 34 design-system page.tsx:35:24 · 1px solid #c83b45 `1px solid #c83b45` is a raw color. Use a semantic color token. page.tsx:35:46 · 1px solid #d9e0e8 `1px solid #d9e0e8` is a raw color. Use a semantic color token. page.tsx:37:17 · white `white` is a raw color. Use a semantic color token. page.tsx:38:12 · #182536 `#182536` is a raw color. Use a semantic color token. page.tsx:42:28 · #9aa6b4 `#9aa6b4` is a raw color. Use a semantic color token. page.tsx:43:28 · #3068d8 `#3068d8` is a raw color. Use a semantic color token. page.tsx:43:50 · 0 0 0 3px rgba(48,104,216,.12) `0 0 0 3px rgba(48,104,216,.12)` is a raw color. Use a semantic color token. page.tsx:68:60 · #26364a `#26364a` is a raw color. Use a semantic color token. page.tsx:70:44 · #c83b45 `#c83b45` is a raw color. Use a semantic color token. page.tsx:76:88 · #b8323b `#b8323b` is a raw color. Use a semantic color token. page.tsx:83:49 · #f4f7fb `#f4f7fb` is a raw color. Use a semantic color token. page.tsx:83:67 · #182536 `#182536` is a raw color. Use a semantic color token. page.tsx:84:49 · white `white` is a raw color. Use a semantic color token. page.tsx:84:72 · 1px solid #e7ebf0 `1px solid #e7ebf0` is a raw color. Use a semantic color token. page.tsx:86:131 · #2459c5 `#2459c5` is a raw color. Use a semantic color token. page.tsx:86:149 · white `white` is a raw color. Use a semantic color token. page.tsx:87:43 · #182536 `#182536` is a raw color. Use a semantic color token. page.tsx:89:53 · #68778a `#68778a` is a raw color. Use a semantic color token. page.tsx:92:37 · white `white` is a raw color. Use a semantic color token. page.tsx:92:54 · 1px solid #e7ebf0 `1px solid #e7ebf0` is a raw color. Use a semantic color token. page.tsx:92:141 · 0 8px 30px rgba(25,44,73,.05) `0 8px 30px rgba(25,44,73,.05)` is a raw color. Use a semantic color token. page.tsx:93:115 · #e9f3ee `#e9f3ee` is a raw color. Use a semantic color token. page.tsx:93:133 · #218451 `#218451` is a raw color. Use a semantic color token. page.tsx:94:40 · #3068d8 `#3068d8` is a raw color. Use a semantic color token. page.tsx:95:41 · #182536 `#182536` is a raw color. Use a semantic color token. page.tsx:96:67 · #68778a `#68778a` is a raw color. Use a semantic color token. page.tsx:104:47 · #f4f7fb `#f4f7fb` is a raw color. Use a semantic color token. page.tsx:104:65 · #182536 `#182536` is a raw color. Use a semantic color token. page.tsx:105:47 · white `white` is a raw color. Use a semantic color token. page.tsx:105:70 · 1px solid #e7ebf0 `1px solid #e7ebf0` is a raw color. Use a semantic color token. page.tsx:107:129 · #2459c5 `#2459c5` is a raw color. Use a semantic color token. page.tsx:107:147 · white `white` is a raw color. Use a semantic color token. page.tsx:108:41 · #182536 `#182536` is a raw color. Use a semantic color token. page.tsx:110:51 · #68778a `#68778a` is a raw color. Use a semantic color token. Every run that broke raw-values/raw-color lint/@pandacss(no-physical-properties) 11 quality page.tsx:68:42 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:76:70 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:84:58 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:89:34 Use the logical property "marginInlineStart" instead of the physical "marginLeft". page.tsx:91:74 Use the logical property "paddingBlockStart" instead of the physical "paddingTop". page.tsx:93:78 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:94:139 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:95:154 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:105:56 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:110:32 Use the logical property "marginInlineStart" instead of the physical "marginLeft". page.tsx:114:83 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 · <p class="c_#68778a fs_13px">Verify your identity</p> Elements must meet minimum color contrast ratio thresholds (3 elements, light theme) page.tsx:1:1 · <p class="c_#68778a fs_13px">Verify your identity</p> Elements must meet minimum color contrast ratio thresholds (3 elements, dark theme) Every run that broke a11y/color-contrast lint/unicorn(consistent-function-scoping) 1 quality typecheck/TS2769 0 quality