Skip to content
Website glossary· Planning and building a site

What is a design system?

A design system is the saved set of colours, fonts, spacing and reusable pieces (buttons, cards, forms) that every page of a site is built from.

Why it matters for a small business site

It keeps a site consistent as it grows, so every new page looks like it belongs, and it makes changes quicker, because you decide once and reuse the decision.

How to check yours

  1. Put three of your pages side by side: do the buttons, headings and spacing match?
  2. Count the button styles and text sizes in use. More than a handful usually means things have drifted.
  3. Check your brand colours are written down with their exact colour codes.

What good looks like

For a small business it can be small: one main colour and a few neutrals, two fonts with set sizes, one set of spacing sizes, and one style each for buttons, cards and forms, written down and used everywhere.

Common mistakes

  • Picking colours by eye on each page, so there are five slightly different blues.
  • A new button style for every campaign.
  • A thick rulebook nobody follows.
  • No rules for how things look on phones.

In SketchXFlow

Your site's colours, fonts, spacing and building blocks, saved once so every page and every edit uses the same ones.

Put it into practice

Try it on a design of your own

SketchXFlow saves your brand’s colours and fonts once, so every page it designs, and every later edit, uses the same ones.

Try:
Not a page?LogoEmailVideo