Colors

Semantic color utilities for backgrounds, text, and borders. Structural tokens come first — they're the everyday workhorses. Intent tokens communicate meaning.

Palette overview

Border alpha derives from a single --border-base token — the same ratio works across every palette, surface, and mode. Surface lift derives from the per-mode --surface-tint-target token. Hover any box to see both augmentations.

surface: base
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: tinted
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: dyed
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: base
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: tinted
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: dyed
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: base
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: tinted
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: dyed
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: base
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: tinted
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: dyed
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: base
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: tinted
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: dyed
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: base
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: tinted
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: dyed
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: base
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: tinted
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: dyed
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: base
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: tinted
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: dyed
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: base
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: tinted
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: dyed
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: base
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: tinted
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: dyed
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: base
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: tinted
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: dyed
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: base
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: tinted
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: dyed
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: base
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: tinted
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: dyed
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: base
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: tinted
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: dyed
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: base
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: tinted
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: dyed
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: base
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: tinted
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: dyed
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: base
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: tinted
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: dyed
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: base
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: tinted
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover
surface: dyed
ink-prominent
ink-default
ink-subtle
subtle
default
prominent
bg-wash:hover