Roles
A color system starts with roles
- Primary color guides the main action or brand emphasis.
- Surface and text colors carry most of the reading experience.
- Semantic colors explain status, risk, success, and recovery.
CriterionWeakStrong
PrimaryUsed everywhere until nothing feels primary.Used sparingly for main action or key emphasis.
SurfaceDecorative backgrounds reduce readability.Supports reading, grouping, and depth.
StateSame color means several different things.Shows error, warning, success, selected, disabled, and focus clearly.