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 | Group | Light | Dark | Description |
|---|---|---|---|---|
| --generic-white | Constant |
generic-0
|
generic-0
|
Always white |
| --generic-black | Constant |
generic-1000
|
generic-1000
|
Always black |
| --mains-primary | Foreground |
grey-950
|
grey-50
|
Primary text |
| --mains-secondary | Foreground |
grey-800
|
grey-200
|
Secondary text |
| --mains-tertiary | Foreground |
grey-600
|
grey-400
|
Tertiary text |
| --mains-quaternary | Foreground |
grey-500
|
grey-600
|
Disabled / hint text |
| --surfaces-background | Neutrals |
grey-50
|
generic-1000
|
Page background |
| --surfaces-surface | Neutrals |
generic-0
|
grey-950
|
Card surface |
| --surfaces-subtle | Neutrals |
grey-75
|
grey-900
|
Hover fills |
| --surfaces-moderate | Neutrals |
grey-100
|
grey-800
|
Secondary fills |
| --surfaces-contrast | Neutrals |
grey-200
|
grey-700
|
Stronger fills |
| --border-default | Border |
grey-100
|
grey-900
|
Standard border |
| --border-strong | Border |
grey-200
|
grey-800
|
Prominent border |
| --success-primary | Accents |
green-500
|
green-500
|
Success |
| --info-primary | Accents |
blue-500
|
blue-500
|
Primary / Info / Focus |
| --error-primary | Accents |
red-500
|
red-500
|
Error / Danger |
| --warning-primary | Accents |
orange-500
|
orange-500
|
Warning |
| --error-background | Tints |
red-50
|
red-950
|
Red tint |
| --success-background | Tints |
green-50
|
green-950
|
Green tint |
| --info-background | Tints |
blue-50
|
blue-950
|
Blue tint |
| --warning-background | Tints |
orange-50
|
orange-950
|
Orange tint |
Color
-
-
Click to copy