Glossary

Design System

A design system is a collection of ready-made UI components, patterns, tokens (colours, fonts, spacing), and rules for their use. A shared "design language" for the entire product team — designers and developers speaking the same terminology.

What it consists of

Tokens — named values: --color-primary: #c05c08, --spacing-md: 16px
Components — buttons, forms, modals, cards. Ready-to-use building blocks
Patterns — rules for combining components (registration forms, pagination)
Documentation — when and how to use each component

Popular design systems

Material Design (Google), Fluent (Microsoft), Tailwind UI, Ant Design, Radix UI.

Why it matters

Without a design system: every new page has slightly different spacing, colours, button sizes. Consistency degrades over time. With one: changing the --color-primary token updates the entire product.