What I want from a design system

Most small studios do not need a “design system”. They need a kit.

A design system, in the proper sense, is a substantial piece of infrastructure. Documented components. Versioned tokens. Code-and-design parity enforced at build time. A team to maintain it. The companies that genuinely have one tend to have several full-time people whose job is to keep it from drifting. Atlassian, GitHub, Shopify, IBM, Spotify. Their systems exist because the cost of not having one is higher than the cost of running one. Different problem from what a five-person agency or a two-person SaaS startup is dealing with.

What most small studios actually need is a kit. The difference matters.

A kit is the set of decisions a studio has already made, written down once, applied consistently. Two typefaces, with the weights you have licensed. A colour palette of five swatches, with hex values and accessible pairings noted. A spacing scale. A grid. A set of button styles. A short set of voice guidelines. None of it needs versioning. None of it needs a Storybook. It can live in a single Figma file and a single CSS file. It needs to be readable in twenty minutes by a new freelancer.

The kit is what most “design systems” are pretending to be, and what most clients actually need.

When does a kit become a design system? Roughly: when there are more than three engineers writing UI code in parallel, or more than two designers shipping interfaces in parallel, or when the cost of a designer making the wrong call on a button starts to be measurable in support tickets. Below that threshold, the system is overhead. Above it, the kit is debt.

The studios that I see making this mistake most often are the ones who have read a lot about design systems and have applied design-system thinking to a client who has six pages and one designer. The deliverable, however well-built, never gets used, because nobody on the client side has the time to learn it.

What a useful kit looks like, on the page:

Type
- Display: Söhne, 600. Used on H1 and H2 only.
- Body: Söhne, 400. Used on everything else.
- Sizes: 12, 14, 16, 20, 28, 40, 64. Nothing in between.

Colour
- Ink: #1A1614 (body text)
- Paper: #FBF7F0 (page background)
- Clay: #B95C3D (accent, used sparingly)
- Ash: #E5DED2 (dividers, borders)

Spacing
- 4, 8, 12, 16, 24, 32, 48, 64, 96. Nothing in between.

Voice
- Direct. Low jargon. UK English.
- "We" for the studio. "You" for the reader.

Twenty lines. Most of the small business briefs I see could ship a more consistent product if they had this written down once and applied with discipline, than if they had a hundred-page Figma library that nobody reads.

For the studios that genuinely do need a full design system, the references that have aged best are Atlassian’s, GitHub’s Primer, Shopify’s Polaris, and IBM’s Carbon. All four are publicly documented enough that the studio can read how they are maintained without having to guess. Brad Frost’s Atomic Design is the single book on the underlying methodology.