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
--fg-primary: grey-950
--accents-green: green-500
--accents-blue: blue-500
--accents-red: 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(--fg-primary) /* grey-950 in light, grey-50 in dark */
var(--accents-blue) /* blue-500 */
var(--neutrals-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 |
|---|---|---|---|---|
| --constant-white | Constant |
generic-0
|
generic-0
|
Always white |
| --constant-black | Constant |
generic-1000
|
generic-1000
|
Always black |
| --fg-primary | Foreground |
grey-950
|
grey-50
|
Primary text |
| --fg-secondary | Foreground |
grey-800
|
grey-200
|
Secondary text |
| --fg-tertiary | Foreground |
grey-600
|
grey-400
|
Tertiary text |
| --fg-disabled | Foreground |
grey-400
|
grey-600
|
Disabled / hint text |
| --neutrals-background | Neutrals |
grey-50
|
grey-950
|
Page background |
| --neutrals-surface | Neutrals |
generic-0
|
generic-1000
|
Card surface |
| --neutrals-subtle | Neutrals |
grey-50
|
grey-900
|
Hover fills |
| --neutrals-muted | Neutrals |
grey-75
|
grey-950
|
Secondary fills |
| --neutrals-emphasis | Neutrals |
grey-100
|
grey-800
|
Stronger fills |
| --border-default | Border |
grey-100
|
grey-900
|
Standard border |
| --border-strong | Border |
grey-200
|
grey-800
|
Prominent border |
| --accents-green | Accents |
green-500
|
green-500
|
Success |
| --accents-blue | Accents |
blue-500
|
blue-500
|
Primary / Info / Focus |
| --accents-red | Accents |
red-500
|
red-500
|
Error / Danger |
| --accents-orange | Accents |
orange-500
|
orange-500
|
Warning |
| --tint-red | Tints |
red-50
|
red-950
|
Red tint |
| --tint-green | Tints |
green-50
|
green-950
|
Green tint |
| --tint-blue | Tints |
blue-50
|
blue-950
|
Blue tint |
| --tint-orange | Tints |
orange-50
|
orange-950
|
Orange tint |
Color
-
-
Click to copy