Colors
Colors are mapped from the Foundation palette to semantic intent tokens. All themes (basic, game, crayon) share the same foundation palette; the game theme derives colors via toNeon(), and the crayon theme via toPastel().
Foundation Palette
Raw color scales. Hover over each step to see the hex value.
purple
50
100
200
300
400
500
600
700
800
900
slate
50
100
200
300
400
500
600
700
800
900
green
50
100
200
300
400
500
600
700
800
900
yellow
50
100
200
300
400
500
600
700
800
900
orange
50
100
200
300
400
500
600
700
800
900
red
50
100
200
300
400
500
600
700
800
900
blue
50
100
200
300
400
500
600
700
800
900
pink
50
100
200
300
400
500
600
700
800
900
cream
50
100
200
300
400
500
600
700
800
900
charcoal
50
100
200
300
400
500
600
700
800
900
Theme Adapters
| Theme | Adapter | Behavior |
|---|---|---|
| basic | — | Uses Foundation palette directly |
| game | toNeon() | Saturation +30%, Lightness boosted (neon effect) |
| crayon | toPastel() | Saturation ×0.65, Lightness 55% toward white (pastel effect) |
Semantic Color Tokens
The table below shows the basic theme semantic tokens. Switch the light/dark tab to see the actual hex values for each mode.
| Intent | surface | hover | active | text | border | weak |
|---|---|---|---|---|---|---|
| primary | #8b5cf6 | #7c3aed | #6d28d9 | #ffffff | #7c3aed | ~ mix |
| secondary | #475569 | #334155 | #1f2937 | #ffffff | #334155 | ~ mix |
| success | #16a34a | #15803d | #166534 | #ffffff | #15803d | ~ mix |
| warning | #facc15 | #eab308 | #ca8a04 | #0f172a | #eab308 | ~ mix |
| danger | #ef4444 | #dc2626 | #b91c1c | #ffffff | #dc2626 | ~ mix |
| neutral | #e2e8f0 | #cbd5f5 | #94a3b8 | #0f172a | #cbd5f5 | ~ mix |
Surface
background#ffffff
backgroundElevated#f8fafc
outline#cbd5f5
text#0f172a
textMuted#475569
divider—
Intent Guide
| Intent | Use case |
|---|---|
| primary | Main CTA, emphasis |
| secondary | Secondary actions, less emphasis |
| success | Success, completion, confirmation |
| warning | Warning, caution |
| danger | Delete, error, danger |
| neutral | Background, border, non-emphasized text |
Each intent has the following state tokens:
- surface — Default background
- surfaceHover — Background on hover
- surfaceActive — Background on click/active
- text — Text color on that background
- border — Border color
- weak — Low-intensity background (e.g. subtle badges)
The component intent prop maps directly to these tokens. You can override the primary palette with ThemeProvider’s primaryColor prop (hex value).
Last updated on