Documentation

Color Usage Guidance.

Practical rules for applying color systems consistently across websites and applications.

Primary color

Reserve the primary color for the most important actions, active navigation, selected states, and key brand moments.

Use secondary colors to support the primary system without competing with the main call to action.

Use green-family status colors for confirmed, completed, approved, or successful outcomes. Pair color with text or icons.

Use warning colors for conditions requiring attention but not necessarily indicating failure.

Use danger colors for destructive actions, failures, blocking errors, and irreversible consequences.

Choose body text colors with strong contrast against the background. Avoid relying on muted gray for essential information.

Use surfaces to establish hierarchy between the page background, cards, panels, dialogs, and elevated content.

Borders should usually be quieter than text. Confirm that interactive boundaries remain visible in all themes.

Dark mode is not simply inverted light mode. Re-evaluate contrast, saturation, elevation, borders, and status colors.

Never use color as the only way to communicate state. Add labels, icons, patterns, or other visible cues.