Colour in the Wild
Anyone can make one screen look nice. A system has to survive the next hundred.
Six modules, six forces. On their own they’re tidy little rules. But a real interface doesn’t hand you one problem at a time — it throws all six at you at once, on a deadline, for a student squinting at their phone at 11pm. That’s the wild. (The teardown below runs in eight steps: two to set the scene, then one pass per force.)
So this is the exam nobody grades: take one honest, messy screen and rebuild its colour, pass by pass, until every force is answered and the thing that was a headache becomes a place someone actually wants to be. One teardown. Watch it, or drive it yourself.
- See a familiar failure whole — a “fun” screen that quietly works for no one.
- Repair it in the right order: value first, meaning last, everything in between.
- Watch six separate lessons click together into one calm, usable, inclusive interface.
- Leave with the checklist you’d actually run before shipping colour anywhere.
Same screen, two lives
This is the before and the after. Same layout, same content, same student — only the colour was rebuilt. The question is how you get from left to right — and in what order.
Rebuild one real screen
Meet Aarav’s study dashboard. A teenager opens it every evening to see where he stands before his tests. The first version is honest about how these things really ship: five colours someone liked, states told only in red and green, text you have to lean in to read. It looks lively. It helps nobody.
We’ll fix it in seven passes — and crucially, in order. Colour goes on last, not first.
The order is the whole trick
If you take one thing from six modules, take the sequence — because doing it out of order is how good colour still ships broken.
A good colour system survives reality.
Watch a beginner and a pro fix the same ugly screen and the difference isn’t taste — it’s order. The beginner reaches for colour first: a nicer blue, a softer green, a trendy gradient. The pro turns the colour off and asks the boring questions first. Does the screen have a spine in pure grey? Is there one clear thing to do next? Only then does hue go back on, and only where it earns its place.
That’s the sequence you just watched: value builds the structure, attention picks the one focal point, a palette gives every colour a job, contrast makes sure no one is shut out, a system names it so it survives the next rebrand, and meaning — last, never first — tunes the whole thing to feel like it’s on the user’s side. Skip forward and you’re decorating a broken skeleton.
So “in the wild” isn’t a harder version of the rules. It’s the same six moves, done in the same order, on a screen that’s allowed to be messy first. Get the order right and colour stops being decoration and starts being the quiet, invisible thing that makes a product feel like it was built by someone who cared.
⚠ What happens if you break the order?
Which force is failing?
You watched one teardown. Now spot the broken force in three new screens — tap the one you’d fix first.
The whole series, on one card
The checklist to run before you ship colour anywhere — six passes, in order.
✅ Before colour ships
Questions you actually ask
Everything, at once
Ten questions across the whole series — value, attention, palette, contrast, system, meaning — in seven formats, with layered hints. Served from the bank, never hardcoded. Pass this and you can walk any screen’s colour from mess to meaning.
You can audit colour through six forces.
You’ve gone from “what colour looks nice?” to “does this screen answer value, attention, palette, contrast, system and meaning — in that order?” That’s the whole series, and it’s a lens you keep for good.