Pulse Board

Context

Product reviews were slow because every iteration required a translation layer. Designers iterated in isolation; engineers interpreted specs manually. Tokens lived in three places.

What we inherited

• A Figma library with inconsistent naming
• A React codebase with one-off styling patterns
• No shared vocabulary between design and engineering

Approach

We treated the component library as the contract — not the mockups. Design tokens became the shared language; every component mapped to a typed React primitive with documented states.

Principles

1. One source of truth — tokens in code, mirrored in Figma via a sync plugin
2. States are first-class — hover, focus, disabled, loading documented in both tools
3. Ship the boring parts — spacing, type, color before bespoke layouts

Split ownership

Design owned token semantics, component anatomy, and interaction specs. Reviews happened against the library — not one-off frames.

Engineering owned implementation quality, accessibility, and performance budgets. Every component shipped with tests and Storybook coverage.

For the first time, a mock and the shipped UI could be argued about with the same vocabulary.

System in practice

We rolled out in three layers: foundation tokens, primitive components, then composite patterns used in the actual product flows.

Time to review

−40%

Regressions

−62%

Adoption

9 squads

Technical notes

The implementation stayed intentionally small — no custom build pipeline, no exotic abstractions.

export function Button({ variant = 'primary', ...props }: ButtonProps) {
  return (
    <button
      className={cn(buttonVariants({ variant }))}
      {...props}
    />
  );
}

Layer	Tooling	Owner
Tokens	Style Dictionary + CSS variables	Design ops
Primitives	React + Tailwind v4	Platform
Documentation	Storybook + MDX usage notes	Shared

Outcome

Review cycles shortened because debates moved from “is this pixel correct?” to “does this match the system?” New features composed from existing primitives instead of inventing one-off UI.

The work did not eliminate design judgment — it gave judgment a durable place to live.