A good palette scales: one accent, a set of neutrals, and semantic colors for states. Name tokens by function, not hue—accent/primary, surface/raised, text/muted.
Build the core
- Choose one main accent and a calm secondary; avoid competing loud colors.
- Define neutrals from background to foreground (e.g., surface, panel, border, text).
Semantics over shades
- Map states (
success, warning, danger, info) with accessible contrast.
- Keep hover/active states lighter or darker by a consistent step.
Guardrails
- Limit accent usage to links, CTAs, and highlights.
- Test dark-on-light and light-on-dark combinations early to prevent rework.
Swipe . Photo
