CULRS
← Back to color stories

Product color

Color palettes for apps: design the system, not just the swatches

An interface palette needs roles, states, and contrast rules. A beautiful row of colors is only the beginning.

#F8F9FA
#CED4DA
#4CC9F0
#4361EE
#1B263B

Start with meaning

Map colors to roles before components: canvas, surface, text, muted text, border, action, success, warning, and danger. This keeps the system understandable when the UI grows.

A palette can be expressive without making every state expressive. Let the product voice live in the surfaces and accents, while feedback colors stay predictable enough to scan.

Test the quiet states

The difficult moments are disabled controls, focus rings, empty states, error copy, and text over images. Check those states early, not after the visual layer is already locked.

CULRS is useful for the mood pass. The next pass is a contrast check against the actual component sizes, type weights, and interaction states.