Users rarely notice consistency. They notice when it's missing: buttons that look slightly different on every page, gaps that change for no reason, forms that behave one way here and another way there. A design system is how a team avoids that, and it doesn't need to be huge to be useful.
Start with a spacing scale
Pick a small set of spacing values and use only those. Many teams use multiples of 4 or 8 pixels, such as 4, 8, 12, 16, 24, 32, 48 and 64. It feels restrictive for a day, then it feels freeing: nobody debates whether a gap should be 13 or 15 pixels anymore.
Spacing carries meaning, too. Things that sit close together look related; things further apart look separate. Use that on purpose, with tighter spacing inside a card and more generous spacing between sections.
A type scale, not one-off font sizes
Do the same for text: a handful of sizes, from small labels to large headlines, each with a defined line height and weight. Fluid type that scales smoothly between phone and desktop saves designing every heading twice.
Build components, then pages
Instead of designing page after page, identify the pieces that repeat: buttons, inputs, cards, section headings, navigation and dialogs. Design and build each one once, with all of its states:
- default, hover and pressed
- focused, for keyboard users
- disabled and loading
- error, where it applies
States are where inconsistency usually hides. A button that looks perfect but has no visible focus state isn't finished.
Name things and write them down
A design system only works if people can find and use it. Keep documentation light: what each component is for, when to use it and when not to. Use the same names in design files and in code, so designers and developers are talking about the same thing.
Keep design and code in sync
The system that really counts is the one in the codebase. Design tokens for colours, spacing and type, defined in one place in the code, mean a change is made once and shows up everywhere. Our own website works this way: its colours, spacing and type scale are defined centrally and shared by every page.
When should a pattern join the design system?
Don't try to design every possible component on day one. Start with what the product needs now, and add to the system when a pattern shows up for the second time. A small system people use beats a big one they ignore.
We deliver product design as systems like this, so your team can keep building on it long after launch.
- #Design systems
- #UI components
- #Spacing
- #Consistency
- #Frontend