Color System Design

Concept of the skill

A color system is the discipline of turning color from a per-screen aesthetic decision into a derivable, accessible, theme-portable layer of the design system. It is built in three stacked layers — and proven by one audit artifact. The palette is raw values organized as per-hue scales (typically 9 to 12 steps from very light to very dark, generated in a perceptually uniform color space — OKLCH/LCH or HCT — so equal step indices read as equally spaced). The semantic tokens name colors by purpose rather than appearance (background-surface, text-primary, border-subtle, danger-bg/danger-fg). The per-theme mapping resolves each semantic token to a palette value, and is the only layer that differs between light, dark, high-contrast, brand, or product modes. A mature scale also assigns a fixed UI role to each step index, so step N means the same job (app background, component fill, border, solid fill, text) across every hue — the role convention is what makes the semantic layer cheap to define and stable across rebrands. The proof that the whole stack is safe is the pairing matrix: the documented set of foreground/background, border/background, focus/background, icon/background, and status/background combinations allowed to ship, each with its contrast result per theme.

Two non-negotiable constraints run through everything: scales must be constructed in a perceptually uniform space rather than sRGB/HSL (whose equal numeric steps look unequal), and every pairing a semantic token can produce must clear a contrast minimum — WCAG 2.x AA at a floor — in every theme it resolves in. The system's job is to make color reproducible and safe: scales generated by rule, accessibility baked into the token contract and the pairing matrix, and meaning decoupled from value so a brand shift never becomes a code change.

Coverage

This skill covers color systems at the value and meaning layer:

• Perceptual palette construction: choosing seed colors, anchoring brand hues to scale steps, generating 9–12 step scales, mapping step indices to UI role bands, managing lightness, chroma, hue drift, gamut clipping, neutrals, and status hues.
• Semantic color tokens: naming by intent and relationship, including surfaces, text, borders, emphasis, status, focus, selection, disabled, overlays, charts, and data-visualization roles.
• Pairing contracts: defining which tokens may be used together and testing text, icon, focus, border, control, and graphical-object contrast after alpha, overlays, gradients, and image backdrops have been composited.
• Light/dark/high-contrast parity: ensuring every semantic token has a valid mapping in each theme and meets the same user-facing promise — not necessarily the same raw step number.
• Web color-platform details that affect values: CSS OKLCH/LCH, color-mix(), relative colors, Display-P3 and sRGB fallbacks, contrast-color() limits, forced-colors behavior, and prefers-contrast variants.
• Color-value export constraints: recording source color space, generated sRGB fallback values, DTCG color-token representation, and tool-support caveats that can change color fidelity.

It does not own the runtime application of themes, the complete token build pipeline, or accessibility-law interpretation.