Colors!
There are twenty distinct colors in the design system:
- Five semantic contexts (body, primary, secondary, danger, neutral) ×
- Two brightness levels (content, shading) ×
- Two color modes (light, dark)
In practice, it looks like this:
--body-content --body-shading --primary-content --primary-shading --secondary-content --secondary-shading --danger-content --danger-shading --neutral-content --neutral-shading
--body-content --body-shading --primary-content --primary-shading --secondary-content --secondary-shading --danger-content --danger-shading --neutral-content --neutral-shading
Or at least something like that.