Design system
THEME & ACCESSIBILITY REVIEW
Every shipped component rendered in the light and dark state side by side, plus a live WCAG contrast audit generated from the tokens in styles.css.
Contrast audit
All token pairs meet WCAG AA (4.5:1 text, 3:1 non-text) in both states.
light state
| Pair | Type | Ratio | Result |
|---|---|---|---|
| body text on page | text | 17.30:1 | PASS (min 4.5:1) |
| body text on card | text | 15.80:1 | PASS (min 4.5:1) |
| muted text on page | text | 7.82:1 | PASS (min 4.5:1) |
| muted text on card | text | 7.15:1 | PASS (min 4.5:1) |
| neon headline on page | text | 7.42:1 | PASS (min 4.5:1) |
| neon headline on card | text | 6.78:1 | PASS (min 4.5:1) |
| gold kicker on page | text | 9.81:1 | PASS (min 4.5:1) |
| gold kicker on card | text | 8.96:1 | PASS (min 4.5:1) |
| primary button label | text | 9.51:1 | PASS (min 4.5:1) |
| secondary button label | text | 13.45:1 | PASS (min 4.5:1) |
| accent button label | text | 4.94:1 | PASS (min 4.5:1) |
| destructive button label | text | 5.58:1 | PASS (min 4.5:1) |
| popover text | text | 15.80:1 | PASS (min 4.5:1) |
| sidebar text | text | 16.46:1 | PASS (min 4.5:1) |
| sidebar active label | text | 9.51:1 | PASS (min 4.5:1) |
| focus ring on page | non-text | 9.81:1 | PASS (min 3:1) |
| focus ring on card | non-text | 8.96:1 | PASS (min 3:1) |
| input border on page | non-text | 3.91:1 | PASS (min 3:1) |
| card edge on page | non-text | 3.91:1 | PASS (min 3:1) |
| primary button hover label (bg-primary/90) | state | 7.83:1 | PASS (min 4.5:1) |
| secondary button hover label (bg-secondary/80) | state | 14.32:1 | PASS (min 4.5:1) |
| ghost / outline hover label (bg-accent) | state | 4.94:1 | PASS (min 4.5:1) |
| destructive hover label (bg-destructive/90) | state | 6.41:1 | PASS (min 4.5:1) |
| disabled control label (muted on muted) | state | 6.27:1 | PASS (min 4.5:1) |
| selected nav item label (data-status=active) | state | 9.51:1 | PASS (min 4.5:1) |
| selected list row label (secondary surface) | state | 13.45:1 | PASS (min 4.5:1) |
| input placeholder text | state | 7.82:1 | PASS (min 4.5:1) |
| link default (gold on page) | state | 9.81:1 | PASS (min 4.5:1) |
| link active (neon on page) | state | 7.42:1 | PASS (min 4.5:1) |
dark state
| Pair | Type | Ratio | Result |
|---|---|---|---|
| body text on page | text | 17.30:1 | PASS (min 4.5:1) |
| body text on card | text | 15.80:1 | PASS (min 4.5:1) |
| muted text on page | text | 7.82:1 | PASS (min 4.5:1) |
| muted text on card | text | 7.15:1 | PASS (min 4.5:1) |
| neon headline on page | text | 7.42:1 | PASS (min 4.5:1) |
| neon headline on card | text | 6.78:1 | PASS (min 4.5:1) |
| gold kicker on page | text | 9.81:1 | PASS (min 4.5:1) |
| gold kicker on card | text | 8.96:1 | PASS (min 4.5:1) |
| primary button label | text | 9.51:1 | PASS (min 4.5:1) |
| secondary button label | text | 13.45:1 | PASS (min 4.5:1) |
| accent button label | text | 4.94:1 | PASS (min 4.5:1) |
| destructive button label | text | 5.58:1 | PASS (min 4.5:1) |
| popover text | text | 15.80:1 | PASS (min 4.5:1) |
| sidebar text | text | 16.46:1 | PASS (min 4.5:1) |
| sidebar active label | text | 9.51:1 | PASS (min 4.5:1) |
| focus ring on page | non-text | 9.81:1 | PASS (min 3:1) |
| focus ring on card | non-text | 8.96:1 | PASS (min 3:1) |
| input border on page | non-text | 3.91:1 | PASS (min 3:1) |
| card edge on page | non-text | 3.91:1 | PASS (min 3:1) |
| primary button hover label (bg-primary/90) | state | 7.83:1 | PASS (min 4.5:1) |
| secondary button hover label (bg-secondary/80) | state | 14.32:1 | PASS (min 4.5:1) |
| ghost / outline hover label (bg-accent) | state | 4.94:1 | PASS (min 4.5:1) |
| destructive hover label (bg-destructive/90) | state | 6.41:1 | PASS (min 4.5:1) |
| disabled control label (muted on muted) | state | 6.27:1 | PASS (min 4.5:1) |
| selected nav item label (data-status=active) | state | 9.51:1 | PASS (min 4.5:1) |
| selected list row label (secondary surface) | state | 13.45:1 | PASS (min 4.5:1) |
| input placeholder text | state | 7.82:1 | PASS (min 4.5:1) |
| link default (gold on page) | state | 9.81:1 | PASS (min 4.5:1) |
| link active (neon on page) | state | 7.42:1 | PASS (min 4.5:1) |
Light state
Tab through this panel to review keyboard focus indicators.
Headlines
Neon headline
Gold subhead
Body copy on the page surface.
Muted supporting copy.
Buttons — default / hover / disabled
Links & navigation states
Inline linkSelected nav
Form inputs
Surfaces & data display
Card surface
Attention Index
Card body copy and muted metadata.
Default
Secondary
Outline
Destructive
Selected tab uses a filled surface, not color alone.
Token swatches
- backgroundAa text sample
- cardAa text sample
- primaryAa text sample
- neonAa text sample
- secondaryAa text sample
- mutedAa text sample
- accentAa text sample
- destructiveAa text sample
Dark state
Tab through this panel to review keyboard focus indicators.
Headlines
Neon headline
Gold subhead
Body copy on the page surface.
Muted supporting copy.
Buttons — default / hover / disabled
Links & navigation states
Inline linkSelected nav
Form inputs
Surfaces & data display
Card surface
Attention Index
Card body copy and muted metadata.
Default
Secondary
Outline
Destructive
Selected tab uses a filled surface, not color alone.
Token swatches
- backgroundAa text sample
- cardAa text sample
- primaryAa text sample
- neonAa text sample
- secondaryAa text sample
- mutedAa text sample
- accentAa text sample
- destructiveAa text sample