Design System

A design system is a documented collection of reusable parts and rules for building a product's interface. It typically includes design tokens (colours, spacing, typography), UI components such as buttons and forms, usage guidelines, accessibility requirements and the code that implements them.

Why it matters

Without a shared system, each page or team invents its own button and spacing, and the product drifts into inconsistency. A design system lets designers and developers reuse approved pieces, cuts duplicated work, makes visual changes easier to roll out and builds accessibility in from the start. It is larger than a style guide or a component library, which are only parts of it, because it also records principles and when to use each pattern.

Example

:root {
  --color-primary: #0b5fff;
  --space-2: 8px;
  --radius-md: 6px;
}
.btn-primary {
  background: var(--color-primary);
  padding: var(--space-2) calc(var(--space-2) * 2);
  border-radius: var(--radius-md);
}

Changing one token updates every component that uses it.

Common mistakes

• Building a huge system before the product needs one.
• Neglecting documentation and ownership, so it decays.
• Making components too rigid for real use cases.

Related

• Wireframe
• Responsive design
• WCAG
• CSS

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.