A design system sounds like something a bank or a software company builds with a team of twenty. The idea is simpler than that: decide once how things look, write it down, and reuse it. For a business of five people it fits on a few pages and saves hours every month.

What goes in it

  • Colour: three to five colours, each with a job. One for the background, one for text, one accent for the thing you want people to press.
  • Type: one typeface, maybe two, with set sizes for headings, body text and small print.
  • Spacing: one base unit, for example 8 pixels, and everything in multiples of it.
  • Components: the pieces you use again and again. Buttons, forms, a price table, a quote layout, an email signature.
Every decision written down is one nobody has to make again under deadline.Why we hand over a system, not just files

Tokens: one name, every place

On the web, those decisions become named values, called tokens, that every page reads from. Change the token and every page changes with it:

:root {
  --bg: #e8e8e3;     /* the ground */
  --ink: #181715;    /* all running text */
  --accent: #bfb21a; /* the one thing to press */
  --gap: 8px;        /* the base unit */
}

The same names go in the brand guide, so the printer, the sign writer and the developer all work from one list.

Start with what you already makeDo not design components you might need. Collect the ten things you produce most often and make those consistent first.

A small system will not make a business look good by itself. It makes sure that once it does, it keeps looking that way.