v1.1.1

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
--foreground-primary: grey-950
--success-fill: green-500
--info-fill: blue-500
--error-fill: red-500
<!-- Two-layer system: Palette &#8594; Semantic Tokens -->

<!-- Palette (raw HSL scales) -->
var(--grey-950)
var(--green-500)
var(--blue-500)

<!-- Semantic tokens (theme-aware) -->
var(--foreground-primary)        /* grey-950 in light, grey-50 in dark */
var(--info-fill)      /* blue-500 */
var(--surface-card)  /* 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 a subtle blue-violet tint in the mid-range. Same eleven-step ladder as the accent scales, bracketed by pure white (0) and black (1000).

Generic

--generic-*
0
1000

Grey

--grey-*
50
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

The complete 56-role semantic contract. Palette references below describe the default theme; auto values are derived from the fill.

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
--foreground-primary
grey-950
grey-50
Primary text
--foreground-secondary
grey-800
grey-200
Secondary text
--foreground-muted
grey-600
grey-400
Muted text / hints
--foreground-disabled
grey-500
grey-600
Disabled text only
Surfaces Static backgrounds; interactive neutral fills have separate roles
--surface-page
grey-50
generic-1000
Page background
--surface-card
generic-0
grey-950
Card surface
--surface-subtle
grey-100
grey-900
Subtle static surface
--surface-moderate
grey-200
grey-800
Moderate static surface
--surface-strong
grey-300
grey-700
Strong static surface
Border Stroke & divider colors
--border-default
grey-200
grey-900
Standard border
--border-strong
grey-300
grey-800
Prominent border
Focus Keyboard focus indicator
--focus-ring
blue-500
blue-400
Focus ring
Neutral actions Secondary button fills and text, independently configurable in each mode
--neutral-fill
grey-50
grey-900
Neutral fill
--on-neutral
grey-950
grey-50
On neutral
--neutral-fill-hover
grey-100
grey-800
Hover
--neutral-fill-pressed
grey-200
grey-700
Pressed
--neutral-fill-disabled
grey-50
grey-900
Disabled fill
Brand Brand fill + its auto-derived on-color
--brand-fill
brand-500
brand-500
Brand fill
--on-brand
auto
auto
On brand (auto)
--brand-fill-hover
auto
auto
Hover fill
--brand-fill-pressed
auto
auto
Pressed fill
--brand-fill-disabled
auto
auto
Disabled fill
Info Info status — fill, on-color, tint, border
--info-fill
blue-500
blue-500
Info fill
--on-info
auto
auto
On info (auto)
--info-surface
blue-50
blue-950
Info tint
--info-border
blue-200
blue-800
Info border
--info-fill-hover
auto
auto
Hover fill
--info-fill-pressed
auto
auto
Pressed fill
--info-fill-disabled
auto
auto
Disabled fill
--info-text
blue-700
blue-300
Readable text on a tinted surface
Success Success accent — fill, on-color, tint, border
--success-fill
green-500
green-500
Success fill
--on-success
auto
auto
On success (auto)
--success-surface
green-50
green-950
Success tint
--success-border
green-200
green-800
Success border
--success-fill-hover
auto
auto
Hover fill
--success-fill-pressed
auto
auto
Pressed fill
--success-fill-disabled
auto
auto
Disabled fill
--success-text
green-700
green-300
Readable text on a tinted surface
Error Error / danger accent — fill, on-color, tint, border
--error-fill
red-500
red-500
Danger fill
--on-error
auto
auto
On danger (auto)
--error-surface
red-50
red-950
Danger tint
--error-border
red-200
red-800
Danger border
--error-fill-hover
auto
auto
Hover fill
--error-fill-pressed
auto
auto
Pressed fill
--error-fill-disabled
auto
auto
Disabled fill
--error-text
red-700
red-300
Readable text on a tinted surface
Warning Warning accent — fill, on-color, tint, border
--warning-fill
orange-500
orange-500
Warning fill
--on-warning
auto
auto
On warning (auto)
--warning-surface
orange-50
orange-950
Warning tint
--warning-border
orange-200
orange-800
Warning border
--warning-fill-hover
auto
auto
Hover fill
--warning-fill-pressed
auto
auto
Pressed fill
--warning-fill-disabled
auto
auto
Disabled fill
--warning-text
orange-700
orange-300
Readable text on a tinted surface
Color
-
-
Click to copy