3.2 KiB
| type | subtype | title | summary | tags | scope | last_updated | date | related | source | ||
|---|---|---|---|---|---|---|---|---|---|---|---|
| reference | design-rules | UI Color Rules for Functional Interfaces | Standards for applying color in dashboards/admin/SaaS UIs so that color always signals meaning (status, hierarchy, interactivity) rather than decoration, plus how to calibrate urgency treatments. |
|
global | 2026-07-13 | 2026-07-13 | design-mode |
UI Color Rules for Functional Interfaces
Purpose
Standards to check a color choice against when designing functional/professional UIs (dashboards, admin panels, SaaS tools, data-heavy interfaces).
Rules / Standards
- Color must always serve meaning, never decoration — assign color only for status, state, importance, interactivity, or (in emotional/atmospheric briefs) atmosphere; if it conveys nothing, remove it
- Neutral base, ~90% grayscale — background off-white/cool-gray, cards white, dividers subtle gray; reserve color for accents and data, not surfaces
- One primary accent color — reserved for "click here / this is important / this is active"; diluting it across multiple "primary" colors removes the visual anchor
- Red/yellow/orange are reserved for risk and urgency — red = error/blocker, amber/yellow = warning, orange = attention/deadline; green = success/completion; blue/purple = neutral functional state
- Saturation encodes importance — strong accent (primary actions) → medium tint (active states) → light tint (backgrounds) → desaturated (low importance)
- State colors follow universal mental models — progression runs cool→warm (backlog=blue → in-progress=amber → done=green); error=red, stalled=amber, neutral info=gray/blue
- Don't color numbers/text unless the color means something — red=negative, green=positive, blue/purple=link; otherwise leave neutral
- Match urgency-icon metaphor to the actual situation — time-based (stale/aging) → clock/hourglass; needs-review → dot/eye/flag; risk/caution → triangle/shield; actual failure → exclamation/X
Examples
- Kanban columns showing progression via subtle left-border color: blue (todo) → teal (preparing) → amber (active) → green (complete)
- A "this item has been sitting a while" state gets a clock icon and muted tint, not a red exclamation mark — reserve alarm iconography for actual failures
- Neutral gray avatar circles with initials instead of arbitrary rainbow avatar-background colors
Exceptions
Briefs with an explicit emotional/atmospheric direction (cozy, playful, dark, vibrant) override the 90%-grayscale default for the surface palette — e.g. warm amber backgrounds for "cozy," inverted dark palette for "brutalist dark mode." Even then, color hierarchy (saturation = importance), state-color mental models, and "color must mean something" still apply; only the base surface choice flexes.
The anxiety test. Before applying a warning/critical treatment, ask whether a user seeing it would feel informed or anxious. Most "needs attention" states are not emergencies — dial back visual intensity (icon choice, saturation, contrast) to match actual severity rather than defaulting to alarm treatments.