What a landing page design system is
In product teams, a design system is a large library of components, code and documentation. For landing pages it can be much smaller. What matters is that it turns the brand into decisions a page can be built from: which colour a button is, how big a heading is, how much space separates two sections.
A good test: two people given the same brief and the same design system should produce pages that look like they came from the same company, even if the layouts differ.
Brand kit vs design system
| Brand kit | Design system | |
|---|---|---|
| Contains | Logo files, brand colours, typefaces, sample imagery | The same, plus roles, scales and rules for using them on a page |
| Answers | What does the brand look like? | How do I build a page that looks like the brand? |
| Colour | A palette of swatches | Each colour with a job: background, text, button, link, border |
| Type | Typeface names | Typefaces, weights and a fixed size scale |
| Spacing and shape | Usually missing | A spacing scale, corner radius, borders and shadows |
Most small brands already have a brand kit. Turning it into a design system is mostly a matter of adding roles and scales to what is already there.
What goes into one
- Colour tokens. Named colours with roles: page background, surface, primary text, muted text, primary action, accent, border.
- Typography. A heading typeface and a body typeface, the weights used, and a size scale with line heights.
- Spacing. A short scale of values, with one value reserved for the gap between sections.
- Corners and depth. The corner radius, border width and shadow style, and which components use them.
- Component notes. How buttons, cards, form fields and quotes look, described with the values above.
- Principles. A few sentences on tone and density, and what the brand never does.
This fits on one or two pages. It does not need to cover every possible component, only the ones landing pages actually use.
When you need one, and when you do not
A design system is worth the effort when:
- More than one person, or more than one agency or tool, makes pages for the brand.
- You publish pages regularly: one per campaign, one per product, or several variants for testing.
- Pages already look inconsistent and you cannot say which version is right.
- You run several brands and need to keep them visibly apart.
It is not worth it for a single page that will run once, or while the brand itself is still being decided. In those cases, a short list of colours and typefaces is enough; see how to keep landing pages on brand.
How to make one from what you already have
- Collect the pages and assets you consider most on brand.
- List every colour, typeface and size they use, then cut the list down to the ones you want to keep.
- Give each remaining colour a role and each size a name.
- Measure the spacing between sections and pick one value; do the same for corners and shadows.
- Write a few sentences on tone and the things to avoid.
- Build the next page strictly from the list, and fix the list wherever it was unclear.
How to keep it current
Treat each change as a new version rather than editing the rules in place without a record. That way you can tell which live pages were built under which rules, and roll a change out deliberately instead of finding out about it one page at a time.