Minimalist Design System for SaaS

The Problem

A fast-growing B2B analytics platform had accumulated severe design debt. The product was a dense enterprise dashboard: filters, tables, charts, empty states, billing, and a settings tree that had grown one feature at a time. Fourteen different button styles were in production. Modal dialogs disagreed on padding, focus traps, and whether Escape closed them. Dark mode was a second CSS file with conflicting variables, so a “primary” in light mode was not the same hue as a “primary” in dark mode.

Engineering had copied components between feature folders. Design had Figma frames that did not match the repo. Accessibility was whoever remembered a label that week. The team could ship screens; they could not change a radius or a focus ring without a week of visual QA.

The goal was a cohesive visual language and a tokenized system that both Figma and React could share, without a rebrand theatre. The product had to keep shipping while the primitives underneath it were replaced.

Solution

We established an OKLCH-based design token hierarchy. OKLCH keeps perceptual lightness stable across themes, which is what dark mode had been getting wrong: hex pairs that looked fine in isolation and failed contrast next to charts. Tokens were layered: primitive color ramps, then semantic aliases (background, foreground, muted, border, primary), then component-level decisions. Radius, space, and type used the same naming in Figma variables and CSS custom properties.

We built 40+ accessible UI primitives in Figma and React: button, icon button, input, select, checkbox, radio, switch, textarea, dialog, drawer, tooltip, popover, tabs, table chrome, toast, badge, skeleton, empty state, and the chart-adjacent bits (legend, axis labels, KPI tile). Every interactive primitive had a documented keyboard map, a visible focus ring, and tests. Automated accessibility testing ran axe and keyboard-only stories in CI; we did not treat a green axe run as a replacement for tab order.

The visual language was deliberately quiet. No extra chrome for its own sake. Hierarchy came from type size, weight, and muted vs foreground — not from a fifth grey box. Data density stayed high; the system’s job was to stop fighting the data.

Rollout

We did not freeze the product for a “redesign.” New primitives landed behind a package. Screens migrated when they were already being touched. The fourteen buttons collapsed to a small variant matrix: size × tone × icon. Modals became one Dialog with slots. Dark mode became a token theme, not a fork.

The unglamorous work was deprecation: finding the old class names, mapping them, and deleting the duplicates so the next hire would not copy the wrong button. Documentation lived next to the components — usage, do/don’t, and the accessibility notes that Figma cannot encode.

Outcome

The dashboard stopped looking like five products. Theme changes (a contrast tweak, a new density step) became token edits instead of hunts through feature CSS. Keyboard navigation and focus were testable rather than folklore. The system is still the contract between design and engineering: if it is not a token or a primitive, it is a one-off, and one-offs have to argue for themselves.