Design systems: typography, colour, spacing and icons¶

Exercise design-systems-annex.pdf · PDF

Friday, 17:00. A client calls: "We changed our brand. The app must be green instead of yellow, and the demo is tomorrow at nine." You open the file and click the New note button. Its fill is #F5C400. You click Save: #FFCC00. Which one is the brand yellow?

Nobody knows, and neither does the developer. The problem is not the repainting. The decision "our yellow" was never written down anywhere: it was typed, twice, differently. This page shows you where such decisions should live. Our example is NoteBox, a small notes app, and you will write its decisions once and never type a colour again.

Figma: frames, auto layout, styles, variables and components explains what those Figma tools are. This page answers the next question: what do you put in them?

The catalogue in the box¶

We go back to the LEGO factory from the Figma page. A LEGO set works because of three things in the box: the colour chart (every red brick is the same red), the moulds (every 2 × 4 brick is identical) and the building instructions (which brick goes where). Take one away and you have a bag of plastic.

A design system is the shared decisions of a product, written once and reused everywhere.

It has three layers:

flowchart LR
    T["<b>Tokens</b><br>the colour chart:<br>color/brand, space/16"] -->|"are used to build"| C["<b>Components</b><br>the moulds:<br>Button, Row"]
    C -->|"are placed according to"| R["<b>Rules</b><br>the instructions:<br>one main button per screen"]
    R --> S["<b>Screens</b><br>consistent, without<br>deciding everything again"]

If you know Java, you have met this idea already. Why write static final int MAX_USERS = 100 instead of typing 100 in twelve places? So there is one name to read and one place to change it. A token is that constant, for design.

You have seen real design systems. Material Design, which Google presented in June 2014, is a public one: tokens, components and rules at m3.material.io. This site is another. Count its fonts and colours: three fonts, a few flat inks, square corners, everywhere. Someone decided that once.

The term design token was coined around 2014 by Jina Anne and Jon Levine at Salesforce. Since October 2025 there is even a stable format, from a W3C community group, for moving tokens between tools.

A product makes four big kinds of visual decision: typography, colour, spacing and icons. Let us take them one by one.

Typography: few sizes, clearly different¶

Two words people mix up. A typeface is the design, such as Inter. A font is one cut of it, such as Inter Bold 28. NoteBox uses one typeface: Inter, drawn by Rasmus Andersson for screens.

A type scale is the short, fixed list of text sizes a product is allowed to use, each with a job.

Three rules keep the scale honest:

• One family, two at most. Every extra typeface is a new voice talking.
• Few sizes, clearly different. 16 and 15 are not two levels. They are a mistake.
• Lines you can read. Aim for about 45 to 75 characters per line (Robert Bringhurst, The Elements of Typographic Style, 1992) and a line height, the distance between lines, of around 1.5 times the text size for body text.

And one habit: the style is called Body, not Inter 16. The day you change the typeface, Body is still true.

Colour: roles, not hues¶

A colour role is the job a colour does in the interface: background, error, main action. A palette is a list of those jobs, not five colours that look nice together.

You start from what the interface must say (this is the action, this is an error), and only then pick the colours. Here is NoteBox, with each colour written as a hex code, the six-character value design tools use:

Three things to notice:

• The name is the job. danger survives a rebrand. red does not. And on-brand exists for a reason: white on that yellow is 1.64:1, unreadable, while #111111 on it is 11.49:1. The role makes the safe choice the obvious one.
• Mostly neutral. A rule of thumb borrowed from interior design, 60–30–10, says most of the screen is one colour, a good part is a second, and only a little is the accent. In NoteBox: surface, text, brand. If everything is yellow, nothing is.
• Dark mode is a second column, not a second design. Same nine roles, other values. That column is a mode. And you measure every pair again, because contrast rules get no night off.

Spacing: a pick, not an opinion¶

The Figma page showed you that a gap is a number in auto layout. Which numbers?

A spacing scale is the short, fixed list of distances a product is allowed to use.

NoteBox uses 4 · 8 · 12 · 16 · 24 · 32: multiples of 4, with bigger steps as it grows. Material Design builds on an 8 dp grid for the same reason: fewer choices, and every choice visibly different.

Is a gap of 14 wrong? It works. But 14 next to 16 is a difference nobody sees and everybody has to remember. A scale turns "how much space?" from an opinion into a pick. It also keeps the proximity rule cheap to follow: small steps inside a group, bigger steps between groups.

Icons: one family, one grid, one stroke¶

An icon set is a collection of icons drawn to the same rules, so they look like they belong together.

Three rules:

