Building a design system clients can actually extend
Design systems fail when only the agency understands them. Here is how we hand them over.
Maya Lindqvist1 min read
Every studio promises a design system. Few clients can use one six months after launch. The problem is rarely the components; it is that the system was designed for the people who built it, not the people who inherit it.
Fewer, better parts
We design a small set of blocks that cover every real page, then stop. Twelve to sixteen well-documented blocks are easier to learn than sixty clever ones, and they keep the site consistent as it grows.
One source of truth for tokens
Colours, type sizes, spacing and radii live in one place in code, with matching styles in Figma. When a brand colour changes, it changes everywhere at once, including in the Studio theme settings.
- Name tokens by role, such as canvas, ink and accent, not by colour
- Give every type size its own line height and spacing
- Keep dark mode in the same tokens, not in separate classes
Document decisions, not just components
A screenshot of a button tells you what it looks like. A sentence explaining when to use the secondary style tells you how to think. We write short decision notes for every block and keep them next to the code.
A design system is a set of decisions the next person does not have to make again.
Hand over in person
Before we leave, we pair with the client’s designers and developers to build a new page together using only the system. Whatever slows them down becomes our final round of fixes.
Written by
Maya Lindqvist
Design Director
Maya leads design at NexSanity. Before joining, she spent eight years shaping brands and product interfaces for SaaS teams across Stockholm and Berlin. She cares about type, restraint and work that ages well.
