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.
Weak versus strong
Primary
Weak
Used everywhere until nothing feels primary.
Strong
Used sparingly for main action or key emphasis.
Surface
Weak
Decorative backgrounds reduce readability.
Strong
Supports reading, grouping, and depth.
State
Weak
Same color means several different things.
Strong
Shows error, warning, success, selected, disabled, and focus clearly.