color-system

Core Philosophy

A production color system is not a static Figma swatch board of 5 favorite hex codes. A true color system is a mathematically coherent, tokenized software architecture. It governs contrast ratios, elevation surface ramps, perceptual lightness distribution, semantic state bindings, and flawless bidirectional light/dark mode transitions without manual per-screen overrides.

4-Step Scalable Color System Engineering

Step 1: The 3-Tier Token Architecture

The Token Hierarchy:
- Tier 1: Global Primitives (Raw Values):
  - blue-500: #3B82F6, slate-900: #0F172A. Never consume primitives directly in components.
- Tier 2: Semantic Tokens (System Purpose):
  - surface-canvas: var(--slate-900), action-primary: var(--blue-500).
- Tier 3: Component Tokens (Scoped Overrides):
  - button-primary-bg: var(--action-primary).