# Set up a design system in an hour

> The order we use for tokens, components and templates on a new client site, so that every page after it is mostly assembly.

This is the order we use on a new site. Work from the top and stop when the site looks right. You can do all of it under **Design** in the admin, or by editing `content/design/tokens.json` if you prefer a text editor.

## 1. Colours: 10 minutes

Add colours by role: background, surface, foreground, muted, line, and one or two brand colours. Set a dark value for each while you are there. The preview next to the list shows your real site in light and dark.

## 2. Type: 10 minutes

Import one family under **Fonts**. It is copied to your site, so visitors never contact a font service. Point the font token at it, then set a scale of six or seven sizes. Give the larger sizes a minimum and a maximum so that they scale with the screen.

## 3. Space and shape: 5 minutes

Set a small spacing scale, a page gutter and one token for the padding of a section. Pick a radius or two. Consistency matters here more than the exact values.

## 4. Element styles: 10 minutes

Under **Elements**, style headings, paragraphs, links, inputs and tables. Under **Buttons**, define your variants. A variant you add here appears in the block's picker for every editor.

Styles in this layer are defaults, so a block's own style always wins.

## 5. Header and footer: 15 minutes

Create them as components. Use a Repeat block over your menu, so that editors change the navigation in **Navigation** and never touch the design. Add the header and footer to a page template.

## 6. A section heading and a card: 10 minutes

Build each once on a page, then save it as a component and add properties for what changes: the title, the image, the link. Editors fill in the properties and the design stays as you made it.

## What to skip

Don't build a component until you have needed the same thing twice. Don't add a token for a value you have only used once. A small system that gets used beats a large one that doesn't.

## When you are done

Everything you just made is text. Commit it, and you have a starting point for your next site as well. The [blog post on starting with tokens](https://lettern.org/blog/tokens-before-pages) explains why this order saves time.

---
Source: https://lettern.org/resources/design-system-in-an-hour · Updated 2026-10-30