One design system gives a SaaS product a consistent look

The challenge

What was going wrong

1. 1

   Audit what exists

   We catalogued every screen and pattern in use, grouped duplicates, and agreed with the team which versions to keep and which to retire.

2. 2

   Define the foundations

   We set colors, type, spacing and states as shared tokens, so a single change could flow through design files and code together.

3. 3

   Build and document components

   Designers built the parts in Figma while developers built matching coded versions. Each had usage notes and accessibility guidance.

4. 4

   Roll out gradually

   We moved screens over one area at a time, starting with the busiest pages, and coached both teams so the system stayed healthy after handover.

• Shared design tokens

  Colors, type and spacing defined once and used in design and code.

• Reusable component library

  Buttons, forms, tables and dialogs built once with every state covered.

• Living documentation

  Clear rules on when and how to use each part, with examples.

• Contribution process

  A simple way for teams to propose and review new components.

• A consistent product experience

  Pages across the product now look and behave alike, which cut confusion for customers.

• Faster work for design and engineering

  Teams reuse tested parts instead of drawing and coding the same thing again.

• Design files match the live product

  Designers and developers now work from one source, so handoff stopped causing surprises.

• Figma Design tool for dashboard wireframes and layouts approved before build.
• React Component-based user interfaces for web apps.
• Storybook Documents and tests interface components in isolation.
• TypeScript Typed JavaScript that catches mistakes before release.
• Tailwind CSS Styling toolkit for building clean, consistent interfaces quickly.