Color systems that stay on brand

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.