10⁰ — Architecture
Primitives → semantic → component
Components read semantic tokens only. Themes switch with a data-theme attribute; a brand theme overrides about 8 semantic tokens. Source: flux-tokens.css.
PRIMITIVESEMANTICCOMPONENT
--p-amber-500
→ --action
→ --btn-primary-bg
--p-ink-900
→ --on-action
→ --btn-primary-fg
--p-ink-850 / paper-0
→ --surface-1
→ --card-bg, --panel-bg
--p-cryo-300 / cryo-700
→ --focus
→ --focus-ring
--p-green-400 / green-700
→ --success
→ --chip-demonstrated
--p-violet-500 → magenta-500
→ --plasma-a/-b
→ --field-lines (energy only)
10¹ — Palette
Primitives
VacuumCinematic dark, default. Depth through luminance steps, never shadows.
Surface 1#0F1217p-ink-850
Surface 2#161A21p-ink-800
CleanroomBright, for data-dense and utility pages.
Surface 2#E8E9E4p-paper-100
ActionLitho Amber is reserved for primary CTAs and key interactive states. Complementary to Plasma violet, so CTAs pop against energy visuals.
Litho Amber#FFB020p-amber-500 · fill
Amber Hover#FFC24Dp-amber-400
Amber Deep#8A5A00p-amber-800 · text on light
Energy & dataPlasma is for energy visuals only; Cryo is for data highlights and info.
Plasma#7B3CFF → #E040FBgradient · visuals only
Cryo Deep#0B6E99p-cryo-700 · on light
StatusAlways with icon and label.
Hazard#FFD60Ap-hazard-400 · stripe
Success#3DDC97p-green-400
10² — Semantic
Semantic tokens and contrast
Ratios are computed live from the token values against each theme’s canvas (WCAG 2.2). Body text targets AAA (7:1); every text pair clears AA (4.5:1).
TOKENROLEVACUUMCLEANROOM
--text
Primary text
#EDEFF2·17.4:1AAA
#0B0D10·17.6:1AAA
--text-2
Secondary text
#AEB4BE·9.6:1AAA
#3A3F47·9.6:1AAA
--text-3
Labels, meta
#8A919C·6.3:1AA
#5A606A·5.7:1AA
--action
CTA fill (with --on-action text)
#FFB020·fill· see on-action
#FFB020·fill· see on-action
--on-action
Text on amber fill
#0B0D10·10.6:1AAA
#0B0D10·10.6:1AAA
--action-text
Amber text & links
#FFB020·11.0:1AAA
#8A5A00·5.4:1AA
--info
Info, data highlight
#7FDBFF·12.9:1AAA
#0B6E99·5.1:1AA
--success
Success, Demonstrated
#3DDC97·11.3:1AAA
#137A4B·4.9:1AA
--critical
Critical
#FF6B5E·7.2:1AAA
#C0312B·5.1:1AA
--warning
Warning (with hazard stripe)
#FFD60A·14.2:1AAA
#7A5F00·5.5:1AA
--focus
Focus ring
#7FDBFF·12.9:1AAA
#0B6E99·5.1:1AA
10³ — Status
Status is never color alone
Each status pairs color, icon and label. Warning always carries the hazard stripe and is never a plain amber fill, so it can’t be confused with the action color.
Critical
Cryoplant pressure outside envelope. Operators paged.
Warning
Telemetry stale for 4 min. Values may be outdated.
Info
Simulated data. Not from a live instrument.
Success
Request received. An engineer replies within 2 business days.
10⁴ — Data
Data-viz palette
Eight categorical colors ordered for deuteranopia and protanopia separation (cryo / amber / violet first). Use the first three before adding more; never rely on hue alone. Pair with markers and direct labels.
VACUUM · CATEGORICAL
--viz-1
--viz-2
--viz-3
--viz-4
--viz-5
--viz-6
--viz-7
--viz-8
SEQUENTIAL · CRYO
DIVERGING · CRYO ↔ AMBER
CLEANROOM · CATEGORICAL
--viz-1
--viz-2
--viz-3
--viz-4
--viz-5
--viz-6
--viz-7
--viz-8
SEQUENTIAL · CRYO
DIVERGING · CRYO ↔ AMBER
10⁵ — Themes
Key components in every theme
CLEANROOMdata-theme="cleanroom"
Every ångström counts.
D0 DEFECT DENSITY
0.08 /cm²
Demonstrated · Jan 2026
Text link in action color
COLDLINE (BRAND)data-theme="coldline"
Colder than space.
MIXING CHAMBER
8.2 mK
Demonstrated · Jun 2026
Text link in action color
Brand theming in 8 tokens
Coldline Quantum (D12) inherits Cleanroom and overrides only these. No component changes.
[data-theme="coldline"] {
--action: var(--p-cryo-300);
--action-hover: #A8E8FF;
--on-action: var(--p-ink-900);
--action-text: var(--p-cryo-700);
--focus: var(--p-cryo-700);
--info: var(--p-cryo-700);
--plasma-a: #7FDBFF;
--plasma-b: #0B6E99;
}