Guides / 07—08
Build palettes by role, not swatch count
Choose surfaces, text, borders and accents, then test the actual touching pairs.
Start with content
Choose body text and the main background first. Add secondary surface, button, link, border and state colors only for real needs. Each extra color creates pairs to review in default and interactive states.
Name clear tokens
Names such as text-primary, surface-muted and border-input age better than blue-500 when a hue changes. Keep approved pairs with their HEX values, roles and actual contrast ratios.
Avoid automatic harmony claims
This site's variation tool mixes sRGB channels with white or black to offer five candidates. It is arithmetic, not an aesthetic judgement or accessibility pass. Test each candidate in its role and against its background.