"Design system" sounds like something that needs a dedicated team and a Storybook with 400 components. It doesn't. At its core, a design system is a shared answer to the question "how do we make things look and work like us?" – and a ten-person company benefits from that answer as much as a thousand-person one.
The problem it solves
Without a system, every new page, slide deck or email is designed from scratch. Buttons come in four blues. The website, the app and the sales deck feel like three companies. Developers rebuild the same card component again and again. Nobody is sure which logo file is current.
The cost is invisible because it's spread across everyone's week. In our experience it adds up to several weeks of wasted time per year – and a brand that never quite feels coherent.
What a right-sized system contains
1. Foundations
- Colour: a small palette with clear roles (brand, text, background, states)
- Typography: two families, a type scale, line-heights
- Spacing & layout: a spacing scale and a grid
- Iconography: one style, one library
2. Components
Only the ones you actually use. For most companies that's 15–25: buttons, inputs, cards, navigation, modals, tables, alerts, tags, avatars, and a handful of page sections.
3. Patterns
How components combine: a form layout, a pricing table, an article page, an empty state.
4. Guidelines
Short and practical: tone of voice, when to use which button, accessibility basics, do's and don'ts with examples.
5. Assets
Logos, templates (presentation, social, document), photography style, illustration style – in one place, versioned.
Figma and code, in sync
The magic happens when the design system exists in both Figma and code. Design tokens (colours, spacing, type) are exported once and used everywhere; each Figma component maps to a coded component. Designers and developers stop translating and start building.
For Next.js projects we implement tokens as CSS variables and components in React with Tailwind – small, documented and tested. Marketing teams get the same tokens as templates.
How to start without boiling the ocean
- Audit what exists: screenshot every button, colour and text style in use. It's humbling.
- Decide the foundations – one afternoon with the right people.
- Build the ten most used components in Figma and code.
- Use it on the next project and improve it as you go.
- Write down the decisions as you make them.
A first version for a small company takes two to four weeks. It pays for itself the first time someone builds a landing page in a day instead of a week.
Signs you're ready
- You're about to redesign your website or build an app.
- More than one person creates customer-facing material.
- You've said "can you make it look like the other page?" in the last month.
If any of those are true, a design system isn't overhead. It's the foundation your next three projects will stand on.
