# Start a client site with tokens, not pages

> Ten minutes on colour, type and space saves days of restyling later. How we set up a new site.

A new site in Lettern opens on the design system, and that is where we start. Half an hour on colour, type and space saves days of restyling later, because every page and component reads from those values.

## Colour

Name colours by what they do, not by what they look like: background, surface, foreground, muted, line, and your one or two brand colours. A token called `muted` can change shade without a single page needing an edit. A token called `grey-500` can't.

Give each colour its dark value at the same time. Dark mode is then finished, and you never have to think about it page by page.

## Type

Pick one family, or two if the brief really asks for it. Fonts are self-hosted, so you can import from Google Fonts in the admin and visitors never contact Google. Then set a scale of six or seven sizes. Fluid sizes with a minimum and a maximum mean you rarely need an override for phones.

Set your element styles next: headings, body text, links and buttons. Those are the defaults, so anything an editor drops on a page already looks right.

## Space

Use a small spacing scale and a token for the padding of a section. When a client asks for more air between sections, you change one value and every page follows.

## Then components

Five components cover most sites:

- A header, with the main menu in it.
- A footer.
- A section heading, with properties for the title and the lead.
- A card, with properties for the image, title and link.
- A call to action.

Give each one properties for what editors should fill in, and leave everything else inside the component. A component is synced by default, so a change reaches every page that uses it. After this, building a page is mostly assembly.

## Why this order works

Tokens are the cheapest thing to change, and pages are the most expensive. If you start with pages, every decision you make later has to be repeated on each of them. If you start with tokens, a rebrand is a change to a few values, and that includes the one your client asks for a week before launch.

Everything here is stored as text in `content/design/tokens.json` and `content/collections/components/`, so it goes through git like the rest of your work.

The [design system documentation](https://docs.lettern.org/design/design-system) lists every token and element style, and our [one-hour guide](https://lettern.org/resources/design-system-in-an-hour) walks through the same steps.

---
Source: https://lettern.org/blog/tokens-before-pages · Updated 2026-10-30