Design system
Also called component library, UI kit.
A shared set of reusable components, styles and usage rules that designers and engineers both build screens from.
Last updated
What it is.
A design system has three layers. Tokens are the basic values: colours, type sizes, spacing and radii. Components are the building blocks made from them: buttons, inputs, tables, modals. Guidelines say when to use which, and how they should behave and read.
The same components exist in the design tool and in code, with the same names. A designer who places a button in a high fidelity prototype is placing something an engineer already has.
Why it matters
Without one, every screen is designed and coded from scratch, so the same button ends up in six slightly different versions. A design system makes new screens faster, keeps the product consistent, and lets accessibility fixes happen once instead of on every page.
In a product build
Every OceanLab case study is scoped as product design, UI build and development, so the components drawn in design are the same ones built in code. That shared set is the design system for the product.
Common mistakes.
- 01
Building a large system before the product needs it. Start with the components you use now.
- 02
Letting design files and code drift apart, so the system in the design tool is not the one shipped.
- 03
Skipping states: disabled, loading, error and empty are part of each component.
Work it out with a tool.
Related terms.
- WireframeA simple, usually grey, sketch of a screen showing layout, content and actions, without final styling.
- High fidelity prototypeA prototype that looks almost exactly like the finished product, with final styling, real content and realistic interactions.
- Usability testingWatching real people try to complete real tasks with a product, to find where they get stuck.
- Technical debtThe future cost of shortcuts taken in code today.
Guides and pages
Browse the full glossary or read answers to common questions.
