10.1 The Full Chain
Scenario: A button with color="brand" and type="primary" in Brand-A, Light mode.
T1
Tier 1 — Primitives / Color
purple-600 = ■ #9333EARaw color value — no semantic meaning yet
↓
T2
Tier 2 — Brand Palette (Brand-A mode)
brand-base → {purple-600}Brand Palette maps raw color to brand-neutral name
↓
T2
Tier 2 — Semantic / Color (Light mode)
brand-color → {brand-base}Semantic layer assigns role (primary accent)
↓
T3
Tier 3 — Color / Active (brand mode)
color → {brand-color}Shared bridge — abstracted into the 6 generic roles
↓
CSS
Developer — CSS custom property
--cck-color: var(--brand-color)Color class sets component-scoped CSS variable
↓
CSS
Developer — Type class reads variable
background-color: var(--cck-color)Type class applies color to the element — renders ■ #9333EA
10.2 Switching Brands (Zero Code)
To change from Brand-A (purple) to Brand-B (teal), you change only one thing: the Brand Palette collection mode.
Brand switch — only the Brand Palette mode changes
// Before (Brand-A)
purple-600: #9333EA
brand-base → {purple-600} ← Brand Palette / Brand-A
brand-color → {brand-base} ← Semantic / Color / Light
color → {brand-color} ← Color/Active / brand mode
--cck-color: var(--brand-color)
Result → #9333EA (purple)
// After (Brand-B) — only Brand Palette mode changed
teal-400: #2DD4BF
brand-base → {teal-400} ← Brand Palette / Brand-B ← ONLY THIS CHANGED
brand-color → {brand-base} ← same
color → {brand-color} ← same
--cck-color: var(--brand-color)
Result → #2DD4BF (teal)10.3 Switching Dark Mode (Zero Code)
Dark mode changes only the Semantic / Color collection mode — all other tiers remain unchanged.
Dark mode switch — only Semantic/Color mode changes
// Light mode chain (unchanged)
purple-600: #9333EA
brand-base → {purple-600} ← same
brand-color → {brand-base} ← Semantic / Color / Light — pure purple
Result → #9333EA
// Dark mode — only Semantic/Color mode changes
purple-400: #C084FC
brand-base → {purple-600} ← same (Brand Palette unchanged)
brand-light → {purple-400}
brand-color → {brand-light} ← Semantic / Color / Dark ← ONLY THIS CHANGED
Result → #C084FC (lighter purple for dark bg)
Two independent controls, one outcome.
Brand = which palette (Brand-A/B). Dark mode = which semantic color values. They are orthogonal — switching brand doesn't affect dark/light, and switching dark/light doesn't affect which brand you're on.