Design
Building Color Systems That Survive Contact
Every brand guideline PDF has a color page. Five or six swatches, hex values, maybe a note about which one is "primary." And then six months later the brand is living in the world, and the blue is four different blues, the accent has crept onto every button, and the accessibility audit reads like a crime report.
The palette did not fail. The palette was never a system. After rebuilding color for three brands in the past year, including the full identity refresh for Møller, here is what we now consider the minimum for color that survives contact with reality.
Roles, not swatches
The single biggest upgrade is naming colors by job instead of by hue. Not "Blue 600" as your only vocabulary, but a semantic layer on top: surface, ink, accent, positive, warning. The raw scale still exists underneath, but nobody designing a screen or a shelf wobbler should be choosing from 40 raw values.
For Møller, the semantic layer is what let a Copenhagen-minimal palette flex across packaging, a web store, and retail signage without drifting. The rule "accent appears once per composition" is enforceable. "Use the orange tastefully" is not.
- Foundation scale: each hue in 10 to 12 steps, generated in a perceptual color space so the steps feel even.
- Semantic tokens: roles mapped to scale steps, documented with usage rules and forbidden pairings.
- Mode maps: explicit light and dark assignments. Dark mode is a remapping, never an inversion.
Build the scale in OKLCH, thank yourself later
We moved scale generation from HSL to OKLCH last year and will not go back. HSL lies about lightness: a yellow and a blue at the same HSL lightness value are wildly different to the eye. OKLCH is perceptually uniform, so a 10-step scale has visually even steps, and, critically, two colors at the same OKLCH lightness have predictable contrast behavior.
The practical payoff: we can hold lightness constant and rotate hue to create sibling palettes that all pass the same contrast checks. When Northwind needed seasonal campaign palettes that behaved identically in their design system, this is literally how we made them. One afternoon, four palettes, zero accessibility regressions.
Contrast is a design constraint, not a QA step
If contrast checking happens at the end, you lose. The failing combinations are already in the comps, the client has already fallen for them, and now accessibility is framed as the thing that ruined the design. We build the pairing rules into the system itself: every semantic token documents what it may sit on. Ink-on-surface pairs are pre-validated. The tool cannot offer you an illegal combination because illegal combinations are not in the palette picker.
This reframes the conversation entirely. Nobody debates contrast ratios in review because there is nothing to debate. The system already settled it, the way a grid settles alignment.
The part everyone skips: governance
A color system decays through a thousand small exceptions. The campaign that needed "a warmer version" of the accent. The partnership lockup that imported someone else's red. Our rule with clients is simple: exceptions are fine, but they get named and added to the system, or they die with the campaign. Unnamed colors are how a five-color brand becomes a nineteen-color brand without anyone deciding it should.
A good color system is not the fun part of identity work, and it will never win the applause that a logo reveal gets. But it is the difference between a brand that looks intentional in year three and one that looks like it was decorated by committee. Ship the operating manual, not just the mood board.
Building something this could apply to?
We take on a small number of flagship projects each quarter.
Start a project