❤️ 15/15

What a design system is and why: single source of truth × consistency × scale × speed

Start with the definition: a design system = a reusable set of components + patterns + design guidelines + design tokens, plus the principles and documentation guiding how to use them, serving as the single source of truth for an entire product family — so designers and engineers build consistent interfaces fast, from the same parts, by the same rules.

Note: it is not just a Figma UI kit or a color palette — those are only pieces of it. A design system bundles 'what it looks like + how to use it + the code implementation + who maintains it' into a living product: a product that serves other products.

Why bother? Without a design system, every page and every team builds its own buttons and tunes its own spacing — the result is inconsistent UI, duplicated effort, and 'fix one spot, miss ten.' A design system solves three things:

- Consistency — the same element looks and behaves the same across the whole product (directly delivering usability heuristic #4, 'Consistency and standards');
- Scale and speed — reuse ready-made components instead of redoing them every time, so new features get built faster;
- Maintainability — change a token or component once and every place that uses it updates together ('fix once, apply everywhere').

The bigger the product, the more teams, and the faster the iteration, the greater the leverage of a design system.

💡Several often-confused terms, from smallest to largest scope: (1) style guide — a document of visual rules for color / typography / spacing / tone; (2) pattern library — a set of reusable UI patterns / solutions; (3) component library — a collection of coded, ready-to-use components (the code layer); (4) design systemthe biggest one, which integrates all three plus design principles, design tokens, documentation, and the people and processes maintaining it into one organic whole. In other words: a style guide or component library is a part of a design system, not the design system itself.
A design system at a glance: style guide + pattern library + component library + design tokens + principles + the people and processes maintaining it, integrated into a single source of truth for the whole product family