Frontend
What is Design System?
A shared library of components, tokens, patterns, and guidelines that keeps product UI consistent across teams.
Definition
A design system is the single source of truth for an organization's UI: a component library (often React or Web Components), design tokens for color and spacing, usage guidelines, and accessibility standards. Mature examples include Google's Material Design, Shopify's Polaris, IBM's Carbon, and GitHub's Primer. The system spans design tools and code—Figma libraries kept in sync with published npm packages, documented in Storybook. Beyond visual consistency, the payoff is velocity: product teams compose vetted, accessible components instead of rebuilding date pickers, and a rebrand becomes a token update rather than a rewrite.