Colors
The color tokens used throughout the design system, grouped by category — text, surface, stroke, icon, and more. Toggle light/dark in the sidebar to see how each one adapts.
Text
Body/heading text colors.
Text — semantic
Semantic (success/warning/error/informational) text colors.
Text — severity
Severity (low/medium/high/critical/informational/invalid) text colors.
Surface
Backgrounds — page, card, popover, sidebar.
Surface — semantic
Tinted background fills for feedback banners (success/warning/error/informational).
Surface — severity
Tinted background fills for severity-tagged rows (low/medium/high/critical/informational/invalid).
Surface — input states (to be removed)
Legacy per-surface input background tokens (on-background/on-card/on-popover × default/hover/focused/filled/disabled). Superseded by the opacity wash below — no component in packages/foundation reads these anymore. Kept for reference pending cleanup.
Input, Checkbox, and Select on different surfaces (opacity wash)
A single fixed-opacity overlay tinted with the brand color, alpha-composited over whatever's behind the field — no per-surface token, no ambient CSS var lookup. Same declaration renders correctly in all three panels below.
- --field-wash (light)
- color-mix(in srgb, var(--color-brand-brand) 4%, transparent)
- --field-wash-hover (light)
- color-mix(in srgb, var(--color-brand-brand) 7%, transparent)
- --field-wash (dark)
- color-mix(in srgb, var(--color-brand-brand) 5%, transparent)
- --field-wash-hover (dark)
- color-mix(in srgb, var(--color-brand-brand) 10%, transparent)
By clicking this checkbox, you agree to the terms and conditions.
By clicking this checkbox, you agree to the terms and conditions.
By clicking this checkbox, you agree to the terms and conditions.
default & filled → wash, hover & focus → wash-hover, disabled → transparent
same state mapping as Input
both the plain box and the card variant
no focus/filled tier — checked state uses a ring instead
the dropdown panel itself stays solid bg-surface-popover — only the trigger washes
same as Select; its internal popover search row is untouched (see below)
only the unchecked track — default & hover; checked track and disabled stay solid brand-brand/brand-300
solid bg-surface-card/bg-surface-popover instead — sits on top of the track's own color (wash or brand-brand), not the ambient page/card surface, and needs to read as opaque regardless of what's under it
the pill bar background — sits directly on the ambient surface
the active-tab pill also washes, stacking on top of list's own wash so it still reads as a distinct, slightly stronger fill
still bg-surface-popover / hover:bg-surface-input-on-popover-hover — lives inside a teleported dropdown panel, out of scope for this pass
frozen duplicate of the pre-wash Switch classes, still on the now-orphaned surface-input-on-background-* tokens, themes raw USwitch call sites in apps/frontend not yet migrated to <Switch>
Stroke
Borders and dividers.
Stroke — semantic
Semantic (success/warning/error/informational) border colors.
Stroke — severity
Severity (low/medium/high/critical/informational/invalid) border colors.
Icon
Icon fill colors — the same values as Text, since icons mirror text color 1:1.
Icon — semantic
Semantic (success/warning/error/informational) icon colors.
Icon — severity
Severity (low/medium/high/critical/informational/invalid) icon colors.
Support
Standalone status/severity accents (badges, dots) — not paired with a specific surface/text/stroke context.
Button
Per-variant button background states. See the Button component page for how these compose.
Chart
Data visualization series + severity colors.
Customisation
User-selectable accent swatches (e.g. for tags, avatars) and their stroke variants.
Brand
The primary brand color (warm ink in light mode, warm paper in dark mode) and its numeric ramp, which inverts with theme — step 0 is darkest in light mode, lightest in dark mode.