Type and colour — the part stakeholders can name, and therefore the part they tweak. Every ‘just make it warmer’ lands here.
The surface is the layer everyone has an opinion about. A ‘friendlier’ font, the brand colour on one more button, text a smidge lighter ‘because premium’ — each ask is reasonable, and each one quietly costs you a voice, an accent, or a reader. The damage is never one big mistake; it’s the slow accumulation of small, defensible ones.
Concept 02 · Type
Two Fonts, Tops
The intent: one family across its weights. Maybe two if you want a real contrast of character. Past that it’s not a system — it’s a ransom note.
How it dies — in three acts
Headline
A clear subhead
Body copy doing the reading.
How you claw it back — the method
Count. List every font family actually in use. Brace yourself.
Keep two, at most. One workhorse for text, optionally one display for headlines. That’s the budget.
Replace the rest. Most ‘fonts’ were really asking for a weight, an italic, or some tracking. Give them that.
Lock the styles. Set them as text styles so the next font is a decision, not an accident.
Step 1 · the fonts in use
Why this works — weights inside one family were drawn to sit together; they give contrast without discord. Every new family is a new rhythm the eye reconciles instead of reads. Restraint here is the difference between ‘designed’ and ‘assembled.’
Concept 02 · Colour
The 60-30-10 Colour Rule
The intent: roughly 60% one calm colour, 30% a second, 10% an accent that does the pointing. The accent only works because it’s rare.
How it dies — in three acts
How you claw it back — the method
Sort. Group every colour into background (60), supporting (30), accent (10).
Demote. Anything in the 10% that isn’t the one action you want → move it to neutral.
Recolour. Repaint so the accent appears once or twice per screen, not everywhere.
Lock. Make the three roles tokens; new colours have to say which bucket they’re in.
Step 1 · the colours in play
Why this works — an accent is a pointing finger. Point at everything and you’ve pointed at nothing. 60-30-10 isn’t a law about exact numbers — it’s a reminder that emphasis is a budget, and you’ve usually already spent it.
Concept 02 · Access
Contrast & Legibility
The intent: text clears a contrast ratio — about 4.5:1 for body. Not ‘looks fine on my laptop at full brightness.’ The number, or it fails someone.
How it dies — in three acts
A heading you can read
Body text that should be legible
caption / secondary line
How you claw it back — the method
Measure. Run every text colour against its background through a checker. Not your eyes.
Raise. Darken or lighten until body clears ~4.5:1, large text ~3:1.
Re-check. Test on a cheap screen at low brightness, in daylight. That’s the real audience.
Bake it in. Make the passing values your tokens so ‘premium grey’ can’t come back.
Step 1 · the text colours
Why this works — low contrast doesn’t read as ‘sleek’ to the person who can’t read it — it reads as ‘this isn’t for me.’ Contrast is the one design choice that’s literally not optional: get it wrong and a chunk of your users simply can’t use the thing.
Concept 02 · Colour
Dark Mode
The intent: dark mode isn’t inverting the hex values. It’s re-tuning the whole value relationship — surfaces, elevation, accent — for a dark room.
How it dies — in three acts
How you claw it back — the method
Don’t invert. Start from a dark-grey base, not pure black, and build up.
Re-do elevation. In the dark, ‘higher’ = lighter surface, not a bigger shadow.
Re-tune accent & text. Soften white text to off-white; desaturate the accent so it doesn’t glare.
Lock both themes. Token every colour by role so light and dark stay in sync.
Step 1 · what got inverted
Why this works — on a dark screen the same value relationships don’t hold — pure black is harsh, big shadows vanish, saturated colours scream. Dark mode is a second design with its own rules, not a filter. Treat it like a reskin and it’ll feel like one.
The Crime Scene
Four type-and-colour crimes — tap the one that fails the most users.
two fonts
60-30-10
contrast
dark mode
Spot the crime — The Surface
11 quick ones. You’ve made at least half of these. No judgement.
Confession booth · Your worst surface crime?
The confession booth — deal yourself a sin
“
—
— anonymous designer (probably you)
You’ve learned the tells
You can hear it now — the ransom note of six fonts, the rainbow where the accent used to point, the grey that reads as ‘not for me.’ One family, one rare accent, a measured contrast ratio: the surface goes quiet, and the content finally speaks.
The Hall of Shame
The repeat offenders of type and colour. Tap a card for the crime and the fix.
The Ransom Note
‘This label needs its own font.’
tap to flip →
The Ransom Note
the crime
A new family for every little need, until the page looks like cut-out magazine letters.
the fix
Two families, tops — a workhorse and maybe a display. Let weights and italics carry the rest.
The Brand-Colour Everywhere
‘Make it more on-brand.’
tap to flip →
The Brand-Colour Everywhere
the crime
The accent painted on every team’s feature until it points at nothing at all.
the fix
60-30-10 — the brand colour as the rare 10% that makes the one action unmissable. Rarity is the impact.
The #999 Whisper
‘Grey looks premium.’
tap to flip →
The #999 Whisper
the crime
Light-grey body text that reads as ‘this isn’t for me’ to anyone who struggles to see it.
the fix
Clear about 4.5:1 for body, 3:1 for large text. Measure it — eyes and bright laptops lie.
The Inverted Dark Mode
‘Just flip the colours.’
tap to flip →
The Inverted Dark Mode
the crime
Pure-black backgrounds that vibrate, vanished shadows, an accent glaring like a hazard light.
the fix
A second design: dark-grey base, elevation by lightness, softened text, desaturated accent.
The Pushback Playbook
The questions you actually get about fonts, colour and contrast — with answers that hold up in the meeting.
The client wants their brand colour on everything. What do I do?
Explain that an accent is a pointing finger: point at everything and you’ve pointed at nothing. Show them 60-30-10 — the brand colour as the rare 10% that makes the action unmissable. They want impact; rarity is the impact.
Is dark mode just inverting the colours?
No — that’s the trap. Pure-black backgrounds vibrate, copied shadows vanish, and a saturated accent glares like a hazard light. Dark mode is a second design: start from dark grey, rebuild elevation (lighter = higher), soften the text and desaturate the accent.
How light can grey text actually be?
Light enough to look calm, dark enough to clear about 4.5:1 against its background (3:1 for large text). ‘Looks fine on my laptop’ isn’t the test — a contrast checker is. Then sanity-check it on a cheap screen in daylight, because that’s where your users actually are.
How many fonts is too many?
Two, tops — one workhorse for text, optionally one display for headlines. Past that it’s a ransom note. Most ‘I need another font’ moments are really asking for a different weight, an italic, or some tracking. Give them that instead.
My two fonts are both ‘nice’ but together they feel wrong. Why?
Two good fonts can still fight. Same x-height and contrast and they blur into one muddy voice; too far apart and they clash. Pair a neutral workhorse with one font that clearly differs in weight or character — then let weights, not new families, do the rest.
👁️
Up next · Part 3
Where the Eye Goes
Hierarchy and attention — the four ways the eye gets sent to exactly the wrong place.