The unglamorous half of the craft — and the half that decides whether the product holds together.
Systems, content and the states nobody demos. This is where a product either coheres or quietly falls apart: in the forty-button ‘system,’ the lorem that lies about length, the blank loading screen, the empty-state cliff a new user falls off on their first visit. None of it is glamorous. All of it is what makes the thing feel finished.
Concept 04 · System
The Design System
The intent: one button, with real variants — not forty that happen to look similar. The whole point is one place to change it.
How it dies — in three acts
How you claw it back — the method
Audit. Find every button-like thing. Detached instances and copies included.
Define real variants. Primary/secondary/size/state — the actual axes, no more.
Re-attach. Swap every one-off for the component + right variant. Delete the orphans.
Tokenise. Colour, radius, spacing as tokens so one change still propagates.
Step 1 · the button graveyard
Why this works — a system’s value isn’t consistency for its own sake — it’s that one change reaches everywhere at once. Forty detached copies aren’t a system, they’re forty future bugs. The moment a component is ‘just this once’ tweaked, it stops being the source of truth.
Concept 04 · Content
Real Content vs Lorem
The intent: design with the real content — and its worst case. The longest name, the empty list, the angriest error. Lorem ipsum lies politely.
How it dies — in three acts
How you claw it back — the method
Get real strings. Pull actual content, or write the realest draft you can.
Find the extremes. Longest, shortest, empty, error, huge number. Design for those, not the average.
Re-flow. Drop the extremes in and fix what breaks — truncation, wrapping, empty states.
Test with junk. Paste garbage into every field before you call it done.
Step 1 · the fake content
Why this works — lorem ipsum is always the perfect length, which is exactly why it’s dangerous — it designs a layout that only works for content that doesn’t exist. Real content is messy, and the messy cases are where users live. Design for the worst string and the average takes care of itself.
Concept 04 · States
Loading States
The intent: show structure immediately. A skeleton of where content will be beats a blank screen or a lonely spinner — it says the thing is working, and what’s coming.
How it dies — in three acts
How you claw it back — the method
Throttle. Test on a slow, flaky connection. That’s where loading states earn their keep.
Show the shape. Replace the spinner with a skeleton that matches the real layout.
Reserve space. Size the placeholders so nothing jumps when content arrives.
Handle the worst. Add a real timeout/error state for when it genuinely doesn’t load.
Step 1 · the loading gaps
Why this works — a blank screen makes the user wonder if it’s broken; a skeleton tells them it’s working and shows what’s coming. Perceived speed beats actual speed — the same two-second load feels fast with structure and forever without it.
Concept 04 · States
Empty States
The intent: an empty state is a first impression and an instruction, not a dead end. ‘No data’ tells the user nothing. Show them what goes here and how to start.
How it dies — in three acts
No data
+
How you claw it back — the method
Find them all. List every empty/zero/error state. They’re the screens you never demo.
Say what goes here. One line: what this space is for, in plain language.
Give one action. The single button that gets them unstuck — ‘Add’, ‘Invite’, ‘Create’.
Add a little warmth. A small illustration or a human line, so empty feels intentional, not broken.
Step 1 · the dead ends
Why this works — empty states are the most-seen screens you never design — every new user starts there. ‘No data’ reads as ‘broken’; a prompt reads as ‘here’s how to begin.’ It’s the cheapest onboarding you’ll ever build, hiding in screens you treated as errors.
The Crime Scene
Four crimes that look fine in the mockup — tap the one that bites hardest in production.
the system
real content
loading
empty
No data
Spot the crime — One Source of Truth
11 quick ones. You’ve made at least half of these. No judgement.
Confession booth · Which do you quietly skip?
The confession booth — deal yourself a sin
“
—
— anonymous designer (probably you)
You’ve learned the tells
You can see the seams now — one component instead of forty, real worst-case content instead of tidy lorem, a skeleton instead of a void, a prompt instead of ‘No data.’ The unglamorous work is exactly what stops the product looking like ten people built it.
The Hall of Shame
The ghosts that show up when no real content does. Tap a card to flip it.
The Detached Component
‘I’ll just tweak this one.’
tap to flip →
The Detached Component
the crime
A component detached and edited until it’s no longer the source of truth — a future bug in a button’s clothes.
the fix
Keep one source; one change must reach everywhere. Forty near-identical copies aren’t a system.
The Lorem Trap
‘Copy’s coming later.’
tap to flip →
The Lorem Trap
the crime
A layout designed for perfect-length Latin that shatters the moment a real long name or a €1,299,999 price lands.
the fix
Design for the worst-case real string. The average takes care of itself.
The Blank Void
‘It’s only two seconds.’
tap to flip →
The Blank Void
the crime
A blank screen mid-load that makes the user wonder if it’s broken — so they tap again, or leave.
the fix
A skeleton of the layout. Structure makes the same wait feel fast.
The ‘No Data’ Cliff
‘There’s nothing to show yet.’
tap to flip →
The ‘No Data’ Cliff
the crime
‘No data’ — the most-seen screen for every new user, telling them nothing and reading as broken.
the fix
One line of purpose and a single button. Empty states are the cheapest onboarding there is.
The Pushback Playbook
The questions you actually get about systems, content and states — answered without hand-waving.
Nobody gave me content for the empty states. How do I design them?
Empty states are the most-seen screens you never design — every new user starts there. Don’t ship ‘No data.’ Write one line on what the space is for and add the single button that gets them started. It’s the cheapest onboarding you’ll ever build.
Real copy isn’t ready — design with lorem or wait?
Neither — design with the realest draft you can write, including the worst case. Lorem is always the perfect length, which is exactly why it lies: it builds a layout that only works for content that doesn’t exist. The 40-char name and the empty list are where users live.
How do I stop the design system becoming 40 near-identical buttons?
The moment a component is ‘just this once’ detached and tweaked, it stops being the source of truth. Audit the strays, define the real variants you need, re-attach everything, delete the orphans, and tokenise colour/radius/spacing so one change still reaches everywhere.
It’s blank for two seconds while data loads. Spinner or skeleton?
Skeleton. A spinner says ‘wait’; a skeleton shows the structure that’s coming, so the same two seconds feel fast instead of broken. Perceived speed beats actual speed — give the eye something to hold.
📞
Up next · Part 5
The Telephone Game
Handoff, feedback, scope and breakpoints — the four places a good design degrades on the way to shipping.