The Rest
Before the First Pixel
Where do you start?
Not with a color palette. Not with a component library. Not with a Figma file. You start with meaning — the semantic decisions that every visual decision will be built on top of.
Most designers get this backwards. And the cost doesn't show up immediately. It shows up later.
The Problem With Starting in Figma
Most design systems start as a Figma file. A designer opens a blank canvas and begins making visual decisions — a color palette, a type scale, a button style. It feels productive. Things are being made.
But visual decisions made without semantic foundations are guesses. The color palette has no roles assigned. The type scale has no hierarchy tier definitions. The button style has no contract. These decisions look like a design system. They aren't one yet. They're a collection of visual choices waiting for meaning to be retrofitted onto them.
The cost shows up when a second designer joins and uses the button style for navigation elements, because nobody defined what buttons are for. When a third color appears on a specific screen and nobody remembers why, because the role system was never established. When spacing looks inconsistent across the product because different designers made different local decisions about gaps that were never assigned to tiers.
The fix is simple: invert the order. Meaning first. Visual expression second. The Figma file comes after the semantic layer is established — and when it does, every decision in it has a reason.
Two Scenarios, Same Questions
Whether you're building from scratch or reviewing something that exists, the questions are identical.
Starting from scratch: You have freedom. The risk is that freedom becomes arbitrariness — decisions made by aesthetic preference rather than semantic intent. The methodology gives freedom a structure. Each decision narrows the possibility space for the next.
Reviewing an existing system: You have decisions — most of which were never explicitly made. They accumulated. The risk is that you optimize what's there rather than asking whether what's there is right. The methodology gives review a standard: not "is this inconsistent?" — which is a symptom — but "what rule was this trying to follow, and is it following it?"
The Five Decisions Before Any Component
Atomic design tells you how to organize components. It doesn't tell you what they mean. Before defining a single button or card, five foundational decisions need answers:
1. Emotional register. What does this product feel like to use? Three words. Emotional, not visual. What must it never feel like? These aren't preferences — they're filters. Every decision that follows gets tested against them.
2. Entity vocabulary. What are the first-class objects? Not components — domain objects. In a CRM: customers, deals, contacts. In a project tool: projects, tasks, members. Every first-class entity gets its own route, its own page, its own set of actions. This is information architecture before it's navigation architecture.
3. Action vocabulary. What classes of action exist? Destructive, constructive, mutative, navigational, background. For each: what's the confirmation gate, the feedback sequence, the reversibility window, the error contract. This is the behavioral design system — defined here, before any component is designed.
4. Spatial system. The spacing scale. The hierarchy tiers. Not as visual values yet — as structural decisions. How many tiers of separation exist? What is the ratio between them? These become the skeleton's proportions.
5. Elevation and treatment semantics. What categories of element exist in the visual hierarchy? How many elevation levels? What does each level mean — surface, component, overlay, modal? What treatments mark what categories?
These five decisions are the foundation that everything else inherits from. Get them right, and the system builds itself. Skip them, and you'll spend months fixing problems that shouldn't exist.
The rest of this book is about those decisions — each one, in depth, with the contracts they create and the consequences of breaking them.