ResNet — Enterprise Design System

The challenge

ResNet AI had grown fast. Multiple product teams, aggressive timelines, and no centralized design authority had created a component sprawl that was, frankly, out of control.

The numbers were rough:

• 1,300+ component variants scattered across dozens of Figma files
• 180 button styles, many differing only in padding or border radius
• 58 navigation patterns for what should’ve been a unified product suite
• Zero documentation explaining when to use what

Designers spent more time hunting for the “right” component than actually designing. Developers got handoffs that contradicted previous implementations. QA had no baseline to test against. Every sprint introduced new inconsistencies, and the debt piled up with every release.

ResNet’s enterprise clients expected polish, predictability, and professionalism. They weren’t getting any of it.

Four-phase methodology

Phase 1 — audit

We inventoried every component, variant, and pattern in the existing ecosystem. Each item was cataloged with its source file, usage frequency, visual properties, and behavioral specs.

The audit told us something we suspected but needed to prove: most of those 1,300 variants were duplicates or near-duplicates, components recreated by different designers at different times with slightly different interpretations. The actual number of unique functional components was closer to 200.

We mapped everything to its usage context and identified clusters of overlapping functionality. Those clusters became our consolidation targets.

Phase 2 — foundation tokens

Before touching a single component, we established the design tokens that would govern everything. Tokens are the atomic values (colors, spacing, typography, elevation, border radius, motion) that components inherit.

Key decisions:

• IBM Plex Sans as the primary typeface: clear at small sizes, extensive weight range, open-source license that removed procurement friction for enterprise clients
• 8px base grid for consistent spatial rhythm across all layouts
• 12-column layout system with responsive breakpoints at 320px, 768px, 1024px, and 1440px
• Functional color tokens organized by purpose: color-action-primary, color-feedback-error, color-surface-elevated instead of blue-500 or red-400

That functional naming was critical. When a color is named by its role instead of its appearance, the system can be re-themed without renaming tokens. Designers pick colors based on meaning, not aesthetics.

Phase 3 — system architecture

With tokens in place, we rebuilt the component library from scratch. Strict principles:

• Single-responsibility components: each one does one thing well
• Composability over variants: instead of 180 button styles, a single button component with composable properties (size, variant, icon position, loading state)
• Slot-based flexibility: components accept content through defined slots rather than rigid templates
• State completeness: every component accounts for default, hover, active, focus, disabled, loading, error, and empty states

The rebuilt library came in at 200+ components (60% fewer than before) with 70% fewer variants. But here’s the thing: the new library actually covered more use cases than the old one, because composability multiplied the possibilities.

Phase 4 — documentation

Every component got a documentation page covering:

• Purpose: what it’s for and when to use it
• Anatomy: a labeled diagram of the component’s parts
• Properties: every configurable option with default values
• States: visual examples of every state
• Do’s and don’ts: concrete guidance with visual examples
• Accessibility: required ARIA attributes, keyboard behavior, screen reader expectations
• Code: implementation snippets for the dev team

We wrote everything in plain language. A junior designer joining the team should be able to understand and correctly use any component within minutes.

Design foundations in detail

Typography scale

The type scale uses a 1.25 ratio, producing sizes that create clear hierarchy without dramatic jumps. Body text sits at 16px for comfortable reading, with 1.5 line height for text blocks and 1.25 for UI labels.

Spacing system

All spacing derives from the 8px grid: 4px (compact), 8px (tight), 16px (default), 24px (comfortable), 32px (spacious), 48px (section), and 64px (page). Designers pick from this scale instead of inventing values, which keeps rhythm consistent across every screen.

Color system

The functional color token system has 48 tokens organized into categories: action, feedback, surface, border, text, and overlay. Each token maps to specific light and dark theme values, so theme switching works without touching components.

The outcome

The new system did more than improve visual consistency; it changed how the team worked. Design-to-development handoff dropped 40% because developers could reference a single source of truth instead of interpreting inconsistent mockups. QA testing became predictable because every component behaved according to documented specs.

Most importantly, ResNet’s enterprise clients started experiencing the polish and professionalism the platform’s capabilities had always deserved. The design system cleaned up the interface and elevated the entire product.