The living catalog·Primitives

The token sheet, rendered

The primitives are not components — they are the raw material every component is built from. Everything on this page is painted with utilities from @candlelight-ds/tokens. The values are law (spec §2.9) — the package's tests fail if one drifts. Raw twin: /tokens.md

The stage ladder

Four backgrounds, darkest to highest — the room, then every resting surface on it.

--stagethe room's darkness — body bg
--surfacepanels sitting on the stage
--surface-2menus, overlays, cards
--surface-3highest resting surface

The ink ladder

Three text colors — ink, mute, faint — AA against every surface. There is no fourth.

--ink — primary text, AA against every surface

--ink-mute — secondary: descriptions, labels

--ink-faint — tertiary: placeholders, eyebrows, disabled

The voice colors

Brass and its temperatures, live, ready, warn, danger, ember — state speaks in exactly these.

--brass

the identity accent — armed, selected, primary

--brass-hot

hover temperature

--brass-deep

pressed temperature

--live

happening right now

--ready

verified / ready

--warn

attention, degraded

--danger

destructive — cold

--ember

destruction in progress

The fill ramp

Rest, hover, active, selected — every interactive wash on every surface is one of these four.

--fill-restresting chrome
--fill-hoverhover
--fill-activepressed / keyboard-highlighted
--fill-selectedselection — accent-tinted
live: rest → hoverevery hover on every surface is one of these four

The tint ramp

Voice × stop, a closed set (§2.4a) — fill, chip, held, rim. Ad-hoc voice alphas are lint-banned.

fill 10chip 12held 15rim 45brass
live
ready
warn
danger

When a wash wears a voice color it is one of these four stops — bg-live-chip, ring-brass-rim, bg-danger-held. Ad-hoc voice alphas (bg-live/12) are lint-banned; the stop name is the API.

Structure & physicality

Three radii, three shadows, and the 1px key travel — strength is structure, never glow.

radius-sm · shadow-raise

controls, cards

radius-md · shadow-float

panels, menus

radius-lg · shadow-stage

the outermost shell

Motion

The 120/150/2500ms budget and the one ease; skeletons breathe, and every loop honors reduced motion.

enter = rise 6px + fade (150ms, the one ease)

Skeletons breathe, never shimmer. Every loop dies under prefers-reduced-motion.

← Candlelight·Full law: /spec.md, §2 and Appendices A–C