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 255 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 113 84 $0.0012 1 read_file 165 56 $0.0010 2 write_file 835 9,334 $0.0952 3
Output cap The provider's default 3
4 const money = new Intl.NumberFormat("en-IE", {
5 style: "currency",
6 currency: data.account.currency,
7 minimumFractionDigits: 2,
8 maximumFractionDigits: 2,
9 });
10
11 const statementDate = new Intl.DateTimeFormat("en-GB", {
12 day: "2-digit",
13 month: "short",
14 year: "numeric",
15 timeZone: "UTC",
16 });
17
18 function formatDate(date: string) {
19 return statementDate.format(new Date(`${date}T00:00:00Z`));
20 }
21
22 function formatAmount(amount: number) {
23 if (amount === 0) return money.format(0);
24 return `${amount > 0 ? "+" : "−"}${money.format(Math.abs(amount))}`;
25 }
26
27 function CalendarIcon() {
28 return (
29 <svg
30 aria-hidden="true"
31 width="16"
32 height="16"
33 viewBox="0 0 24 24"
34 fill="none"
35 stroke="currentColor"
36 strokeWidth="1.8"
37 strokeLinecap="round"
38 strokeLinejoin="round"
39 >
40 <rect x="3" y="5" width="18" height="16" rx="3" />
41 <path d="M16 3v4M8 3v4M3 10h18" />
42 </svg>
43 );
44 }
45
46 function StatementIcon() {
47 return (
48 <svg
49 aria-hidden="true"
50 width="23"
51 height="23"
52 viewBox="0 0 24 24"
53 fill="none"
54 stroke="currentColor"
55 strokeWidth="1.7"
56 strokeLinecap="round"
57 strokeLinejoin="round"
58 >
59 <path d="M7 3h7l4 4v14H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z" />
60 <path d="M14 3v5h5M9 13h5M9 17h5" />
61 </svg>
62 );
63 }
64
65 function InfoIcon() {
66 return (
67 <svg
68 aria-hidden="true"
69 width="17"
70 height="17"
71 viewBox="0 0 24 24"
72 fill="none"
73 stroke="currentColor"
74 strokeWidth="1.8"
75 strokeLinecap="round"
76 strokeLinejoin="round"
77 className={css({ flexShrink: 0, marginTop: "1px" })}
78 >
79 <circle cx="12" cy="12" r="9" />
80 <path d="M12 11v5M12 8h.01" />
81 </svg>
82 );
83 }
84
85 export default function OctoberStatementPage() {
86 const pendingCount = data.transactions.filter(
87 (transaction) => transaction.status === "pending",
88 ).length;
89
90 return (
91 <div
92 className={css({
93 minHeight: "100vh",
94 backgroundColor: "#f4f6f3",
95 color: "#17211e",
96 fontFamily:
97 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
98 paddingBottom: "40px",
99 })}
100 >
101 <header
102 className={css({
103 maxWidth: "1120px",
104 margin: "0 auto",
105 padding: { base: "22px 20px 0", md: "28px 32px 0" },
106 display: "flex",
107 alignItems: "center",
108 justifyContent: "space-between",
109 gap: "16px",
110 })}
111 >
112 <div className={css({ display: "flex", alignItems: "center", gap: "12px" })}>
113 <div
114 className={css({
115 width: "42px",
116 height: "42px",
117 borderRadius: "12px",
118 display: "grid",
119 placeItems: "center",
120 backgroundColor: "#163c34",
121 color: "#d7f4df",
122 boxShadow: "0 3px 10px rgba(22, 60, 52, 0.14)",
123 })}
124 >
125 <StatementIcon />
126 </div>
127 <div>
128 <p
129 className={css({
130 margin: 0,
131 fontSize: "10px",
132 lineHeight: "1.2",
133 fontWeight: "700",
134 letterSpacing: "0.14em",
135 textTransform: "uppercase",
136 color: "#75807b",
137 })}
138 >
139 Personal banking
140 </p>
141 <p
142 className={css({
143 margin: "4px 0 0",
144 fontSize: "15px",
145 lineHeight: "1.2",
146 fontWeight: "650",
147 color: "#26332f",
148 })}
149 >
150 Account statements
151 </p>
152 </div>
153 </div>
154 <div
155 className={css({
156 display: { base: "none", sm: "flex" },
157 alignItems: "center",
158 gap: "8px",
159 border: "1px solid #dfe5df",
160 borderRadius: "999px",
161 backgroundColor: "#ffffff",
162 color: "#52605b",
163 padding: "8px 13px",
164 fontSize: "12px",
165 fontWeight: "600",
166 })}
167 >
168 <CalendarIcon />
169 October 2026
170 </div>
171 </header>
172
173 <main
174 className={css({
175 maxWidth: "1120px",
176 margin: "0 auto",
177 padding: { base: "36px 20px 0", md: "48px 32px 0" },
178 })}
179 >
180 <section aria-labelledby="statement-title">
181 <p
182 className={css({
183 margin: "0 0 9px",
184 color: "#3c6b5d",
185 fontSize: "12px",
186 fontWeight: "700",
187 letterSpacing: "0.1em",
188 textTransform: "uppercase",
189 })}
190 >
191 Current account
192 </p>
193 <div
194 className={css({
195 display: "flex",
196 flexDirection: { base: "column", sm: "row" },
197 alignItems: { base: "flex-start", sm: "flex-end" },
198 justifyContent: "space-between",
199 gap: "12px",
200 })}
201 >
202 <h1
203 id="statement-title"
204 className={css({
205 margin: 0,
206 fontSize: { base: "32px", md: "40px" },
207 lineHeight: "1.12",
208 letterSpacing: "-0.035em",
209 fontWeight: "700",
210 color: "#152a24",
211 })}
212 >
213 October statement
214 </h1>
215 <p
216 className={css({
217 margin: { base: 0, sm: "0 0 5px" },
218 color: "#6b7772",
219 fontSize: "13px",
220 })}
221 >
222 1–31 October 2026
223 </p>
224 </div>
225
226 <div
227 className={css({
228 position: "relative",
229 overflow: "hidden",
230 marginTop: "26px",
231 borderRadius: "20px",
232 background: "linear-gradient(120deg, #173f36 0%, #1d4a3f 62%, #245448 100%)",
233 color: "#ffffff",
234 boxShadow: "0 12px 30px rgba(23, 63, 54, 0.13)",
235 })}
236 >
237 <div
238 aria-hidden="true"
239 className={css({
240 position: "absolute",
241 width: "280px",
242 height: "280px",
243 border: "1px solid rgba(255, 255, 255, 0.07)",
244 borderRadius: "50%",
245 right: "-90px",
246 top: "-160px",
247 pointerEvents: "none",
248 })}
249 />
250 <div
251 className={css({
252 position: "relative",
253 display: "grid",
254 gridTemplateColumns: { base: "1fr", md: "minmax(0, 1.45fr) minmax(280px, 0.8fr)" },
255 })}
256 >
257 <div className={css({ padding: { base: "25px", md: "30px 32px" } })}>
258 <div className={css({ display: "flex", alignItems: "center", gap: "14px" })}>
259 <div
260 aria-hidden="true"
261 className={css({
262 width: "46px",
263 height: "46px",
264 flexShrink: 0,
265 display: "grid",
266 placeItems: "center",
267 borderRadius: "50%",
268 backgroundColor: "#d8f1dd",
269 color: "#1c4a3e",
270 fontSize: "14px",
271 fontWeight: "750",
272 letterSpacing: "0.02em",
273 })}
274 >
275 GR
276 </div>
277 <div>
278 <p
279 className={css({
280 margin: 0,
281 color: "#a9c8bd",
282 fontSize: "10px",
283 fontWeight: "700",
284 letterSpacing: "0.12em",
285 textTransform: "uppercase",
286 })}
287 >
288 Account holder
289 </p>
290 <p
291 className={css({
292 margin: "4px 0 0",
293 color: "#ffffff",
294 fontSize: "19px",
295 lineHeight: "1.25",
296 fontWeight: "650",
297 })}
298 >
299 {data.account.holder}
300 </p>
301 </div>
302 </div>
303 <div className={css({ marginTop: "25px" })}>
304 <p
305 className={css({
306 margin: 0,
307 color: "#a9c8bd",
308 fontSize: "10px",
309 fontWeight: "700",
310 letterSpacing: "0.12em",
311 textTransform: "uppercase",
312 })}
313 >
314 IBAN
315 </p>
316 <p
317 className={css({
318 margin: "7px 0 0",
319 color: "#eef8f2",
320 fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
321 fontSize: { base: "12px", sm: "13px" },
322 lineHeight: "1.6",
323 letterSpacing: "0.035em",
324 overflowWrap: "anywhere",
325 })}
326 >
327 {data.account.iban}
328 </p>
329 </div>
330 </div>
331
332 <div
333 className={css({
334 display: "flex",
335 flexDirection: "column",
336 justifyContent: "center",
337 padding: { base: "24px 25px 27px", md: "30px 32px" },
338 borderTop: { base: "1px solid rgba(255,255,255,0.12)", md: "0" },
339 borderLeft: { base: "0", md: "1px solid rgba(255,255,255,0.12)" },
340 backgroundColor: "rgba(0, 0, 0, 0.045)",
341 })}
342 >
343 <div className={css({ display: "flex", alignItems: "center", gap: "9px" })}>
344 <p
345 className={css({
346 margin: 0,
347 color: "#b4cec4",
348 fontSize: "11px",
349 fontWeight: "650",
350 letterSpacing: "0.08em",
351 textTransform: "uppercase",
352 })}
353 >
354 Current balance
355 </p>
356 <span
357 className={css({
358 border: "1px solid rgba(216, 241, 221, 0.24)",
359 borderRadius: "5px",
360 padding: "2px 5px",
361 color: "#cfe5da",
362 fontSize: "9px",
363 fontWeight: "700",
364 letterSpacing: "0.08em",
365 })}
366 >
367 {data.account.currency}
368 </span>
369 </div>
370 <p
371 className={css({
372 margin: "9px 0 0",
373 color: "#ffffff",
374 fontSize: { base: "34px", md: "38px" },
375 lineHeight: "1.15",
376 fontWeight: "650",
377 letterSpacing: "-0.035em",
378 fontVariantNumeric: "tabular-nums",
379 whiteSpace: "nowrap",
380 })}
381 >
382 {money.format(data.account.balance)}
383 </p>
384 </div>
385 </div>
386 </div>
387 </section>
388
389 <section
390 aria-labelledby="transactions-title"
391 className={css({
392 marginTop: "34px",
393 backgroundColor: "#ffffff",
394 border: "1px solid #e1e6e1",
395 borderRadius: "18px",
396 overflow: "hidden",
397 boxShadow: "0 3px 12px rgba(25, 43, 36, 0.035)",
398 })}
399 >
400 <div
401 className={css({
402 display: "flex",
403 flexDirection: { base: "column", sm: "row" },
404 alignItems: { base: "flex-start", sm: "center" },
405 justifyContent: "space-between",
406 gap: "12px",
407 padding: { base: "22px 20px", md: "24px 28px" },
408 borderBottom: "1px solid #e8ece8",
409 })}
410 >
411 <div>
412 <div className={css({ display: "flex", alignItems: "center", gap: "10px" })}>
413 <h2
414 id="transactions-title"
415 className={css({
416 margin: 0,
417 color: "#1b2b25",
418 fontSize: "20px",
419 lineHeight: "1.25",
420 fontWeight: "700",
421 letterSpacing: "-0.02em",
422 })}
423 >
424 Transactions
425 </h2>
426 <span
427 className={css({
428 borderRadius: "999px",
429 backgroundColor: "#eef2ee",
430 color: "#66736d",
431 padding: "3px 8px",
432 fontSize: "11px",
433 lineHeight: "1.2",
434 fontWeight: "650",
435 })}
436 >
437 {data.transactions.length}
438 </span>
439 </div>
440 <p className={css({ margin: "6px 0 0", color: "#78837e", fontSize: "12px" })}>
441 All activity for this statement period
442 </p>
443 </div>
444 <div
445 className={css({
446 display: "flex",
447 alignItems: "center",
448 gap: "7px",
449 color: "#8a5a16",
450 backgroundColor: "#fff7e7",
451 border: "1px solid #f2e3c3",
452 borderRadius: "999px",
453 padding: "7px 11px",
454 fontSize: "11px",
455 fontWeight: "650",
456 })}
457 >
458 <span
459 aria-hidden="true"
460 className={css({
461 width: "6px",
462 height: "6px",
463 borderRadius: "50%",
464 backgroundColor: "#d5972f",
465 })}
466 />
467 {pendingCount} pending
468 </div>
469 </div>
470
471 <div className={css({ display: { base: "none", md: "block" } })}>
472 <table
473 className={css({
474 width: "100%",
475 borderCollapse: "collapse",
476 tableLayout: "fixed",
477 })}
478 >
479 <caption className={css({ srOnly: true })}>
480 Transactions from 1 to 31 October 2026. Amounts in {data.account.currency}.
481 </caption>
482 <thead>
483 <tr className={css({ backgroundColor: "#fafbfa" })}>
484 <th
485 scope="col"
486 className={css({
487 width: "150px",
488 padding: "13px 20px 13px 28px",
489 textAlign: "left",
490 color: "#7c8782",
491 fontSize: "10px",
492 fontWeight: "700",
493 letterSpacing: "0.09em",
494 textTransform: "uppercase",
495 borderBottom: "1px solid #e8ece8",
496 })}
497 >
498 Date
499 </th>
500 <th
501 scope="col"
502 className={css({
503 padding: "13px 16px",
504 textAlign: "left",
505 color: "#7c8782",
506 fontSize: "10px",
507 fontWeight: "700",
508 letterSpacing: "0.09em",
509 textTransform: "uppercase",
510 borderBottom: "1px solid #e8ece8",
511 })}
512 >
513 Description
514 </th>
515 <th
516 scope="col"
517 className={css({
518 width: "150px",
519 padding: "13px 16px",
520 textAlign: "left",
521 color: "#7c8782",
522 fontSize: "10px",
523 fontWeight: "700",
524 letterSpacing: "0.09em",
525 textTransform: "uppercase",
526 borderBottom: "1px solid #e8ece8",
527 })}
528 >
529 Category
530 </th>
531 <th
532 scope="col"
533 className={css({
534 width: "160px",
535 padding: "13px 28px 13px 16px",
536 textAlign: "right",
537 color: "#7c8782",
538 fontSize: "10px",
539 fontWeight: "700",
540 letterSpacing: "0.09em",
541 textTransform: "uppercase",
542 borderBottom: "1px solid #e8ece8",
543 })}
544 >
545 Amount ({data.account.currency})
546 </th>
547 </tr>
548 </thead>
549 <tbody>
550 {data.transactions.map((transaction) => {
551 const isPending = transaction.status === "pending";
552 const isIncome = transaction.amount > 0;
553 return (
554 <tr
555 key={transaction.id}
556 className={css({
557 backgroundColor: isPending ? "#fffdf8" : "#ffffff",
558 transition: "background-color 150ms ease",
559 _hover: { backgroundColor: isPending ? "#fff9ed" : "#fafcfa" },
560 })}
561 >
562 <td
563 className={css({
564 padding: "18px 20px 18px 28px",
565 borderBottom: "1px solid #edf0ed",
566 color: "#5f6c66",
567 fontSize: "12px",
568 whiteSpace: "nowrap",
569 verticalAlign: "middle",
570 })}
571 >
572 <time dateTime={transaction.date}>{formatDate(transaction.date)}</time>
573 </td>
574 <td
575 className={css({
576 padding: "18px 16px",
577 borderBottom: "1px solid #edf0ed",
578 verticalAlign: "middle",
579 })}
580 >
581 <div
582 className={css({
583 display: "flex",
584 alignItems: "center",
585 flexWrap: "wrap",
586 gap: "7px 10px",
587 })}
588 >
589 <span
590 className={css({
591 color: "#26332e",
592 fontSize: "13px",
593 lineHeight: "1.45",
594 fontWeight: "600",
595 })}
596 >
597 {transaction.description}
598 </span>
599 {isPending && (
600 <span
601 className={css({
602 display: "inline-flex",
603 alignItems: "center",
604 gap: "5px",
605 flexShrink: 0,
606 border: "1px solid #efdfba",
607 borderRadius: "999px",
608 backgroundColor: "#fff5df",
609 color: "#946015",
610 padding: "3px 7px",
611 fontSize: "9px",
612 lineHeight: "1.1",
613 fontWeight: "750",
614 letterSpacing: "0.035em",
615 textTransform: "uppercase",
616 })}
617 >
618 <span
619 aria-hidden="true"
620 className={css({
621 width: "5px",
622 height: "5px",
623 borderRadius: "50%",
624 backgroundColor: "#d49a32",
625 })}
626 />
627 Pending
628 </span>
629 )}
630 </div>
631 </td>
632 <td
633 className={css({
634 padding: "18px 16px",
635 borderBottom: "1px solid #edf0ed",
636 verticalAlign: "middle",
637 })}
638 >
639 <span
640 className={css({
641 display: "inline-block",
642 borderRadius: "6px",
643 backgroundColor: "#f1f4f1",
644 color: "#5d6a64",
645 padding: "5px 8px",
646 fontSize: "11px",
647 lineHeight: "1.2",
648 fontWeight: "550",
649 })}
650 >
651 {transaction.category}
652 </span>
653 </td>
654 <td
655 className={css({
656 padding: "18px 28px 18px 16px",
657 borderBottom: "1px solid #edf0ed",
658 textAlign: "right",
659 verticalAlign: "middle",
660 whiteSpace: "nowrap",
661 fontVariantNumeric: "tabular-nums",
662 color: isIncome ? "#17734f" : "#26332e",
663 fontSize: "13px",
664 fontWeight: "650",
665 })}
666 >
667 {formatAmount(transaction.amount)}
668 </td>
669 </tr>
670 );
671 })}
672 </tbody>
673 </table>
674 </div>
675
676 <div className={css({ display: { base: "block", md: "none" } })}>
677 {data.transactions.map((transaction) => {
678 const isPending = transaction.status === "pending";
679 const isIncome = transaction.amount > 0;
680 return (
681 <article
682 key={transaction.id}
683 aria-label={`${transaction.description}, ${formatAmount(transaction.amount)}${isPending ? ", pending" : ""}`}
684 className={css({
685 padding: "19px 20px",
686 borderBottom: "1px solid #e9ede9",
687 backgroundColor: isPending ? "#fffdf8" : "#ffffff",
688 })}
689 >
690 <div
691 className={css({
692 display: "flex",
693 alignItems: "center",
694 justifyContent: "space-between",
695 gap: "14px",
696 })}
697 >
698 <time
699 dateTime={transaction.date}
700 className={css({ color: "#7a8580", fontSize: "11px", whiteSpace: "nowrap" })}
701 >
702 {formatDate(transaction.date)}
703 </time>
704 <span
705 className={css({
706 color: isIncome ? "#17734f" : "#26332e",
707 fontSize: "14px",
708 fontWeight: "700",
709 fontVariantNumeric: "tabular-nums",
710 whiteSpace: "nowrap",
711 })}
712 >
713 {formatAmount(transaction.amount)}
714 </span>
715 </div>
716 <p
717 className={css({
718 margin: "9px 0 11px",
719 color: "#26332e",
720 fontSize: "13px",
721 lineHeight: "1.45",
722 fontWeight: "600",
723 })}
724 >
725 {transaction.description}
726 </p>
727 <div
728 className={css({
729 display: "flex",
730 alignItems: "center",
731 justifyContent: "space-between",
732 flexWrap: "wrap",
733 gap: "8px",
734 })}
735 >
736 <span
737 className={css({
738 borderRadius: "6px",
739 backgroundColor: "#f1f4f1",
740 color: "#5d6a64",
741 padding: "4px 7px",
742 fontSize: "10px",
743 fontWeight: "550",
744 })}
745 >
746 {transaction.category}
747 </span>
748 {isPending && (
749 <span
750 className={css({
751 display: "inline-flex",
752 alignItems: "center",
753 gap: "5px",
754 color: "#946015",
755 fontSize: "10px",
756 fontWeight: "700",
757 textTransform: "uppercase",
758 letterSpacing: "0.035em",
759 })}
760 >
761 <span
762 aria-hidden="true"
763 className={css({
764 width: "6px",
765 height: "6px",
766 borderRadius: "50%",
767 backgroundColor: "#d49a32",
768 })}
769 />
770 Pending
771 </span>
772 )}
773 </div>
774 </article>
775 );
776 })}
777 </div>
778
779 <div
780 className={css({
781 display: "flex",
782 alignItems: "flex-start",
783 gap: "9px",
784 padding: { base: "16px 20px", md: "17px 28px" },
785 backgroundColor: "#fbfcfb",
786 color: "#707c76",
787 fontSize: "11px",
788 lineHeight: "1.5",
789 })}
790 >
791 <InfoIcon />
792 <p className={css({ margin: 0 })}>
793 <span className={css({ color: "#5d6963", fontWeight: "650" })}>Pending transactions</span>{" "}
794 are not final yet and their amounts or dates may change.
795 </p>
796 </div>
797 </section>
798
799 <footer
800 className={css({
801 display: "flex",
802 flexDirection: { base: "column", sm: "row" },
803 alignItems: { base: "flex-start", sm: "center" },
804 justifyContent: "space-between",
805 gap: "7px",
806 padding: "20px 2px 0",
807 color: "#89938e",
808 fontSize: "10px",
809 lineHeight: "1.5",
810 })}
811 >
812 <p className={css({ margin: 0 })}>October 2026 · End of statement</p>
813 <p className={css({ margin: 0 })}>All amounts shown in {data.account.currency}</p>
814 </footer>
815 </main>
816 </div>
817 );
818 }
819
page.tsx:337:36 · 24px 25px 27px `24px 25px 27px` is a raw length. Use a token. raw-values/raw-color 28 design-system page.tsx:94:26 · #f4f6f3 `#f4f6f3` is a raw color. Use a semantic color token. page.tsx:95:16 · #17211e `#17211e` is a raw color. Use a semantic color token. page.tsx:120:32 · #163c34 `#163c34` is a raw color. Use a semantic color token. page.tsx:121:22 · #d7f4df `#d7f4df` is a raw color. Use a semantic color token. page.tsx:122:26 · 0 3px 10px rgba(22, 60, 52, 0.14) `0 3px 10px rgba(22, 60, 52, 0.14)` is a raw color. Use a semantic color token. page.tsx:136:24 · #75807b `#75807b` is a raw color. Use a semantic color token. page.tsx:147:24 · #26332f `#26332f` is a raw color. Use a semantic color token. page.tsx:159:21 · 1px solid #dfe5df `1px solid #dfe5df` is a raw color. Use a semantic color token. page.tsx:161:30 · #ffffff `#ffffff` is a raw color. Use a semantic color token. page.tsx:162:20 · #52605b `#52605b` is a raw color. Use a semantic color token. page.tsx:184:22 · #3c6b5d `#3c6b5d` is a raw color. Use a semantic color token. page.tsx:210:24 · #152a24 `#152a24` is a raw color. Use a semantic color token. page.tsx:218:24 · #6b7772 `#6b7772` is a raw color. Use a semantic color token. page.tsx:232:27 · linear-gradient(120deg, #173f36 0%, #1d4a3f 62%, #245448 100%) `linear-gradient(120deg, #173f36 0%, #1d4a3f 62%, #245448 100%)` is a raw color. Use a semantic color token. page.tsx:233:22 · #ffffff `#ffffff` is a raw color. Use a semantic color token. page.tsx:234:26 · 0 12px 30px rgba(23, 63, 54, 0.13) `0 12px 30px rgba(23, 63, 54, 0.13)` is a raw color. Use a semantic color token. page.tsx:243:25 · 1px solid rgba(255, 255, 255, 0.07) `1px solid rgba(255, 255, 255, 0.07)` is a raw color. Use a semantic color token. page.tsx:268:40 · #d8f1dd `#d8f1dd` is a raw color. Use a semantic color token. page.tsx:269:30 · #1c4a3e `#1c4a3e` is a raw color. Use a semantic color token. page.tsx:281:32 · #a9c8bd `#a9c8bd` is a raw color. Use a semantic color token. page.tsx:293:32 · #ffffff `#ffffff` is a raw color. Use a semantic color token. page.tsx:307:30 · #a9c8bd `#a9c8bd` is a raw color. Use a semantic color token. page.tsx:319:30 · #eef8f2 `#eef8f2` is a raw color. Use a semantic color token. page.tsx:338:38 · 1px solid rgba(255,255,255,0.12) `1px solid rgba(255,255,255,0.12)` is a raw color. Use a semantic color token. page.tsx:339:48 · 1px solid rgba(255,255,255,0.12) `1px solid rgba(255,255,255,0.12)` is a raw color. Use a semantic color token. page.tsx:340:36 · rgba(0, 0, 0, 0.045) `rgba(0, 0, 0, 0.045)` is a raw color. Use a semantic color token. page.tsx:347:30 · #b4cec4 `#b4cec4` is a raw color. Use a semantic color token. page.tsx:358:31 · 1px solid rgba(216, 241, 221, 0.24) `1px solid rgba(216, 241, 221, 0.24)` is a raw color. Use a semantic color token. Every run that broke raw-values/raw-color a11y/color-contrast 2 quality page.tsx:1:1 · <p class="m_0 fs_10px lh_1.2 fw_700 ls_0.14em tt_uppercase c_#75807b">Personal banking</p> Elements must meet minimum color contrast ratio thresholds (17 elements, light theme) page.tsx:1:1 · <p class="m_0 fs_10px lh_1.2 fw_700 ls_0.14em tt_uppercase c_#75807b">Personal banking</p> Elements must meet minimum color contrast ratio thresholds (17 elements, dark theme) Every run that broke a11y/color-contrast typecheck/TS2769 1 quality