Token Guard
Accessible design tokens

Generate the palette.
Guarantee the contrast.

Describe a product and get accessible light & dark tokens — proposed by a model, verified against WCAG, and repaired where it missed.

Vision
Live design system
18 tokens · applied in real time
Buttons · states
Tabs
PreviewCodeA11y
⌘Kcommand menu
Input · focus
oklch
Enforce WCAG AA
Menu
Duplicate palette
Export tokens
Delete
Alerts
Verified
19/19 rules pass
Review
mid-tone primary
Note
repaired via L only
Table
Contrast engineAA · AAAMC
Mid-tone primaryreviewJD
Token exportDTCGRK
Badges
PassedCautionFailedInfoBrand
Dialog
Apply palette?

Overwrites current tokens.

Product
Vibe
Harmony
Presets
IrisanalogousIn harmonySample

A confident violet identity on clean, faintly-warm neutrals — calm enough for long sessions, distinct enough to feel like a brand.

01

Light & dark tokens

18 semantic tokens · OKLCH coordinates
lightoklch
Luminance map18 tokens
0.00.51.0 · L
Surfacesback → front
Textstrong → muted
Brandrest → press → on
Signalsemantic states
Structurelines & focus
darkoklch
Luminance map18 tokens
0.00.51.0 · L
Surfacesback → front
Textstrong → muted
Brandrest → press → on
Signalsemantic states
Structurelines & focus
02

Accessibility audit

19 WCAG 2.1 contrast rules
Guaranteed accessible
19 contrast rules · WCAG 2.1 AA
19/19
meet required
15/19
also AAA
+0.02
tightest margin
Text on surfacesreadability8 checks
text/bg
17.80
AAAAA
text/surface
16.78
AAAAA
text/surfaceElevated
15.31
AAAAA
text/selection
11.03
AAAAA
textSecondary/bg
7.80
AAAAA
textSecondary/surface
7.36
AAAAA
textSecondary/surfaceElevated
6.71
AAAAA
textDisabled/surface
3.02
AAAAA
Text on brandon-color legibility3 checks
onPrimary/primary
6.94
AAAAA
onPrimary/primaryHover
8.77
AAAAA
onPrimary/primaryActive
10.91
AAAAA
Signal on surfacestatus colors4 checks
danger/surface
6.33
AAAAA
warning/surface
10.25
AAAAA
success/surface
8.42
AAAAA
info/surface
7.94
AAAAA
UI & focusnon-text4 checks
border/surface
3.02
AAAAA
borderStrong/surface
3.02
AAAAA
focusRing/surface
7.09
AAAAA
focusRing/bg
7.52
AAAAA
03

Repair trace

luminance-only correction
Proposal
model
Verify
WCAG
Repair
L-axis only
Verified
guaranteed
H·C locked

The model chose the hue and chroma. Where a color missed a contrast rule, the engine slides it along the luminance axis — 3 tokens repaired, nothing regenerated. Each marker travels from fail into the shaded feasible band.

proposalrepairedfeasible band
textDisabledtextDisabled → surface ≥ 3.0
✕
AI proposal
L 0.484
2.843.02
✓
Repaired
L 0.498
0.00.51.0
H286°C0.010ΔL+0.014
borderborder → surface ≥ 3.0
✕
AI proposal
L 0.319
1.433.02
✓
Repaired
L 0.498
0.00.51.0
H286°C0.016ΔL+0.179
borderStrongborderStrong → surface ≥ 3.0
✕
AI proposal
L 0.459
2.553.02
✓
Repaired
L 0.498
0.00.51.0
H286°C0.016ΔL+0.040
04

Export

CSS · JSON · Tailwind · DTCG
65 lines
tokens.csslight + dark
1:root {
2 --color-bg: #fbfbfe;
3 --color-surface: #ffffff;
4 --color-surface-elevated: #fafafe;
5 --color-text: #1c1c26;
6 --color-text-secondary: #686873;
7 --color-text-disabled: #94949a;
8 --color-primary: #654bd4;
9 --color-primary-hover: #5637bf;
10 --color-primary-active: #4720ab;
11 --color-on-primary: #fbfbfe;
12 --color-danger: #cc272e;
13 --color-warning: #b16300;
14 --color-success: #008948;
15 --color-info: #2877d2;
16 --color-border: #949494;
17 --color-border-strong: #949494;
18 --color-focus-ring: #6e4fe9;
19 --color-selection: #dadaff;
20}
21
22[data-theme="dark"] {
23 --color-bg: #0d0c13;
24 --color-surface: #14141c;
25 --color-surface-elevated: #1d1d26;
26 --color-text: #f5f5f9;
27 --color-text-secondary: #a3a3b1;
28 --color-text-disabled: #626268;
29 --color-primary: #978cff;
30 --color-primary-hover: #aaa4ff;
31 --color-primary-active: #bebcff;
32 --color-on-primary: #0d0d11;
33 --color-danger: #fa6863;
34 --color-warning: #ffb24f;
35 --color-success: #55c483;
36 --color-info: #6dadff;
37 --color-border: #62626c;
38 --color-border-strong: #62626c;
39 --color-focus-ring: #9e94ff;
40 --color-selection: #35305f;
41}
42
43@media (prefers-color-scheme: dark) {
44 :root:not([data-theme="light"]) {
45 --color-bg: #0d0c13;
46 --color-surface: #14141c;
47 --color-surface-elevated: #1d1d26;
48 --color-text: #f5f5f9;
49 --color-text-secondary: #a3a3b1;
50 --color-text-disabled: #626268;
51 --color-primary: #978cff;
52 --color-primary-hover: #aaa4ff;
53 --color-primary-active: #bebcff;
54 --color-on-primary: #0d0d11;
55 --color-danger: #fa6863;
56 --color-warning: #ffb24f;
57 --color-success: #55c483;
58 --color-info: #6dadff;
59 --color-border: #62626c;
60 --color-border-strong: #62626c;
61 --color-focus-ring: #9e94ff;
62 --color-selection: #35305f;
63 }
64}
65