What Is a Design System?

What it applies to

Any website or product where more than one person is involved in design or development, or where the interface will grow and evolve over time.

What a design system consists of

• Design tokens: Named values for colours, spacing, typography, border radii, and shadows — the atomic decisions that everything else inherits from.
• Component library: Buttons, inputs, cards, modals, navigation bars, and all other reusable UI elements — each designed with all variants and states (default, hover, active, disabled, error).
• Usage guidelines: Documentation explaining when and how to use each component, and when not to.
• Accessibility standards: Contrast ratios, focus indicators, and ARIA usage rules baked into component specs.

How to build one

• Start in Figma — create a dedicated design system file with colour styles, text styles, and a component page.
• Define design tokens first — all components inherit from them, so token decisions propagate automatically.
• Build components as Figma components with variants for all states.
• Mirror the system in code — in Webflow, use global classes and Components; in a coded project, use a component framework like Storybook.

In Webflow

Use Webflow's global colour swatches, text styles, and Components feature to create a living design system. Any change to a component updates all instances across the site simultaneously — the single biggest efficiency gain in Webflow projects at scale.