7 min read
Building a design system from scratch
A practical guide to creating a cohesive design system that scales with your product.
Process
Claire Smith
Senior UX Designer
I help teams ship products faster, with research backed design that keeps users coming back.
Starting with foundations
A design system is not a style guide and it is not a component library, although it includes both. It is a shared language that connects every person who touches a product, from designers and developers to product managers and copywriters. Getting it right from the start saves months of rework later.
I begin every system with three things: a colour palette, a type scale, and a spacing grid. These are the atoms from which every molecule and organism will eventually be built. Rushing past them to build fancy components is like decorating a house before pouring the foundation.
Tokens before components
Define semantic colour tokens such as surface-primary, text-muted, and border-default rather than raw hex values
Build a modular type scale with a consistent ratio between sizes
Establish a spacing unit, usually 4 or 8 pixels, and use only multiples of that unit throughout
Document naming conventions early so the team speaks the same language from day one
Growing the system
Once the foundation is solid, components start to emerge naturally. Buttons, form inputs, cards, modals. Each one should be designed in context, tested in real layouts, and documented with clear usage guidelines. A component without context is just a pretty rectangle.
Governance and adoption
The hardest part of a design system is not building it. It is maintaining it. Without clear ownership and a contribution process, systems stagnate or fragment. Assign a small team or a dedicated owner to review additions, resolve conflicts, and keep the documentation current.
A living design system is a conversation, not a document. It evolves with the product, absorbs feedback from every discipline, and stays useful precisely because it is never finished.
