Does a small website need a design system?

Below five pages, a set of conventions is enough. From ten pages upward the system earns back the time it cost, particularly if the site is going to grow or ship in several languages.

How does it differ from a brand manual?

The manual describes how things should look. The system is the code that makes them look that way. A PDF can never fail a build, and that function is what holds the expression together over time.

How is dark mode handled?

Every token carries one value for light mode and one for dark. Contrast is calculated on both, so one theme can never end up worse than the other.

Who owns the design system after launch?

You do, and it lives in your repository. It is built so another developer can take over: values in one place, components documented, and the check running as part of the build.

How often does a design system need redoing?

Rarely in full. Tokens change when the brand does, and components get added as they are needed. A system that needs rewriting every other year was built for a single campaign.

Can a system be introduced on an existing site?

Yes, one page type at a time. Start with tokens and the most-used components, switch the check on for the directories already converted, and expand from there.

When a design system pays for itself

Torn StudioPublished 2026-08-273 min read

Torn Studio is an AI agency that builds websites, digital products and content. Unconventional.

Short answer

A design system consists of tokens for color, typography and spacing, components built from them, and a build check that fails code carrying loose values. In our experience it pays for itself around the tenth page, or the second time a brand has to change across a whole site.

A design system is usually described as a collection of components. The more decisive part is the rule about where values are allowed to live, because that rule decides whether the system still holds six months later.

What the system actually contains

Four layers, and the last one is what separates a system from a folder of files.

Tokens: every color, spacing step, radius and type size defined in one place
Primitives: buttons, cards, headings and fields built from tokens
Blocks: finished sections that pages are assembled from
A build check that stops raw values reaching page code

The check is what makes the system true

A system that exists only as a document drifts apart, because typing a color value is always faster than looking up the right token. This site runs that check: a build step reads the code and fails the build on the first raw hex or pixel value outside the design system. After that the question stops coming up.

Contrast is calculated before a color is used

Every color pair in the system is checked against WCAG AA, which requires at least 4.5:1 for body text. Because contrast is calculated at the token level, a page further down the line can never become illegible — the combination that would cause it does not exist.

The size at which it pays off

Below five pages a system costs more than it returns. At ten pages it is roughly even. At 30 pages and nine languages it is the difference between a day of work and a week when something has to change everywhere, which is the arithmetic we ran for this site.

Small screens belong to the system

Every component is designed for 320 pixels first and grows upward. The tests run each page type at nine widths from 320 pixels up, and a page that scrolls horizontally fails the build. That is cheaper than repairing a broken phone layout after launch.

Evidence

What this article rests on — a measurement we took, a dated source, or a decision we made and what it cost.

Decision2026-08-26
Contrast is enforced as a build gate: a test recomputes every permitted pair of text and surface from the token file on each change and fails the build below WCAG AA 4.5:1.
What it cost: A color that looks better but measures worse cannot ship, so part of the palette is closed off by the arithmetic, and every change to the scale costs a re-run and often a re-tune of the tokens around it.

Common questions

Does a small website need a design system?: Below five pages, a set of conventions is enough. From ten pages upward the system earns back the time it cost, particularly if the site is going to grow or ship in several languages.
How does it differ from a brand manual?: The manual describes how things should look. The system is the code that makes them look that way. A PDF can never fail a build, and that function is what holds the expression together over time.
How is dark mode handled?: Every token carries one value for light mode and one for dark. Contrast is calculated on both, so one theme can never end up worse than the other.
Who owns the design system after launch?: You do, and it lives in your repository. It is built so another developer can take over: values in one place, components documented, and the check running as part of the build.
How often does a design system need redoing?: Rarely in full. Tokens change when the brand does, and components get added as they are needed. A system that needs rewriting every other year was built for a single campaign.
Can a system be introduced on an existing site?: Yes, one page type at a time. Start with tokens and the most-used components, switch the check on for the directories already converted, and expand from there.