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 321 counted, under 10 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 669 67 $0.0020 1 read_file 128 57 $0.0010 2 write_file 339 14,387 $0.1447 3
Output cap The provider's default 3 import { type FormEvent, useState } 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 countryOfResidence: string;
11 taxId: string;
12 documentType: string;
13 documentNumber: string;
14 politicallyExposed: string;
15 };
16
17 type FormErrors = Partial<Record<keyof FormValues, string>>;
18
19 const initialValues: FormValues = {
20 dateOfBirth: "",
21 nationality: "",
22 countryOfResidence: "",
23 taxId: "",
24 documentType: "",
25 documentNumber: "",
26 politicallyExposed: "",
27 };
28
29 const fieldOrder: Array<keyof FormValues> = [
30 "dateOfBirth",
31 "nationality",
32 "countryOfResidence",
33 "taxId",
34 "documentType",
35 "documentNumber",
36 "politicallyExposed",
37 ];
38
39 const errorMessages: Record<keyof FormValues, string> = {
40 dateOfBirth: "Enter your date of birth.",
41 nationality: "Select your nationality.",
42 countryOfResidence: "Select your country of residence.",
43 taxId: "Enter your tax identification number.",
44 documentType: "Select your identity document type.",
45 documentNumber: "Enter your document number.",
46 politicallyExposed: "Select yes or no.",
47 };
48
49 const fieldIds: Record<keyof FormValues, string> = {
50 dateOfBirth: "date-of-birth",
51 nationality: "nationality",
52 countryOfResidence: "country-of-residence",
53 taxId: "tax-id",
54 documentType: "document-type",
55 documentNumber: "document-number",
56 politicallyExposed: "pep-yes",
57 };
58
59 export default function IdentityVerificationPage() {
60 const [values, setValues] = useState<FormValues>(initialValues);
61 const [errors, setErrors] = useState<FormErrors>({});
62 const [submitted, setSubmitted] = useState(false);
63
64 const fullName = `${data.customer.firstName} ${data.customer.lastName}`;
65
66 function updateValue(field: keyof FormValues, value: string) {
67 setValues((current) => ({ ...current, [field]: value }));
68 setErrors((current) => {
69 if (!current[field]) return current;
70 const next = { ...current };
71 delete next[field];
72 return next;
73 });
74 }
75
76 function handleSubmit(event: FormEvent<HTMLFormElement>) {
77 event.preventDefault();
78
79 const nextErrors: FormErrors = {};
80 for (const field of fieldOrder) {
81 if (!values[field].trim()) {
82 nextErrors[field] = errorMessages[field];
83 }
84 }
85
86 setErrors(nextErrors);
87
88 const firstInvalidField = fieldOrder.find((field) => nextErrors[field]);
89 if (firstInvalidField) {
90 document.getElementById(fieldIds[firstInvalidField])?.focus();
91 return;
92 }
93
94 setSubmitted(true);
95 }
96
97 return (
98 <main className={page}>
99 <header className={topBar}>
100 <div className={brand} aria-label="Northbank">
101 <span className={brandMark} aria-hidden="true">
102 <svg viewBox="0 0 32 32" fill="none">
103 <path d="M8 22V10l8 7 8-7v12" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
104 </svg>
105 </span>
106 <span>Northbank</span>
107 </div>
108 <div className={secureLabel}>
109 <ShieldIcon />
110 <span>Secure application</span>
111 </div>
112 </header>
113
114 <div className={content}>
115 <nav className={progressNav} aria-label="Account opening progress">
116 <ol className={progressList}>
117 {["About you", "Identity verification", "Review & finish"].map((label, index) => {
118 const state = index === 0 ? "completed" : index === 1 ? "current" : "upcoming";
119 return (
120 <li
121 className={progressItem}
122 key={label}
123 aria-current={state === "current" ? "step" : undefined}
124 >
125 <span className={progressCircle} data-state={state}>
126 {state === "completed" ? <SmallCheckIcon /> : index + 1}
127 </span>
128 <span className={progressLabel} data-state={state}>{label}</span>
129 {index < 2 && (
130 <span
131 className={progressLine}
132 data-completed={index === 0 ? "true" : "false"}
133 aria-hidden="true"
134 />
135 )}
136 </li>
137 );
138 })}
139 </ol>
140 </nav>
141
142 {submitted ? (
143 <section className={successCard} role="status" aria-live="polite">
144 <div className={successIcon} aria-hidden="true">
145 <LargeCheckIcon />
146 </div>
147 <p className={eyebrow}>DETAILS SUBMITTED</p>
148 <h1 className={successTitle}>Your details are being reviewed</h1>
149 <p className={successCopy}>
150 Thank you, {data.customer.firstName}. We've received your identity information
151 and will review it as part of your account application.
152 </p>
153 <div className={successNotice}>
154 <span className={noticeIcon} aria-hidden="true"><ShieldIcon /></span>
155 <div>
156 <h2>What happens next?</h2>
157 <p>
158 We'll check the details you provided and contact you at{" "}
159 <strong>{data.customer.email}</strong> once the review is complete. There's
160 nothing else you need to do right now.
161 </p>
162 </div>
163 </div>
164 </section>
165 ) : (
166 <section className={formCard}>
167 <div className={formHeader}>
168 <p className={eyebrow}>STEP 2 OF 3</p>
169 <h1>Identity verification</h1>
170 <p>
171 Tell us a little more about yourself and provide your identity document details.
172 All fields are required.
173 </p>
174 </div>
175
176 <form onSubmit={handleSubmit} noValidate>
177 <section className={formSection} aria-labelledby="personal-details-heading">
178 <div className={sectionHeadingRow}>
179 <h2 id="personal-details-heading">Personal details</h2>
180 <span className={providedBadge}>Already provided</span>
181 </div>
182 <p className={sectionDescription}>
183 These details are from your application and can't be edited here.
184 </p>
185 <div className={readOnlyGrid}>
186 <div className={fieldGroup}>
187 <label className={fieldLabel} htmlFor="full-name">Full name</label>
188 <div className={readOnlyControlWrap}>
189 <input
190 id="full-name"
191 className={readOnlyControl}
192 value={fullName}
193 readOnly
194 aria-readonly="true"
195 />
196 <span className={readOnlyLock} aria-hidden="true"><LockIcon /></span>
197 </div>
198 </div>
199 <div className={fieldGroup}>
200 <label className={fieldLabel} htmlFor="email">Email address</label>
201 <div className={readOnlyControlWrap}>
202 <input
203 id="email"
204 className={readOnlyControl}
205 type="email"
206 value={data.customer.email}
207 readOnly
208 aria-readonly="true"
209 />
210 <span className={readOnlyLock} aria-hidden="true"><LockIcon /></span>
211 </div>
212 </div>
213 </div>
214 </section>
215
216 <div className={divider} />
217
218 <section className={formSection} aria-labelledby="identity-information-heading">
219 <h2 id="identity-information-heading">Identity information</h2>
220 <p className={sectionDescription}>
221 Enter your details exactly as they appear on your official documents.
222 </p>
223
224 <div className={fieldsGrid}>
225 <div className={fieldGroup}>
226 <label className={fieldLabel} htmlFor="date-of-birth">
227 Date of birth <RequiredMarker />
228 </label>
229 <input
230 id="date-of-birth"
231 name="dateOfBirth"
232 type="date"
233 className={control}
234 value={values.dateOfBirth}
235 onChange={(event) => updateValue("dateOfBirth", event.target.value)}
236 required
237 autoComplete="bday"
238 aria-invalid={Boolean(errors.dateOfBirth)}
239 aria-describedby={errors.dateOfBirth ? "date-of-birth-error" : undefined}
240 />
241 <FieldError id="date-of-birth-error" message={errors.dateOfBirth} />
242 </div>
243
244 <div className={fieldGroup}>
245 <label className={fieldLabel} htmlFor="nationality">
246 Nationality <RequiredMarker />
247 </label>
248 <div className={selectWrap}>
249 <select
250 id="nationality"
251 name="nationality"
252 className={selectControl}
253 value={values.nationality}
254 onChange={(event) => updateValue("nationality", event.target.value)}
255 required
256 aria-invalid={Boolean(errors.nationality)}
257 aria-describedby={errors.nationality ? "nationality-error" : undefined}
258 >
259 <option value="" disabled>Select your nationality</option>
260 {data.countries.map((country) => (
261 <option value={country.code} key={country.code}>{country.name}</option>
262 ))}
263 </select>
264 <span className={selectChevron} aria-hidden="true"><ChevronIcon /></span>
265 </div>
266 <FieldError id="nationality-error" message={errors.nationality} />
267 </div>
268
269 <div className={fieldGroup}>
270 <label className={fieldLabel} htmlFor="country-of-residence">
271 Country of residence <RequiredMarker />
272 </label>
273 <div className={selectWrap}>
274 <select
275 id="country-of-residence"
276 name="countryOfResidence"
277 className={selectControl}
278 value={values.countryOfResidence}
279 onChange={(event) => updateValue("countryOfResidence", event.target.value)}
280 required
281 autoComplete="country-name"
282 aria-invalid={Boolean(errors.countryOfResidence)}
283 aria-describedby={errors.countryOfResidence ? "country-of-residence-error" : undefined}
284 >
285 <option value="" disabled>Select your country of residence</option>
286 {data.countries.map((country) => (
287 <option value={country.code} key={country.code}>{country.name}</option>
288 ))}
289 </select>
290 <span className={selectChevron} aria-hidden="true"><ChevronIcon /></span>
291 </div>
292 <FieldError id="country-of-residence-error" message={errors.countryOfResidence} />
293 </div>
294
295 <div className={fieldGroup}>
296 <label className={fieldLabel} htmlFor="tax-id">
297 Tax identification number <RequiredMarker />
298 </label>
299 <input
300 id="tax-id"
301 name="taxId"
302 type="text"
303 className={control}
304 value={values.taxId}
305 onChange={(event) => updateValue("taxId", event.target.value)}
306 required
307 autoComplete="off"
308 placeholder="Enter your tax ID"
309 aria-invalid={Boolean(errors.taxId)}
310 aria-describedby={errors.taxId ? "tax-id-error" : "tax-id-help"}
311 />
312 <FieldError id="tax-id-error" message={errors.taxId} />
313 {!errors.taxId && <p className={helpText} id="tax-id-help">Issued by your country’s tax authority.</p>}
314 </div>
315
316 <div className={fieldGroup}>
317 <label className={fieldLabel} htmlFor="document-type">
318 Type of identity document <RequiredMarker />
319 </label>
320 <div className={selectWrap}>
321 <select
322 id="document-type"
323 name="documentType"
324 className={selectControl}
325 value={values.documentType}
326 onChange={(event) => updateValue("documentType", event.target.value)}
327 required
328 aria-invalid={Boolean(errors.documentType)}
329 aria-describedby={errors.documentType ? "document-type-error" : undefined}
330 >
331 <option value="" disabled>Select a document type</option>
332 {data.documentTypes.map((documentType) => (
333 <option value={documentType.value} key={documentType.value}>
334 {documentType.label}
335 </option>
336 ))}
337 </select>
338 <span className={selectChevron} aria-hidden="true"><ChevronIcon /></span>
339 </div>
340 <FieldError id="document-type-error" message={errors.documentType} />
341 </div>
342
343 <div className={fieldGroup}>
344 <label className={fieldLabel} htmlFor="document-number">
345 Document number <RequiredMarker />
346 </label>
347 <input
348 id="document-number"
349 name="documentNumber"
350 type="text"
351 className={control}
352 value={values.documentNumber}
353 onChange={(event) => updateValue("documentNumber", event.target.value)}
354 required
355 autoComplete="off"
356 placeholder="e.g. AB1234567"
357 aria-invalid={Boolean(errors.documentNumber)}
358 aria-describedby={errors.documentNumber ? "document-number-error" : undefined}
359 />
360 <FieldError id="document-number-error" message={errors.documentNumber} />
361 </div>
362
363 <fieldset
364 className={pepFieldset}
365 aria-invalid={Boolean(errors.politicallyExposed)}
366 aria-describedby={errors.politicallyExposed ? "pep-help pep-error" : "pep-help"}
367 >
368 <legend className={fieldLabel}>
369 Are you a politically exposed person? <RequiredMarker />
370 </legend>
371 <p className={helpText} id="pep-help">
372 This means you hold, or have held, a prominent public position, or are
373 closely associated with someone who does.
374 </p>
375 <div className={radioGrid}>
376 <label className={radioOption}>
377 <input
378 id="pep-yes"
379 type="radio"
380 name="politicallyExposed"
381 value="yes"
382 checked={values.politicallyExposed === "yes"}
383 onChange={(event) => updateValue("politicallyExposed", event.target.value)}
384 required
385 />
386 <span>Yes</span>
387 </label>
388 <label className={radioOption}>
389 <input
390 id="pep-no"
391 type="radio"
392 name="politicallyExposed"
393 value="no"
394 checked={values.politicallyExposed === "no"}
395 onChange={(event) => updateValue("politicallyExposed", event.target.value)}
396 required
397 />
398 <span>No</span>
399 </label>
400 </div>
401 <FieldError id="pep-error" message={errors.politicallyExposed} />
402 </fieldset>
403 </div>
404 </section>
405
406 <div className={formFooter}>
407 <p className={footerSecurity}>
408 <LockIcon />
409 Your information is encrypted and secure.
410 </p>
411 <button className={submitButton} type="submit">
412 Submit for review
413 <ArrowIcon />
414 </button>
415 </div>
416 </form>
417 </section>
418 )}
419
420 <p className={pageFooter}>Protected with bank-level encryption</p>
421 </div>
422 </main>
423 );
424 }
425
426 function RequiredMarker() {
427 return <span className={requiredMarker} aria-hidden="true">*</span>;
428 }
429
430 function FieldError({ id, message }: { id: string; message?: string }) {
431 if (!message) return null;
432 return (
433 <p className={errorText} id={id} role="alert">
434 <AlertIcon />
435 <span>{message}</span>
436 </p>
437 );
438 }
439
440 function ShieldIcon() {
441 return (
442 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
443 <path d="M12 3 5 6v5c0 4.6 2.9 8.1 7 10 4.1-1.9 7-5.4 7-10V6l-7-3Z" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round" />
444 <path d="m9 12 2 2 4-4" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
445 </svg>
446 );
447 }
448
449 function LockIcon() {
450 return (
451 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
452 <rect x="5" y="10" width="14" height="10" rx="2.5" stroke="currentColor" strokeWidth="1.8" />
453 <path d="M8 10V7a4 4 0 0 1 8 0v3" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
454 </svg>
455 );
456 }
457
458 function ChevronIcon() {
459 return (
460 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
461 <path d="m7 9.5 5 5 5-5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
462 </svg>
463 );
464 }
465
466 function AlertIcon() {
467 return (
468 <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true">
469 <circle cx="10" cy="10" r="8" stroke="currentColor" strokeWidth="1.5" />
470 <path d="M10 5.8v4.8M10 14.2v.1" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" />
471 </svg>
472 );
473 }
474
475 function SmallCheckIcon() {
476 return (
477 <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true">
478 <path d="m5.5 10 3 3 6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
479 </svg>
480 );
481 }
482
483 function LargeCheckIcon() {
484 return (
485 <svg width="34" height="34" viewBox="0 0 32 32" fill="none" aria-hidden="true">
486 <path d="m8 16.5 5.2 5L24 10.5" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
487 </svg>
488 );
489 }
490
491 function ArrowIcon() {
492 return (
493 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
494 <path d="M5 12h14m-5-5 5 5-5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
495 </svg>
496 );
497 }
498
499 const page = css({
500 minHeight: "100dvh",
501 width: "100%",
502 boxSizing: "border-box",
503 color: "#17251f",
504 background: "radial-gradient(circle at 8% 0%, rgba(196, 222, 207, 0.34), transparent 30%), #f5f7f5",
505 fontFamily: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
506 WebkitFontSmoothing: "antialiased",
507 "& *, & *::before, & *::after": { boxSizing: "border-box" },
508 });
509
510 const topBar = css({
511 width: "100%",
512 maxWidth: "1060px",
513 margin: "0 auto",
514 padding: { base: "22px 20px", md: "28px 32px" },
515 display: "flex",
516 alignItems: "center",
517 justifyContent: "space-between",
518 });
519
520 const brand = css({
521 display: "flex",
522 alignItems: "center",
523 gap: "10px",
524 fontSize: "19px",
525 lineHeight: 1,
526 fontWeight: 700,
527 letterSpacing: "-0.02em",
528 color: "#153f34",
529 });
530
531 const brandMark = css({
532 width: "34px",
533 height: "34px",
534 display: "grid",
535 placeItems: "center",
536 borderRadius: "10px",
537 background: "#174c3d",
538 color: "#ffffff",
539 boxShadow: "0 3px 8px rgba(23, 76, 61, 0.16)",
540 "& svg": { width: "26px", height: "26px" },
541 });
542
543 const secureLabel = css({
544 display: "flex",
545 alignItems: "center",
546 gap: "7px",
547 color: "#53665e",
548 fontSize: "13px",
549 fontWeight: 500,
550 });
551
552 const content = css({
553 width: "100%",
554 maxWidth: "820px",
555 margin: "0 auto",
556 padding: { base: "20px 16px 28px", sm: "28px 24px 40px", md: "34px 24px 48px" },
557 });
558
559 const progressNav = css({
560 width: "100%",
561 maxWidth: "610px",
562 margin: { base: "0 auto 30px", md: "0 auto 38px" },
563 });
564
565 const progressList = css({
566 display: "flex",
567 width: "100%",
568 listStyle: "none",
569 padding: 0,
570 margin: 0,
571 });
572
573 const progressItem = css({
574 position: "relative",
575 flex: 1,
576 minWidth: 0,
577 display: "flex",
578 flexDirection: "column",
579 alignItems: "center",
580 gap: "9px",
581 });
582
583 const progressCircle = css({
584 position: "relative",
585 zIndex: 1,
586 width: "32px",
587 height: "32px",
588 display: "grid",
589 placeItems: "center",
590 borderRadius: "50%",
591 border: "1.5px solid #cbd4cf",
592 background: "#f5f7f5",
593 color: "#85928c",
594 fontSize: "12px",
595 fontWeight: 700,
596 '&[data-state="completed"]': {
597 background: "#dfece5",
598 borderColor: "#87aa99",
599 color: "#1c604a",
600 },
601 '&[data-state="current"]': {
602 background: "#174c3d",
603 borderColor: "#174c3d",
604 color: "#ffffff",
605 boxShadow: "0 0 0 4px #e1ebe6",
606 },
607 });
608
609 const progressLabel = css({
610 maxWidth: "150px",
611 color: "#8a958f",
612 fontSize: { base: "11px", sm: "12px" },
613 lineHeight: 1.35,
614 textAlign: "center",
615 fontWeight: 500,
616 '&[data-state="current"]': { color: "#174c3d", fontWeight: 650 },
617 '&[data-state="completed"]': { color: "#53665e" },
618 });
619
620 const progressLine = css({
621 position: "absolute",
622 top: "15px",
623 left: "calc(50% + 24px)",
624 width: "calc(100% - 48px)",
625 height: "2px",
626 background: "#dce2de",
627 '&[data-completed="true"]': { background: "#9fbdad" },
628 });
629
630 const formCard = css({
631 overflow: "hidden",
632 borderRadius: { base: "18px", md: "22px" },
633 border: "1px solid #e0e6e2",
634 background: "#ffffff",
635 boxShadow: "0 18px 50px rgba(28, 54, 43, 0.07), 0 2px 6px rgba(28, 54, 43, 0.03)",
636 });
637
638 const formHeader = css({
639 padding: { base: "30px 22px 26px", sm: "36px 36px 28px", md: "40px 44px 30px" },
640 borderBottom: "1px solid #edf0ee",
641 "& h1": {
642 margin: "8px 0 12px",
643 color: "#142f26",
644 fontSize: { base: "28px", sm: "32px" },
645 lineHeight: 1.18,
646 letterSpacing: "-0.035em",
647 fontWeight: 700,
648 },
649 "& > p:last-child": {
650 maxWidth: "580px",
651 margin: 0,
652 color: "#64736c",
653 fontSize: "15px",
654 lineHeight: 1.65,
655 },
656 });
657
658 const eyebrow = css({
659 margin: 0,
660 color: "#37705d",
661 fontSize: "11px",
662 lineHeight: 1.4,
663 fontWeight: 750,
664 letterSpacing: "0.13em",
665 });
666
667 const formSection = css({
668 padding: { base: "26px 22px 28px", sm: "30px 36px 32px", md: "32px 44px 36px" },
669 "& h2": {
670 margin: 0,
671 color: "#203a30",
672 fontSize: "17px",
673 lineHeight: 1.4,
674 letterSpacing: "-0.01em",
675 fontWeight: 650,
676 },
677 });
678
679 const sectionHeadingRow = css({
680 display: "flex",
681 alignItems: "center",
682 justifyContent: "space-between",
683 flexWrap: "wrap",
684 gap: "10px",
685 });
686
687 const providedBadge = css({
688 display: "inline-flex",
689 alignItems: "center",
690 minHeight: "25px",
691 padding: "3px 9px",
692 borderRadius: "999px",
693 background: "#edf4f0",
694 color: "#4a6a5c",
695 fontSize: "11px",
696 fontWeight: 600,
697 });
698
699 const sectionDescription = css({
700 margin: "7px 0 20px",
701 color: "#748079",
702 fontSize: "13px",
703 lineHeight: 1.55,
704 });
705
706 const readOnlyGrid = css({
707 display: "grid",
708 gridTemplateColumns: { base: "1fr", sm: "repeat(2, minmax(0, 1fr))" },
709 gap: "18px",
710 padding: { base: "16px", sm: "18px" },
711 border: "1px solid #e4ebe7",
712 borderRadius: "13px",
713 background: "#f7f9f7",
714 });
715
716 const divider = css({ height: "1px", margin: "0", background: "#edf0ee" });
717
718 const fieldsGrid = css({
719 display: "grid",
720 gridTemplateColumns: { base: "1fr", sm: "repeat(2, minmax(0, 1fr))" },
721 columnGap: "20px",
722 rowGap: "22px",
723 });
724
725 const fieldGroup = css({ minWidth: 0 });
726
727 const fieldLabel = css({
728 display: "block",
729 margin: "0 0 8px",
730 padding: 0,
731 color: "#354a41",
732 fontSize: "13px",
733 lineHeight: 1.45,
734 fontWeight: 600,
735 });
736
737 const requiredMarker = css({ marginLeft: "2px", color: "#a3463b" });
738
739 const control = css({
740 display: "block",
741 width: "100%",
742 minWidth: 0,
743 height: "48px",
744 padding: "0 13px",
745 border: "1px solid #cfd8d2",
746 borderRadius: "10px",
747 outline: "none",
748 background: "#ffffff",
749 color: "#1f352c",
750 fontFamily: "inherit",
751 fontSize: "14px",
752 lineHeight: "46px",
753 transition: "border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease",
754 _placeholder: { color: "#9aa59f", opacity: 1 },
755 _hover: { borderColor: "#aebcb4" },
756 _focus: {
757 borderColor: "#34745e",
758 boxShadow: "0 0 0 3px rgba(52, 116, 94, 0.13)",
759 },
760 '&[aria-invalid="true"]': {
761 borderColor: "#b54a40",
762 background: "#fffdfd",
763 },
764 '&[aria-invalid="true"]:focus': {
765 borderColor: "#b54a40",
766 boxShadow: "0 0 0 3px rgba(181, 74, 64, 0.12)",
767 },
768 });
769
770 const selectWrap = css({ position: "relative", width: "100%" });
771
772 const selectControl = css({
773 display: "block",
774 width: "100%",
775 minWidth: 0,
776 height: "48px",
777 padding: "0 40px 0 13px",
778 border: "1px solid #cfd8d2",
779 borderRadius: "10px",
780 outline: "none",
781 appearance: "none",
782 background: "#ffffff",
783 color: "#1f352c",
784 fontFamily: "inherit",
785 fontSize: "14px",
786 lineHeight: "46px",
787 cursor: "pointer",
788 transition: "border-color 150ms ease, box-shadow 150ms ease",
789 _hover: { borderColor: "#aebcb4" },
790 _focus: {
791 borderColor: "#34745e",
792 boxShadow: "0 0 0 3px rgba(52, 116, 94, 0.13)",
793 },
794 '&[aria-invalid="true"]': { borderColor: "#b54a40", background: "#fffdfd" },
795 '&[aria-invalid="true"]:focus': {
796 borderColor: "#b54a40",
797 boxShadow: "0 0 0 3px rgba(181, 74, 64, 0.12)",
798 },
799 });
800
801 const selectChevron = css({
802 position: "absolute",
803 top: "50%",
804 right: "13px",
805 transform: "translateY(-50%)",
806 display: "grid",
807 placeItems: "center",
808 color: "#697a72",
809 pointerEvents: "none",
810 });
811
812 const readOnlyControlWrap = css({ position: "relative" });
813
814 const readOnlyControl = css({
815 display: "block",
816 width: "100%",
817 minWidth: 0,
818 height: "45px",
819 padding: "0 38px 0 12px",
820 border: "1px solid #e0e6e2",
821 borderRadius: "9px",
822 outline: "none",
823 background: "#eef2ef",
824 color: "#52655c",
825 fontFamily: "inherit",
826 fontSize: "13px",
827 textOverflow: "ellipsis",
828 cursor: "not-allowed",
829 });
830
831 const readOnlyLock = css({
832 position: "absolute",
833 top: "50%",
834 right: "12px",
835 transform: "translateY(-50%)",
836 display: "grid",
837 placeItems: "center",
838 color: "#84938b",
839 pointerEvents: "none",
840 });
841
842 const helpText = css({
843 margin: "7px 0 0",
844 color: "#7a8780",
845 fontSize: "12px",
846 lineHeight: 1.55,
847 });
848
849 const errorText = css({
850 display: "flex",
851 alignItems: "flex-start",
852 gap: "6px",
853 margin: "7px 0 0",
854 color: "#a83e35",
855 fontSize: "12px",
856 lineHeight: 1.45,
857 fontWeight: 500,
858 "& svg": { flexShrink: 0, marginTop: "1px" },
859 });
860
861 const pepFieldset = css({
862 gridColumn: "1 / -1",
863 minWidth: 0,
864 margin: "2px 0 0",
865 padding: "18px",
866 border: "1px solid #e1e7e3",
867 borderRadius: "12px",
868 background: "#fbfcfb",
869 "& legend": { padding: "0 4px", marginLeft: "-4px" },
870 '&[aria-invalid="true"]': { borderColor: "#d8a39e", background: "#fffdfd" },
871 });
872
873 const radioGrid = css({
874 display: "grid",
875 gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
876 gap: "10px",
877 maxWidth: "360px",
878 marginTop: "13px",
879 });
880
881 const radioOption = css({
882 display: "flex",
883 alignItems: "center",
884 gap: "10px",
885 minHeight: "44px",
886 padding: "10px 13px",
887 border: "1px solid #d4ddd7",
888 borderRadius: "9px",
889 background: "#ffffff",
890 color: "#354a41",
891 fontSize: "14px",
892 fontWeight: 550,
893 cursor: "pointer",
894 transition: "border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease",
895 "& input": {
896 width: "17px",
897 height: "17px",
898 margin: 0,
899 accentColor: "#245f4c",
900 cursor: "pointer",
901 },
902 "&:hover": { borderColor: "#9eafa5" },
903 "&:has(input:checked)": {
904 borderColor: "#568572",
905 background: "#f1f7f3",
906 boxShadow: "inset 0 0 0 1px rgba(57, 111, 89, 0.08)",
907 },
908 "&:has(input:focus-visible)": {
909 borderColor: "#34745e",
910 boxShadow: "0 0 0 3px rgba(52, 116, 94, 0.13)",
911 },
912 });
913
914 const formFooter = css({
915 display: "flex",
916 flexDirection: { base: "column-reverse", sm: "row" },
917 alignItems: { base: "stretch", sm: "center" },
918 justifyContent: "space-between",
919 gap: "18px",
920 padding: { base: "22px", sm: "24px 36px", md: "25px 44px" },
921 borderTop: "1px solid #e8eeea",
922 background: "#fafcfa",
923 });
924
925 const footerSecurity = css({
926 display: "flex",
927 alignItems: "center",
928 justifyContent: { base: "center", sm: "flex-start" },
929 gap: "6px",
930 margin: 0,
931 color: "#718078",
932 fontSize: "11px",
933 lineHeight: 1.5,
934 });
935
936 const submitButton = css({
937 display: "inline-flex",
938 alignItems: "center",
939 justifyContent: "center",
940 gap: "10px",
941 minHeight: "48px",
942 padding: "0 22px",
943 border: "1px solid #174c3d",
944 borderRadius: "10px",
945 background: "#174c3d",
946 color: "#ffffff",
947 fontFamily: "inherit",
948 fontSize: "14px",
949 fontWeight: 650,
950 whiteSpace: "nowrap",
951 cursor: "pointer",
952 boxShadow: "0 3px 7px rgba(23, 76, 61, 0.15)",
953 transition: "background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease",
954 _hover: { background: "#103d30", boxShadow: "0 5px 12px rgba(23, 76, 61, 0.2)" },
955 _active: { transform: "translateY(1px)" },
956 _focusVisible: { outline: "3px solid rgba(52, 116, 94, 0.25)", outlineOffset: "3px" },
957 });
958
959 const successCard = css({
960 padding: { base: "44px 24px 30px", sm: "54px 48px 40px", md: "60px 60px 44px" },
961 border: "1px solid #e0e6e2",
962 borderRadius: { base: "18px", md: "22px" },
963 background: "#ffffff",
964 textAlign: "center",
965 boxShadow: "0 18px 50px rgba(28, 54, 43, 0.07), 0 2px 6px rgba(28, 54, 43, 0.03)",
966 });
967
968 const successIcon = css({
969 width: "72px",
970 height: "72px",
971 margin: "0 auto 24px",
972 display: "grid",
973 placeItems: "center",
974 border: "1px solid #b8d2c3",
975 borderRadius: "50%",
976 background: "#e9f3ed",
977 color: "#25654e",
978 boxShadow: "0 0 0 8px #f4f8f5",
979 });
980
981 const successTitle = css({
982 margin: "10px 0 15px",
983 color: "#142f26",
984 fontSize: { base: "28px", sm: "34px" },
985 lineHeight: 1.2,
986 letterSpacing: "-0.035em",
987 fontWeight: 700,
988 });
989
990 const successCopy = css({
991 maxWidth: "520px",
992 margin: "0 auto",
993 color: "#64736c",
994 fontSize: "15px",
995 lineHeight: 1.7,
996 });
997
998 const successNotice = css({
999 display: "flex",
1000 alignItems: "flex-start",
1001 gap: "14px",
1002 maxWidth: "570px",
1003 margin: "32px auto 0",
1004 padding: { base: "18px", sm: "22px" },
1005 border: "1px solid #deebe3",
1006 borderRadius: "13px",
1007 background: "#f5f9f6",
1008 textAlign: "left",
1009 "& h2": { margin: "1px 0 6px", color: "#29493b", fontSize: "14px", fontWeight: 650 },
1010 "& p": { margin: 0, color: "#65766d", fontSize: "13px", lineHeight: 1.65 },
1011 "& strong": { color: "#425c4f", fontWeight: 600, overflowWrap: "anywhere" },
1012 });
1013
1014 const noticeIcon = css({
1015 flexShrink: 0,
1016 width: "34px",
1017 height: "34px",
1018 display: "grid",
1019 placeItems: "center",
1020 borderRadius: "9px",
1021 background: "#e2eee7",
1022 color: "#3f715b",
1023 });
1024
1025 const pageFooter = css({
1026 margin: "23px 0 0",
1027 color: "#8a958f",
1028 fontSize: "11px",
1029 textAlign: "center",
1030 letterSpacing: "0.01em",
1031 });
1032
page.tsx:556:20 · 20px 16px 28px `20px 16px 28px` is a raw length. Use a token. page.tsx:556:42 · 28px 24px 40px `28px 24px 40px` is a raw length. Use a token. page.tsx:556:64 · 34px 24px 48px `34px 24px 48px` is a raw length. Use a token. page.tsx:623:9 · calc(50% + 24px) `calc(50% + 24px)` is a raw length. Use a token. page.tsx:624:10 · calc(100% - 48px) `calc(100% - 48px)` is a raw length. Use a token. page.tsx:639:20 · 30px 22px 26px `30px 22px 26px` is a raw length. Use a token. page.tsx:639:42 · 36px 36px 28px `36px 36px 28px` is a raw length. Use a token. page.tsx:639:64 · 40px 44px 30px `40px 44px 30px` is a raw length. Use a token. page.tsx:668:20 · 26px 22px 28px `26px 22px 28px` is a raw length. Use a token. page.tsx:668:42 · 30px 36px 32px `30px 36px 32px` is a raw length. Use a token. raw-values/raw-color 29 design-system page.tsx:503:10 · #17251f `#17251f` is a raw color. Use a semantic color token. page.tsx:504:15 · radial-gradient(circle at 8% 0%, rgba(196, 222, 207, 0.34), transparent 30%), #f5f7f5 `radial-gradient(circle at 8% 0%, rgba(196, 222, 207, 0.34), transparent 30%), #f5f7f5` is a raw color. Use a semantic color token. page.tsx:528:10 · #153f34 `#153f34` is a raw color. Use a semantic color token. page.tsx:537:15 · #174c3d `#174c3d` is a raw color. Use a semantic color token. page.tsx:538:10 · #ffffff `#ffffff` is a raw color. Use a semantic color token. page.tsx:539:14 · 0 3px 8px rgba(23, 76, 61, 0.16) `0 3px 8px rgba(23, 76, 61, 0.16)` is a raw color. Use a semantic color token. page.tsx:547:10 · #53665e `#53665e` is a raw color. Use a semantic color token. page.tsx:591:11 · 1.5px solid #cbd4cf `1.5px solid #cbd4cf` is a raw color. Use a semantic color token. page.tsx:592:15 · #f5f7f5 `#f5f7f5` is a raw color. Use a semantic color token. page.tsx:593:10 · #85928c `#85928c` is a raw color. Use a semantic color token. page.tsx:597:17 · #dfece5 `#dfece5` is a raw color. Use a semantic color token. page.tsx:598:18 · #87aa99 `#87aa99` is a raw color. Use a semantic color token. page.tsx:599:12 · #1c604a `#1c604a` is a raw color. Use a semantic color token. page.tsx:602:17 · #174c3d `#174c3d` is a raw color. Use a semantic color token. page.tsx:603:18 · #174c3d `#174c3d` is a raw color. Use a semantic color token. page.tsx:604:12 · #ffffff `#ffffff` is a raw color. Use a semantic color token. page.tsx:605:16 · 0 0 0 4px #e1ebe6 `0 0 0 4px #e1ebe6` is a raw color. Use a semantic color token. page.tsx:611:10 · #8a958f `#8a958f` is a raw color. Use a semantic color token. page.tsx:616:39 · #174c3d `#174c3d` is a raw color. Use a semantic color token. page.tsx:617:41 · #53665e `#53665e` is a raw color. Use a semantic color token. page.tsx:626:15 · #dce2de `#dce2de` is a raw color. Use a semantic color token. page.tsx:627:45 · #9fbdad `#9fbdad` is a raw color. Use a semantic color token. page.tsx:633:11 · 1px solid #e0e6e2 `1px solid #e0e6e2` is a raw color. Use a semantic color token. page.tsx:634:15 · #ffffff `#ffffff` is a raw color. Use a semantic color token. page.tsx:635:14 · 0 18px 50px rgba(28, 54, 43, 0.07), 0 2px 6px rgba(28, 54, 43, 0.03) `0 18px 50px rgba(28, 54, 43, 0.07), 0 2px 6px rgba(28, 54, 43, 0.03)` is a raw color. Use a semantic color token. page.tsx:640:17 · 1px solid #edf0ee `1px solid #edf0ee` is a raw color. Use a semantic color token. page.tsx:643:12 · #142f26 `#142f26` is a raw color. Use a semantic color token. page.tsx:652:12 · #64736c `#64736c` is a raw color. Use a semantic color token. page.tsx:660:10 · #37705d `#37705d` is a raw color. Use a semantic color token. Every run that broke raw-values/raw-color components/native-element 11 design-system page.tsx:189:23 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:202:23 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:229:21 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:249:23 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:274:23 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:299:21 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:321:23 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:347:21 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:377:25 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:389:25 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:411:17 · <button> `<button>` has a design-system equivalent: use `Button` from `@vektos/ds`. Every run that broke components/native-element typecheck/TS2375 7 quality page.tsx:241:22 Type '{ id: string; message: string | undefined; }' is not assignable to type '{ id: string; message?: string; }' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties. page.tsx:266:22 Type '{ id: string; message: string | undefined; }' is not assignable to type '{ id: string; message?: string; }' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties. page.tsx:292:22 Type '{ id: string; message: string | undefined; }' is not assignable to type '{ id: string; message?: string; }' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties. page.tsx:312:22 Type '{ id: string; message: string | undefined; }' is not assignable to type '{ id: string; message?: string; }' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties. page.tsx:340:22 Type '{ id: string; message: string | undefined; }' is not assignable to type '{ id: string; message?: string; }' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties. page.tsx:360:22 Type '{ id: string; message: string | undefined; }' is not assignable to type '{ id: string; message?: string; }' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties. page.tsx:401:22 Type '{ id: string; message: string | undefined; }' is not assignable to type '{ id: string; message?: string; }' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties. Every run that broke typecheck/TS2375 typecheck/TS2769 3 quality a11y/color-contrast 2 quality page.tsx:1:1 · <p class="m_7px_0_20px c_#748079 fs_13px lh_1.55">These details are from your application and can't be edited here.</p> Elements must meet minimum color contrast ratio thresholds (5 elements, dark theme) page.tsx:1:1 · <p class="m_7px_0_20px c_#748079 fs_13px lh_1.55">These details are from your application and can't be edited here.</p> Elements must meet minimum color contrast ratio thresholds (5 elements, light theme) Every run that broke a11y/color-contrast lint/jsx-a11y(prefer-tag-over-role) 1 quality