summary: 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.
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
- **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.
