What is a design system and why do teams use components and tokens?

A design system is the shared set of design decisions and building blocks: tokens (color, type, space, radii, elevation) and components (buttons, inputs, modals) with documented usage, states, and content guidelines. In code, a component library in React, Vue, or native enforces the same look and shortens handoff. Consistency is not 'boring': it makes patterns learnable, reduces accessibility regressions, and speeds teams. A living system is updated with migrations and deprecation, not a PDF from 2019.

color.background.primary
color.text.default
space.4, space.8  # tokens in Figma and code, matched

Start simple: try this concept in a tiny project before moving to advanced tools.