Design tokens: how your software and website stay consistent

Open the website of an average small business, then its online booking page, then the invoice you receive as a customer. You will often see three slightly different blues, two typefaces and buttons that look different in every place. Nobody planned it that way. It happens because each choice was once made separately, by a different person at a different moment.

Fixed design agreements prevent that. In the trade they are called design tokens. In this article we explain what they are, why they save you time and money, and what you can look for as a business owner, even if you never write a line of code.

What are fixed design agreements?

A design agreement is a name for a choice you make once. Instead of entering a colour code in every place, you agree that there is a colour called brand colour. Instead of deciding per screen how much room sits between two blocks, you agree that there is a small, medium and large spacing.

Every screen, button and email then uses those names. The actual value lives in one place. If you want to change the brand colour, you change that one agreement and everything that refers to it follows automatically. You no longer have to hunt for places you forgot.

Which agreements belong in the set?

A useful set is smaller than you might think. For most businesses these groups are enough:

• Colours: text, background, surfaces, borders, the brand colour and a few colours for messages (success, warning, error).
• Typefaces and text sizes: one or two typefaces and a fixed range of sizes for headings, body text and small notes.
• Spacing: a short range of fixed measures for space between and inside blocks.
• Corners and shadows: a few fixed values for how rounded corners are and how strongly something floats above the page.

More is rarely better. Twenty shades of grey or ten kinds of spacing make the system less clear, because nobody knows which one to use when. A few agreements that everyone knows work better than many that nobody remembers.

What do you gain?

A recognisable business everywhere

A hair salon customer sees the website, books an appointment, receives a confirmation email and later pays through a link. If those moments look the same, it feels like one business. That builds trust, especially at the point where someone leaves their details or money.

Faster changes

A restaurant that refreshes its branding wants the new colours everywhere at once: on the website, on the ordering screen and on the receipt. With fixed agreements that is one change in one place. Without them it means searching through dozens of screens, with a good chance an old colour survives somewhere.

Fewer mistakes and less debate

Whoever adds a new screen does not have to decide again how large a heading is or which blue to use. That question has already been answered. It saves time when building and when checking, and it stops two people doing the same thing slightly differently.

More readable and accessible

Once colour combinations have been checked for sufficient contrast, that holds for every place they are used. It helps visitors with poorer eyesight and anyone looking at a phone outside in the sun. A dark mode also becomes simpler, because you can record a second value for each agreement.

How do you approach it?

You do not need to wait for a large design system. Start with what you already have:

1. Take stock: put your website, quotes, emails and software side by side and note which colours, typefaces and sizes you see.
2. Choose and cut: decide per group which values stay. Five blues become one or two.
3. Give names: name an agreement after its role (brand colour, text, background), not its value. The name then stays correct when the colour changes.
4. Record it in one place: a short document with the agreements, and in the software and website one source they come from.
5. Agree who changes it: new agreements are added only when truly needed, and always in that one place.

If you work with a company that builds your website or software, ask how they handle this. A good answer is concrete: where the agreements live, what happens when you change the brand colour and how many screens then have to be updated by hand.

How we work with them

Our software per industry and the websites we build use the same set of design agreements. That way the booking button on your website matches the booking screen, and the invoice matches the client portal. During setup we put your colours and typeface into those agreements. If your branding changes later, we adjust the agreements and the screens follow.