• One family. Outline with outline, filled with filled. This site uses one family, Lucide. Google has Material Symbols. Apple has SF Symbols, for Apple platforms only.
• One grid, one stroke. In NoteBox every icon is drawn on a 24 × 24 square with a stroke of 2, with round ends. An 18 px icon with a thinner line next to a 24 px one looks like a bug.
• Never alone. An icon-only button still needs a name. Unless the icon is universal (search, close, back), show the word too.

Try it: what do a floppy disk, a heart and three dots do, in an app you do not know? Save, probably. The heart: like, favourite, health? The three dots: "something".

Build it in Figma¶

Now you put the decisions where they cannot drift. The handout has these steps as a checklist, and the starter file is on Classroom. Figma moves some buttons between releases, so if a label is not where described, look near it in the right panel.

First, the one question that catches everyone: which tool holds what? The Figma page explains the difference. In practice:

Variables: the colour chart¶

1. Click the empty canvas. In the right panel, open Local variables, then Create variable → Color. Rename the collection NoteBox.
2. Create the nine colours: color/surface, color/text, color/text-muted and so on. The slash makes a group in the list. Type the hex, and never use the eyedropper: the eyedropper is how near-identical greys get in.
3. Create the numbers with Create variable → Number: space/4 to space/32, and radius/control = 8.
4. Apply them. Select a button, go to Fill, click the library icon (four dots) and pick color/brand. On a gap or padding field, use the variable icon and pick a space/....

The field now shows a name, not a number. That is how you can tell: bound values show the variable's name, typed ones show a hex.

Text styles: the type scale¶

Select a title, go to Typography, click the four-dot icon, then +, and name it Title. Repeat for Heading, Body, Body strong, Label and Caption. From then on, you apply Label to a text instead of choosing a size. You are not fixing one text: you are removing a decision that should never have been made twice.

A button with variants: the mould¶

1. Select a finished button and press Option+Cmd+K / Alt+Ctrl+K. Rename it Button. Check it uses color/brand, color/on-brand, Body strong and radius/control.
2. Add a variant and name the property Type, with three values. Primary is the original. Secondary has no fill and a 2 px stroke in color/text. Danger has no fill, with stroke and text in color/danger.
3. Add a second property, State: Default and Disabled. Disabled is the same variant at 40 % opacity: dimmed, not removed. You now have six variants in one component set, the dashed purple box that holds them all.
4. Select the label inside a variant and, next to the text content in the right panel, choose Create property. Name it Label. Now each instance shows a Label field, with no double-clicking into layers.
5. Drag Button onto the screen from the Assets panel (or from Resources, Shift+I). Pick Type and State in the right panel, and type the label.

Spot what drifted¶

In the handout, two raw NoteBox screens break the spec in six ways. Your tool is the right panel: click a layer and read its numbers. Look in five places: colour, corner radius, type, space and icons. How do so many mistakes get into two screens by one person? Nobody chose them. Somebody typed them from memory. Typed values drift. Named values cannot.

The proof¶

Now the client calls again. Open your local variables, and change color/brand to #22C55E.

flowchart LR
    V["<b>You change one variable</b><br>color/brand = #22C55E"] --> B["<b>Button component</b><br>its fill uses color/brand"]
    B --> I["<b>Every instance</b><br>New note, Save..."]
    I --> S["<b>Both screens turn green</b><br>in five seconds"]
    S --> M["<b>You still measure</b><br>is the label readable?"]

Every screen follows at once. That is the whole lesson in five seconds. But look at the last box. #111111 on that green is 8.29:1, fine. White on it would be 2.28:1, a failure.

To see dark mode, add a mode in the Local variables window, rename the columns Light and Dark, and fill in the dark values. Then select a screen, go to Appearance and apply Dark. Extra modes need an Education or paid Figma plan, and a file in your own drafts may be on the free Starter plan, so check where your file lives if the option is missing.

Key takeaways¶

• A design system is a product's shared decisions, written once. Its three layers are tokens, components and rules: the colour chart, the moulds and the instructions.
• A type scale is a short list of sizes, each with a job. Use one typeface, and name styles by role (Body, not Inter 16).
• A palette is a list of jobs. Name colours by role (danger, on-brand), and treat dark mode as a second column of values.
• A spacing scale turns "how much space?" into a pick: 4, 8, 12, 16, 24, 32.
• An icon set has one family, one grid and one stroke, and an unclear icon needs its word.
• In Figma, colours and numbers go in variables, typography in text styles, pieces in components. A system makes changes instant, but you still measure the result.

Quick check¶

The pieces exist now. But which piece goes where? Next: Controls, menus and messages, where you choose the right control for each job.