Colors
Neutral grey palette with accent colors and semantic design tokens from Figma.
Architecture
Two-layer color system: Palette → Semantic Tokens.
css
Palette
--grey-950
--green-500
--red-500
Tokens
--mains-primary: grey-950
--success-primary: green-500
--info-primary: blue-500
--error-primary: red-500
<!-- Two-layer system: Palette → Semantic Tokens -->
<!-- Palette (raw HSL scales) -->
var(--grey-950)
var(--green-500)
var(--blue-500)
<!-- Semantic tokens (theme-aware) -->
var(--mains-primary) /* grey-950 in light, grey-50 in dark */
var(--info-primary) /* blue-500 */
var(--surfaces-surface) /* white in light, black in dark */Color Value Format
Hover a swatch to preview value. Click a swatch to copy.
Grey Scale
Neutral grey with subtle blue-violet tint in mid-range. Includes step 75 for finer control.
Grey
--grey-*50
75
100
200
300
400
500
600
700
800
900
950
Accent Colors
Full scales for brand, success, info, error and warning states.
Green
--green-*50
100
200
300
400
500
600
700
800
900
950
Blue
--blue-*50
100
200
300
400
500
600
700
800
900
950
Red
--red-*50
100
200
300
400
500
600
700
800
900
950
Orange
--orange-*50
100
200
300
400
500
600
700
800
900
950
Design Tokens
Exported from Figma. Each token maps to palette values for light and dark modes.
| Token | Light | Dark | Description |
|---|---|---|---|
| Constant Theme-invariant — same in light and dark | |||
| --generic-white |
generic-0
|
generic-0
|
Always white |
| --generic-black |
generic-1000
|
generic-1000
|
Always black |
| Foreground Text & icon hierarchy | |||
| --mains-primary |
grey-950
|
grey-50
|
Primary text |
| --mains-secondary |
grey-800
|
grey-200
|
Secondary text |
| --mains-tertiary |
grey-600
|
grey-400
|
Tertiary text |
| --mains-quaternary |
grey-500
|
grey-600
|
Disabled / hint text |
| Neutrals Surfaces & fills | |||
| --surfaces-background |
grey-50
|
generic-1000
|
Page background |
| --surfaces-surface |
generic-0
|
grey-950
|
Card surface |
| --surfaces-subtle |
grey-75
|
grey-900
|
Hover fills |
| --surfaces-moderate |
grey-100
|
grey-800
|
Secondary fills |
| --surfaces-contrast |
grey-200
|
grey-700
|
Stronger fills |
| Border Stroke & divider colors | |||
| --border-default |
grey-100
|
grey-900
|
Standard border |
| --border-strong |
grey-200
|
grey-800
|
Prominent border |
| Brand Brand fill + its auto-derived on-color | |||
| --accents-brand |
brand-500
|
brand-500
|
Brand fill |
| --on-brand |
auto
|
auto
|
On brand (auto) |
| Info Info / focus accent — fill, on-color, tint, border | |||
| --info-primary |
blue-500
|
blue-500
|
Info fill / focus |
| --on-info |
auto
|
auto
|
On info (auto) |
| --info-background |
blue-50
|
blue-950
|
Info tint |
| --info-border |
blue-200
|
blue-800
|
Info border |
| Success Success accent — fill, on-color, tint, border | |||
| --success-primary |
green-500
|
green-500
|
Success fill |
| --on-success |
auto
|
auto
|
On success (auto) |
| --success-background |
green-50
|
green-950
|
Success tint |
| --success-border |
green-200
|
green-800
|
Success border |
| Error Error / danger accent — fill, on-color, tint, border | |||
| --error-primary |
red-500
|
red-500
|
Danger fill |
| --on-error |
auto
|
auto
|
On danger (auto) |
| --error-background |
red-50
|
red-950
|
Danger tint |
| --error-border |
red-200
|
red-800
|
Danger border |
| Warning Warning accent — fill, on-color, tint, border | |||
| --warning-primary |
orange-500
|
orange-500
|
Warning fill |
| --on-warning |
auto
|
auto
|
On warning (auto) |
| --warning-background |
orange-50
|
orange-950
|
Warning tint |
| --warning-border |
orange-200
|
orange-800
|
Warning border |
Color
-
-
Click to copy