# How to Build a SaaS Design System

Source: https://www.jvds.cn/en/share/ui-design/saas-design-system-guide
Language: en
Published: 2026-09-26
Author: JVDS Design Studio

When we visit SaaS companies for design consulting, design leads often open Figma proudly: “Look, we've already built our own Design System!” The first page contains the brand color scale, Blue-100 to Blue-900. The second lists type sizes. The third shows buttons in several sizes, radio buttons, and input fields. And that is where it ends.

A tour of the actual live product exposes the problems. Business line A puts its table filters above the header; business line B hides them in a drawer on the right. The finance module confirms bulk deletion in a modal, while the order module uses an inline popover. Every business designer is using the exact same blue buttons to assemble pages whose interaction logic is completely disconnected.

This is why we often say: **a design system limited to colors, fonts, and basic buttons solves only 30% of the problems in a complex SaaS product. What truly unifies the experience and helps frontend teams work faster is the next layer: standardizing frequently used Business Patterns**.

![Components](https://www.jvds.cn/upload/2026/0824/1787562639483-421174.webp)

## Layer one—the foundation: replace fixed color values with semantic Design Tokens

Do not have designers and developers reference `#2563EB` or `Blue-600` directly in code. If the product later needs dark mode or white-label themes for major customers, changing everything becomes painful. The right approach is to establish **Semantic Tokens**:

- Define background roles as `bg-surface-primary` for the main canvas and `bg-surface-elevated` for floating cards or modals;
- Define text roles as `text-primary`, `text-secondary`, and `text-muted`;
- Define borders and states using tokens such as `border-subtle` and `status-warning-bg`. Designers assign semantic roles, and frontend CSS variables map them in one step.

![Code](https://www.jvds.cn/upload/2026/0824/1787562639483-457870.webp)

## Layer two—the building blocks: atomic components must include extreme and messy-data states

Many teams design basic components such as Button, Input, Select, and Table only in ideal states with perfectly sized text. During real development, engineers then keep asking:

- If someone selects 15 tags in a multi-select dropdown, should the field scroll horizontally, wrap and grow taller, or display `15 items selected`?
- If a customer company name in a table column contains 40 characters, should it be truncated with an ellipsis and hover tooltip, or allowed to wrap onto two lines? Define these boundary rules directly in the Figma component's Auto Layout and Variants. Developers can then implement each component once and reuse it throughout the site.

![UI system](https://www.jvds.cn/upload/2026/0824/1787562639483-233870.webp)

## Layer three—the prefabricated assemblies: establish 6–8 composite business components shared across modules

In medium-to-large SaaS products such as the [NEXIVA enterprise financial collaboration platform](https://www.jvds.cn/en/works/website-design), the following frequently used business templates determine how smoothly people can work:

1. **Standard advanced filtering and saved views (Filter & Saved Views Bar)**: Standardize the placement and behavior of search, frequently used filters, the advanced-condition builder, and “Save as My View.”
2. **Floating table bulk actions (Bulk Action Bar)**: When a user selects 1 or more records, consistently show a dark action bar at the bottom or table header, containing the selected count, bulk export, bulk status changes, and deselection.
3. **Master-detail drawers and multi-step wizards (Slide-over & Stepper)**: Define how much information belongs in a modal, how much calls for a right-side drawer, and when users should move to a separate detail page.

Once all three layers are in place, designers and frontend engineers can assemble new business modules like LEGO. Existing business components cover 80% of the interface, leaving their valuable attention for innovation in the remaining 20% of core business logic.