Tokens

Color

Cedar's color system has two layers: primitive palettes (raw hex values named by scale) and a semantic layer (purpose-based aliases). Always use semantic tokens in components — never primitives directly.

Semantic tokens

These are the tokens components consume. Each one is an alias to a primitive — the alias is the contract, not the hex value.

Backgrounds

TokenCSS varValueAlias
bg/base--bg-base#FFFFFFfoundations/white
bg/faint--bg-faint#F7F7F7neutral/50
bg/muted--bg-muted#DCDCDCneutral/150
bg/raised--bg-raised#DCDCDCneutral/150
bg/subtle--bg-subtle#CCCCCCneutral/300
bg/disabled--bg-disabled#E2E2E2neutral/100

Text

TokenCSS varValueAlias
text/base--text-base#252525neutral/900
text/subtle--text-subtle#939393neutral/600
text/disabled--text-disabled#C2C2C2neutral/400
text/inverse--text-inverse#FFFFFFfoundations/white
text/on-brand--text-on-brand#FFFFFFfoundations/white

Border

TokenCSS varValueAlias
border/base--border-base#252525neutral/900
border/subtle--border-subtle#CCCCCCneutral/300
border/brand--border-brand#0097A7brand/primary/500
border/disabled--border-disabled#DCDCDCneutral/150

Actions

TokenCSS varValueAlias
action/primary--action-primary#0097A7brand/primary/500
action/primary-hover--action-primary-hover#008394brand/primary/600
action/primary-pressed--action-primary-pressed#006A7Abrand/primary/700
action/secondary--action-secondary#0F7DBDbrand/secondary/500
action/accent--action-accent#8BC34Abrand/accent/500
action/destructive--action-destructive#B24949error/600
action/neutral--action-neutral#939393neutral/600

Status

TokenCSS varValueAlias
status/error--status-error#DF5B5Berror/500
status/warning--status-warning#B65D0Bbrand/orange/600
status/success--status-success#1F6B3Fsuccess/700
status/information--status-information#478AFFinformation/500
status/error-bg--status-error-bg#EACFCFerror/100
status/warning-bg--status-warning-bg#FEF4ECbrand/orange/100
status/success-bg--status-success-bg#E1F4E6success/100
status/information-bg--status-information-bg#CBD9F0information/100

Design decisions

status/success contrast fix — WCAG AA

status/success was previously aliased to success/500 (#3a9c5e), yielding1.68:1 contrast against the success/100 background — a WCAG fail. It is now aliased to success/700 (#1f6b3f) → 5.66:1 (passes AA). Background tokens remain on success/100.

warning and destructive repoints

When brand/amber was recolored to blue and renamed brand/secondary,status/warning (which sourced from amber) was repointed to brand/orange/600to preserve its warm semantics. Similarly action/destructive moved from the old sienna ramp to error/600 — keeping the same visual intent with a stable source.

Primitive palettes

Raw color values named by palette and scale step. Reference these only when defining semantic tokens — not directly in components.

brand/primary

100
150
200
300
400
500
600
700
800
900
950

brand/secondary

100
150
200
300
400
500
600
700
800
900
950

brand/accent

100
150
200
300
400
500
600
700
800
900
950

brand/orange

100
150
200
300
400
500
600
700
800
900
950

neutral

50
100
150
200
300
400
500
600
700
800
900
950

error

100
150
200
300
400
500
600
700
800
900
950

success

100
150
200
300
400
500
600
700
800
900
950

warning

100
150
200
300
400
500
600
700
800
900
950

information

100
150
200
300
400
500
600
700
800
900
950