What is a design system?
A design system is a shared set of rules, styles and components that keeps a product's design consistent.
Definition
It typically includes colours, type scale, spacing, components (buttons, cards, forms) and guidance on using them, often with matching code.
Why it matters
It keeps many pages and many contributors consistent, and makes new pages faster to build.
How to get it right
- Start small: colours, type and spacing.
- Turn repeated elements into components.
- Document when to use each.
- Keep design and code in sync.
Mistakes to avoid
- One-off styles on every page
- A system too complex to use
- Letting it drift from the code
Related terms
- Type scaleA type scale is a fixed set of font sizes, related by a ratio, used throughout a design.
- Grid systemA grid system is a set of columns and gutters that elements on a page align to.
- Tailwind CSSTailwind CSS is a utility-first CSS framework where styles are applied with small, single-purpose classes.
Orlume, the design-first AI website builder, gets the details on this page right for you: describe your site in one prompt and it decides the layout, type, colour and structure, builds it in React and Next.js and puts it live in one click.
Free to start · No card required · Live in one click
More design terms
Questions, answered.
The things people ask before they start building.
What is a design system?
A design system is a shared set of rules, styles and components that keeps a product's design consistent. It typically includes colours, type scale, spacing, components (buttons, cards, forms) and guidance on using them, often with matching code.
Why does Design system matter?
It keeps many pages and many contributors consistent, and makes new pages faster to build.
How do you get design system right?
Start small: colours, type and spacing. Turn repeated elements into components. Document when to use each. Keep design and code in sync.
Still stuck? Email usBuild something that doesn't look AI-made.
Describe the site you want. Watch it get designed, not just generated. Then publish it to its own orlume.site address.
- Free to start
- No card required
- Publish to a live URL
- You own the code