How I created a 60+ component design system from scratch for an enterprise climate-tech platform handling regulatory workflows across thousands of global companies. The system unified 3 product squads and became the foundation for all new feature development.
Due to a non-disclosure agreement, I cannot show the final production UI. This case study focuses on my process, methodology, design decisions, and measurable outcomes. The component previews shown are simplified representations, not actual product screens.
When I joined, the enterprise platform had no shared design system. Each of the 3 product squads had developed their own patterns independently. Buttons looked different across modules. Spacing was inconsistent. Form patterns varied. Engineers spent 30% of their time recreating UI that already existed somewhere else in the product.
When I joined, each squad was building UI independently with zero shared patterns between them.
Engineers were recreating UI that already existed elsewhere. I identified this through an audit in my first two weeks.
I found 14 different button styles across the product. I consolidated them into 4 purposeful variants with clear usage rules.
From zero shared components to a 60+ component Figma library with tokens, documentation, and usage guidelines.
Before building anything, I conducted a comprehensive interface audit. I screenshotted every unique UI pattern across the platform, categorized them, and created a visual inventory. This became the foundation for stakeholder alignment: showing leadership the inconsistency made the case for investment self-evident.
14 button styles. 8 different input patterns. 5 card layouts. 3 navigation paradigms. 4 color palettes. No accessibility standards. No spacing scale. No type hierarchy.
Created a "Wall of Inconsistency" in FigJam showing every variant side by side. Presented to product, engineering, and leadership. The visual impact made the problem undeniable. Got buy-in for a dedicated design system workstream within one week.
Before designing a single component, I facilitated a workshop with all 3 squad leads, the PM, and 2 senior engineers to define the principles that would guide every design decision. These became our north star for trade-off discussions.
Enterprise users handle complex regulatory data. Every component must communicate its purpose instantly. No ambiguity, no decoration for its own sake.
When buttons behave the same everywhere, users build muscle memory. Muscle memory builds confidence. Confidence builds trust in the platform.
WCAG 2.1 AA compliance is not a feature request, it is a baseline. Every component ships with proper contrast ratios, keyboard navigation, and screen reader support.
Components should combine freely to serve use cases we haven't imagined yet. Atomic building blocks over rigid templates.
A component that isn't documented doesn't exist. Usage guidelines, do/don't examples, and interaction specs ship with every component.
I established a token architecture that separates primitive values (raw colors, pixel sizes) from semantic tokens (what they mean in context). This lets us theme the system and maintain consistency even as the visual language evolves.
I structured the library using atomic design principles: tokens feed into primitives (buttons, inputs), primitives compose into patterns (form groups, card layouts), and patterns assemble into templates (page layouts, workflow steps). Every component includes states, variants, and responsive behavior.
Primary, secondary, ghost, and destructive. Each supports default, hover, active, disabled, and loading states. Consolidated from 14 inconsistent button styles.
Text, email, number, select, textarea, and search. Inline validation with error, warning, and success states. Consistent label, helper text, and error message positioning.
Consistent status communication across all workflow states. Color-coded with accessible contrast ratios. Used across document review, target validation, and submission tracking.
Flexible row components for document lists, data tables, and workflow queues. Supports selection, expansion, inline actions, and drag reordering.
The design system now powers every screen in the platform. Here is where the components live in context. Due to NDA, I cannot show the actual product UI, but I can share the structural patterns.
The final product UI is confidential. Contact me directly for a walkthrough.
A multi-step guided flow that replaced a 14-step process with 6 clear steps. Uses progress indicators, inline validation, contextual help, and auto-save. Users stopped abandoning the flow midway and could resume without losing work.
Search and recommendation features surfacing relevant guidance from large unstructured document sets. Designed trust, audit, and override patterns for AI outputs.
Enterprise dashboard for tracking climate target submissions across multiple entities. Status tracking, document management, and multi-stakeholder review.
Complex forms handling hundreds of data points with conditional logic, cross-field validation, and progressive disclosure to manage cognitive load.
Building the system was only half the challenge. Adoption required buy-in, education, and ongoing support. Here is the phased rollout approach I designed and executed.
Shared component names between Figma and code removed most translation overhead. Engineers reported pulling components by name instead of rebuilding them from screenshots.
Three squads moved from independent patterns to a single component vocabulary, so the same button or form behaves identically wherever it appears.
Covering the full product surface: navigation, forms, data display, feedback, overlays, and workflow-specific patterns.
Components are built and reviewed against AA standards: contrast ratios, keyboard navigation, focus indicators, and screen reader support.
It has users (designers and engineers), a roadmap, versioning, support channels, and adoption metrics. Treating it as a product, not a side project, is what made it succeed.
Tokens gave engineers something to use immediately, even before components were ready. This built momentum and trust before the first component shipped.
The best design system in the world is worthless if nobody uses it. Weekly office hours, migration guides, and embedding in squad rituals mattered more than the Figma file quality.
Rigid templates break when use cases multiply. Atomic, composable components survived use cases we never anticipated, while template-based approaches would have required constant rework.