domains / families / design / color-system

color-system

separate

Build a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use `dark-mode-design`; for chart palettes use `data-visualization`; for multi-brand token architecture use `theming-system` (design-systems).

When to use

• defining colour from scratch
• rebuilding colour from scratch
• creating tonal scales
• mapping semantic roles
• ensuring contrast compliance
• building brand palettes
• building neutral palettes
• defining extended palettes

When not to use

• dark-mode adaptation
• chart palettes
• multi-brand token architecture

Skill page

Source