Clivet Design System

Scaling visual consistency and engineering velocity for a global SaaS platform across three product suites.

Role

UX Designer
Systems Architecture, UI Kits, Component Documentation.

Results

+40% Dev Velocity
Reduced design-to-code handoff time and eliminated 15% of CSS tech debt.

Client

Clivet
A B2B Enterprise Fintech company based in New York.

01. The Audit

We started by auditing over 50 unique screens, discovering 12 different button styles and 8 shades of blue. The lack of a single source of truth was creating a fragmented user experience and slowing down the engineering team.

By documenting these inconsistencies, we built a business case for a unified system that would save hours of redundant work.

02. Atomic Foundation

Using Design Tokens as our foundation, we built a scalable library of "atoms." This included typography scales, color palettes accessible to WCAG 2.1 standards, and spacing systems based on an 8px grid.

This ensured that even as the product evolved, global changes (like branding or dark mode) could be pushed in minutes, not weeks.

03. Documentation & Adoption

A design system is only as good as its adoption. We built a comprehensive documentation site that served both designers and developers, including code snippets and usage guidelines.

We implemented "Office Hours" and a contribution model to ensure the system grew organically with the needs of the product teams.

Conclusions & Lessons

The Clivet Design System successfully unified three disparate products into one cohesive ecosystem. The biggest takeaway was that communication is more important than pixels; building the system was easy, but changing the team's culture to prioritize shared components was the real win.

Today, the system supports over 200 components and is used by 15+ squads daily, maintaining a 98% adoption rate across all new feature releases.