Before: palette as decoration
Several brand colors fill unrelated blocks, making the headline, proof, and action compete at the same intensity.
Core idea
Color is a role system, not a favorites list. Define surface, ink, brand, action, and signal colors so each hue earns a clear job.
- Assign five roles first: surface, ink, brand, accent or action, and signal. Raw hex values come after the jobs are named.
- Change value and saturation before adding another hue. Many palettes need a quieter tint, not a new color family.
- Keep brand, action, and warning colors separate. Reusing one hue for all three makes the palette ambiguous.
- Back every state color with value, text, icon, or shape so meaning still reads without hue.
Visual example
A brand palette works when each color has a job.
Northline Supply
Field notes for better shop displays
A brand guide preview for retail teams planning summer windows.
Open guide
Before and after
Keep brand energy without making every block loud.
After: palette as system
The neutral base keeps the claim readable, brand color appears with purpose, and the action owns the strongest accent.
Worked example
Why the improved version works
The improved card gives surface and ink the quiet but essential jobs. A neutral surface carries the space, dark ink carries the message, and the brand hue no longer has to make the text readable by itself.
The accent role is reserved for action, not scattered across supporting details. Brand recognition stays present, but the most saturated color points to the next step.
Common mistakes
Watch for these patterns
Too many raw hues are added before surface, ink, action, and signal roles are named.
Brand color is reused for warnings, so identity and urgency collapse into the same cue.
State meaning depends on hue alone, failing in grayscale, low contrast, and color-vision differences.
Dark mode is treated as inversion, so tokens keep their names but lose readable value contrast.
Visual comparison
Which campaign uses color as a system?
One campaign treats color as decoration. The other gives surface, ink, brand, and action colors separate jobs.
Select an option to see the design reasoning.
Practice completed
Next lesson
Layout and Composition
Shape the scan path with balance, grids, alignment, and tension.
Small exercise
Diagnose color roles
Pick the campaign card where color has clear jobs, then find the area where brand color is being used as decoration instead of direction.