Design system plan

Stages of implementing a design system

Phases

  1. 0

    Phase 0 — inventory

    Collect every unique button/field/card in the product: usually 5–10 versions where one should exist.

  2. 1

    Phase 1 — tokens

    Colors, spacing, typography as variables (Figma variables + CSS custom properties) — one source of truth.

  3. 2

    Phase 2 — base components

    Button, Input, Card, Modal: the 10 most-used components cover 80% of the interface.

  4. 3

    Phase 3 — documentation

    For every component: states, do/don't examples, API props. Without docs the system is dead.

  5. 4

    Phase 4 — adoption

    Migrate page by page; metric: % of UI built from system components.

A design system pays off at 3+ screens of the same type; for a single landing it's overkill. The main risk is building a 'perfect' system nobody adopts: start adoption alongside phase 2, not after completion.