Web Design
Web Animation That Guides Users Instead of Distracting Them
Principles for fast, purposeful micro interactions and motion that never distracts.
Web Design
How to Build a Design System You Can Actually Maintain
A design system is meant to make a growing website faster to build and easier to keep consistent. Done badly it becomes a museum of unused components that nobody trusts.
This guide explains how Rankwyre builds design systems that teams actually use, so a site stays coherent as pages and contributors multiply.
Quick answer
A maintainable design system is built on a small set of tokens for colour, type and spacing, a focused library of reusable components, and clear naming conventions. Start small, document the rules, and grow the system only when a real pattern repeats.
Start with tokens, not components
Tokens are the smallest decisions in your system: the palette, the type scale, spacing steps, radius and shadow. Everything else is built from them.
Define a limited set and resist exceptions. When colour and spacing come from a fixed scale, every new page inherits consistency for free, and a single change updates the whole site.
Build components around real patterns
Do not design components in the abstract. Wait until a pattern appears two or three times across real pages, then turn it into a reusable component with clear variants.
A focused library of buttons, cards, sections and form fields covers most of a marketing site. Fewer, well made components beat a sprawling library that nobody can navigate.
Name things so the next person understands
Naming is where most systems quietly fall apart. Use names that describe purpose, not appearance, so button primary survives a colour change while button blue does not.
Agree on a simple convention, write it down, and apply it everywhere. Consistent names make the system searchable and lower the cost of every future change.
Document the rules and let it grow slowly
A short living document that shows each token and component, with a sentence on when to use it, is worth more than a perfect but unread spec.
Let the system grow only when a genuine new pattern repeats. A maintainable design system stays small on purpose, which is exactly why a team keeps using it.
What to remember
- Base the system on a small, fixed set of design tokens.
- Create components only when a pattern repeats in real pages.
- Name by purpose, not appearance, so names survive redesigns.
- Keep a short living document people will actually read.
- Grow the system slowly and prune anything that goes unused.
Frequently asked questions
When does a small website need a design system?
As soon as more than one person edits it, or it passes roughly ten to fifteen pages. Even a lightweight system of tokens and a handful of components prevents the drift that makes a growing site look inconsistent.
What is the difference between design tokens and components?
Tokens are the raw decisions such as colours, spacing and type sizes. Components are reusable building blocks like buttons and cards that are constructed from those tokens. Tokens change the look, components change the structure.
How do I stop a design system from becoming bloated?
Add to it only when a pattern genuinely repeats, name things by purpose, and review the library periodically to remove anything unused. A smaller system is easier to trust and far easier to maintain.
Latest from the journal
Your site could be next
From first sketch to launch day, we design sites that look unforgettable and convert like they mean it.