Colours
DAVE uses a 12-step primitive scale for each colour family, with semantic aliases that map to specific stops. Override the primitives to theme the entire system.
Primitive scales
Neutral
1
Background
2
Surface
3
4
Border
5
6
Border strong
7
8
9
Secondary text
10
11
12
Foreground
Accent (Indigo)
1
2
Subtle bg
3
4
5
6
7
Focus ring
8
9
Solid
10
Hover
11
Text
12
Success (Green)
1
Subtle bg
2
3
Border
9
Solid
10
Hover
11
Text
Warning (Amber)
1
Subtle bg
2
3
Border
9
Solid
10
Hover
11
Text
Error (Red)
1
Subtle bg
2
3
Border
9
Solid
10
Hover
11
Text
Semantic tokens
Components use these tokens, not the primitive scale directly. Override primitives and semantics update automatically.
| Token | Value | Description | |
|---|---|---|---|
| Base | |||
| --color-background | #F7F5F0 | Page background | |
| --color-surface | #F0EEE9 | Subtle surface, hover states | |
| --color-card | #FFFFFF | Card and dialog backgrounds | |
| --color-foreground | #0F0E0C | Primary text | |
| --color-foreground-secondary | #706A62 | Secondary and placeholder text | |
| --color-border | #E2DED7 | Default border | |
| --color-border-strong | #C8C3BA | Focused or prominent border | |
| Accent | |||
| --color-accent | #2D24AE | Solid accent — buttons, focus | |
| --color-accent-hover | #231B9A | Hovered accent solid | |
| --color-accent-subtle | #EAEAFB | Accent tinted background | |
| --color-accent-subtle-border | #D9D8F7 | Subtle accent border | |
| --color-accent-border | #7977D6 | Accent border and focus rings | |
| --color-accent-foreground | #3B33BB | Accent text on tinted background | |
| Success | |||
| --color-success | #16A34A | Success solid | |
| --color-success-subtle | #F0FDF4 | Success background | |
| --color-success-border | #BBF7D0 | Success border | |
| --color-success-foreground | #166534 | Success text | |
| Warning | |||
| --color-warning | #D97706 | Warning solid | |
| --color-warning-subtle | #FFFBEB | Warning background | |
| --color-warning-border | #FDE68A | Warning border | |
| --color-warning-foreground | #92400E | Warning text | |
| Error | |||
| --color-error | #DC2626 | Error solid | |
| --color-error-hover | #B91C1C | Hovered error solid | |
| --color-error-subtle | #FFF5F5 | Error background | |
| --color-error-border | #FECACA | Error border | |
| --color-error-foreground | #991B1B | Error text | |