Set up a design system in an hour

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 explains why this order saves time.