GUIDE · DESIGN SYSTEMS
What is a design system? A plain guide.
A design system is a shared set of design decisions, reusable components and usage guidance that teams use to build consistent websites and digital products. It usually includes design tokens for colour, type and spacing, a component library, page templates and documentation, kept as one source of truth.
01 / WHAT IS INSIDE
The parts of a design system.
Most design systems are built in layers. Each layer uses the one below it.
| Part | What it is | Example |
|---|---|---|
| Foundations | The core visual rules | Colour palette, type scale, spacing scale, grid |
| Design tokens | Foundations stored as named values in code and design files | --color-action, --space-16 |
| Components | Reusable interface parts with documented states | Buttons, form fields, cards, navigation |
| Patterns | Components combined to solve a common task | A contact form, a pricing table, a search page |
| Templates | Page layouts built from patterns | Home page, service page, case study |
| Documentation | Guidance on when and how to use each part | Usage rules, do and do not examples, code snippets |
02 / HOW IT COMPARES
Design system, style guide or brand guidelines?
The three are related, but they answer different questions.
| Brand guidelines | Style guide | Design system | |
|---|---|---|---|
| Answers | Who we are and how we sound | How our interface looks | How we build interfaces |
| Covers | Logo, colour, tone of voice, imagery | Colour, type, icons, visual rules | Tokens, coded components, patterns, templates, guidance |
| Used by | Marketing, agencies, partners | Designers | Designers, developers and content teams |
| Includes code | No | Rarely | Yes |
| Format | PDF or brand book | Document or design file | Design library, code library and documentation site |
03 / WHEN YOU NEED ONE
Six signs it is time.
- The same button or form looks different on different pages.
- New pages take longer than they should because every decision is made again.
- More than one person or team designs and builds for your brand.
- Developers rebuild components that already exist somewhere else.
- Accessibility fixes have to be repeated page by page.
- You are planning a redesign and want it to stay consistent afterwards.
04 / HOW IT IS BUILT
Six steps from audit to system.
- Audit what exists. Collect the colours, type, components and inconsistencies already in use.
- Set the foundations. Decide colour, type and spacing once, and store them as tokens.
- Build core components. Start with the parts used most, such as buttons, forms and cards, with every state documented.
- Write the guidance. Explain when to use each part, with examples.
- Prove it on real pages. Use the system on a live project and fix what does not work.
- Keep it alive. Name an owner, version the system and make it easy to suggest changes.
05 / DESIGN TOKENS
Design tokens, explained.
A design token is a design decision stored as a named value, so design files and code use exactly the same colour, size or spacing. Tokens are usually layered: primitives hold raw values, semantic tokens say what a value is for, and component tokens say where it is used.
/* Primitive: the raw value */
--color-blue-600: #176B91;
/* Semantic: what it is for */
--color-action: var(--color-blue-600);
/* Component: where it is used */
--button-background: var(--color-action);Change the semantic token once, and every button, link and focus state that uses it updates together.
06 / ACCESSIBILITY
Accessibility, built in once.
- Colour contrast is checked when tokens are set, so text meets WCAG AA (4.5:1 for normal text) everywhere it is used.
- Focus states are designed once and appear on every interactive component.
- Touch targets are sized for fingers, not just mouse pointers.
- Form fields come with visible labels, help text and clear error messages.
07 / COST
What a design system costs.
Cost depends on how many products the system serves and how much already exists. In South Africa, published starting prices for a design system begin at around R19,400 in 2026, and larger systems with full documentation and coded components cost considerably more.
08 / FROM OUR WORK
Design systems we have built.
EGIT Design System. A shared visual language for EGIT’s advisory services and professional learning, built from an audit of the live website: colour, type and spacing tokens, accessible components, page templates and a migration path. View the case study
Ethos. Our internal studio design system, connecting foundations, reusable components, templates and usage guidance. View the case study
FREQUENTLY ASKED QUESTIONS
Design system questions.
Is a design system only for large companies?
No. Any organisation with more than one website, product or person designing for it benefits from shared standards. A system can start with tokens and a handful of components and grow as you need it.
How long does it take to build a design system?
It depends on how much already exists and how many products the system must serve. An audit and a first set of foundations and core components usually come first, then the system grows alongside real projects.
Does a design system replace designers?
No. It removes repeated decisions, such as which blue or which button, so designers and developers can spend their time on the problems that are specific to each project.
What tools are used to build a design system?
Usually a component library in a design tool such as Figma, matching code such as CSS variables and reusable components, and a documentation site that explains how to use both.
Who maintains a design system?
A named owner or small team, with a simple way for others to suggest changes. Without an owner, systems drift out of date and teams stop trusting them.
Is a style guide enough?
A style guide is a good start, but it describes the visual rules. A design system adds reusable, coded components and usage guidance, so the rules are applied the same way every time.
HAVE SOMETHING IN MIND?