What is a Design System?

The Problem Design Systems Solve

Imagine a fintech with five designers and twenty engineers. After two years the app has eleven slightly different shades of green, seven button styles and three ways to show an error. Every new screen takes longer, because everyone rebuilds things that already exist, a little differently each time.

A design system fixes this. It is a single source of truth for how a product looks, behaves and is built.

---

What is Inside a Design System?

A design system is more than a Figma file of components. It usually has four layers:

1. Design tokens

The smallest decisions, stored as named values: colours, font sizes, spacing, border radius, shadows, animation durations. For example, color.action.primary = #F97316 or space.4 = 16px. You will build a token system in Lesson 3.

2. Components

Reusable UI building blocks built from tokens: buttons, inputs, checkboxes, cards, modals, navigation bars. Each has defined variants (primary, secondary), sizes and states (hover, focus, disabled, loading, error).

3. Patterns

Combinations of components that solve common problems: a sign-up form, an empty state, a transaction list, an OTP verification flow. Patterns capture how to use components together.

4. Documentation and principles

Guidelines explaining when and why to use each piece, accessibility requirements, content guidelines (voice and tone), and the principles behind decisions. Without documentation, a component library is just a toolbox with no instructions.

Crucially, a mature design system exists in both design and code: Figma components for designers and matching coded components (React, Flutter, SwiftUI) for engineers.

---

Famous Examples

• Material Design (Google): one of the most influential public systems. It defines components, motion, colour and elevation, and is used by millions of Android apps. Material 3 introduced dynamic colour that adapts to the user's wallpaper.
• Atlassian Design System: powers Jira, Confluence and Trello. It is known for excellent documentation on content, accessibility and how to write clear messages.
• Apple Human Interface Guidelines: guidance for building on iOS, macOS and watchOS.
• Shopify Polaris, IBM Carbon, Microsoft Fluent: all public and worth studying.

In Africa, companies such as Flutterwave, Paystack, Moniepoint and Andela maintain internal design systems so teams across Lagos, Nairobi and remote hubs ship consistent products fast.

---

Why It Matters

• Consistency: users learn a pattern once and recognise it everywhere.
• Speed: designers and engineers assemble screens from proven parts instead of starting from scratch.
• Quality and accessibility: fix contrast or focus states once in the system, and every product improves.
• Scale: new team members become productive faster.
• Brand agility: change a token and a rebrand ripples through the product.

---

When Do You Need One?

A solo designer on a young startup does not need a 200-page system. Start small:

1. A colour and type style library in Figma
2. A handful of core components (button, input, card)
3. A short README explaining how to use them

Grow the system as the product and team grow. Many famous systems started as a single shared Figma file.

---

Who Owns It?

Design systems need owners: often a small team of designers and engineers who maintain the system, review contributions and publish updates with version numbers and changelogs, just like software. Without ownership, systems drift and die.

---

Try It in the Lab

The lab shows the same set of components styled by three design systems: a Material-inspired system, an Atlassian-inspired one and a CareerEx one. Switch between them and see how changing only the tokens transforms every component. Then explore the four layers of a design system.