ResNet Design System — Turning Complexity into Cohesion
How a unified design language helped an AI platform scale faster, look sharper, and feel more human.
Services
Client
Year
Website
Overview
ResNet’s product ecosystem had grown fast — maybe too fast. What started as a sleek AI platform had evolved into a constellation of tools, each speaking a slightly different design language.
- Buttons looked similar but behaved differently.
- Spacing rules changed from one product to another.
- What once felt like agility was now slowing everything down.
When ResNet approached Product Rocket, their goal wasn’t just to “make things consistent.” They wanted to build a scalable design infrastructure — one that would unify design and development, support theming across products, and bring visual coherence back to their growing suite of AI tools.
The result was The ResNet Design System — a flexible, token-driven framework that turned fragmented design into a living, evolving language.
The Challenge:
A Platform Without a Common Language
Our first audit covered over 150 screens and components across ResNet’s ecosystem.
The data told a clear story of design entropy:
1,300+ component variants scattered across different products
180 button styles, each coded differently
58 navigation patterns, many reinvented from scratch
Multiple, non-compliant color palettes that failed accessibility standards
Developers were re-creating patterns that already existed.
Designers were re-styling the same components with subtle but inconsistent rules.
Every release widened the gap between products and brand coherence.
ResNet wasn’t suffering from a lack of design quality — it was suffering from a lack of shared logic.
Our mission: to give the company a single design language that could bridge creativity, code, and brand at scale.
Our Approach:
Designing for Consistency and Scalability
We approached the project like system architects — building not just components, but principles.
Our process followed a clear, iterative methodology:
1. Audit & Discovery
We mapped every visual and interaction inconsistency across ResNet’s ecosystem — from colors and typography to form behaviors and grid rules.
This visual audit quantified design debt and set measurable improvement goals.
2. Foundation Tokens
We replaced arbitrary visual decisions with a semantic token structure — color, type, spacing, and elevation tokens that defined meaning, not just appearance.
This gave both designers and developers a shared visual vocabulary.
3. System Architecture
Every component was rebuilt from the ground up using atomic logic and design tokens.
From buttons to tables, all variants followed the same scalable structure and could adapt seamlessly between light, dark, and custom themes.
4. Documentation & Theming
We built a single source of truth — a fully documented, theme-ready system in Figma that exported tokens directly to front-end environments.
This ensured pixel-perfect parity between design and code, across all products.
Design Foundations — From Logic to Emotion
A design system is only as strong as its foundations.
For ResNet, that meant rethinking the relationship between type, color, space, and structure — the visual DNA of the brand.
Typography
IBM Plex Sans became the cornerstone of ResNet’s typographic voice — clean, modern, and highly legible.
We introduced a semantic typographic scale with clear roles:
Display styles for metrics and hero visuals
Headlines for structural hierarchy
Titles for modules and data sections
Body for dense, readable content
Labels and Captions for metadata and UI elements
All aligned to a 4pt baseline grid, ensuring visual rhythm and accessibility across dense data environments.
Typography isn’t just text — it’s the rhythm that connects data to meaning.
Color System
We rebuilt the color logic from scratch, mapping every hue to a semantic role:
backgrounds, surfaces, text, borders, and interaction states.
Instead of fixed palettes, ResNet now works with functional color tokens that drive contrast and brand identity.
Switching between light and dark modes is now as simple as swapping token values — no screen rebuilds required.
This semantic foundation made the system inherently theme-ready, empowering teams to customize colors while maintaining accessibility and hierarchy.
Spacing & Layout
We introduced an 8px spatial grid and a 12-column adaptive layout — forming the invisible structure that keeps every interface visually balanced.
Spacing tokens replaced arbitrary padding values, giving designers predictable alignment rules and developers precise measurement logic.
From dashboards to mobile cards, this grid became the framework that held the entire ecosystem together.
UI Components
Once the foundations were set, we unified the product interface layer.
Over 200+ components were redesigned and documented, each built for modular reuse.
Every component now includes:
Defined states, sizes, and variants
Clear accessibility rules and interaction feedback
Token-driven logic for instant theming and code alignment
The result: faster assembly, fewer inconsistencies, and a shared design rhythm across every product.
Theming — From Consistency to Brand Expression
ResNet’s goal wasn’t just visual harmony — it was flexibility. Different teams and clients needed their own accents and tones, without losing the system’s integrity.
We built a multi-theme architecture structured around three layers:
Base theme — the neutral design foundation
Light & Dark modes — fully tokenized and WCAG-compliant
Custom accent themes — brand-level variations defined by color tokens
This approach gave ResNet’s ecosystem controlled creative freedom: personalization without fragmentation.
Theming isn’t about decoration — it’s about scalability of identity.
Implementation & Handoff
The ResNet Design System was structured directly in Figma with code-aligned token naming, allowing instant export to front-end frameworks like React and Flutter.
Design and engineering now share:
One source of truth for all visual logic
Token exports that ensure style consistency in production
Documentation that covers usage, spacing, contrast, and accessibility standards
By treating design as infrastructure, ResNet gained a design system that grows with its products — not against them.
A design system isn’t just a library — it’s the language your product speaks
A design system isn’t just a library — it’s the language your product speaks.
Outcomes — Design at the Speed of Trust
Beyond metrics, the biggest shift was cultural: Designers stopped rebuilding. Developers stopped guessing. Everyone started speaking the same visual language.
Within months of implementation, the design system began reshaping how ResNet teams worked and delivered:
Unified Experience: All ResNet products now share one coherent visual and interaction language.
60% fewer components, 70% fewer variants, and drastically reduced redundancy.
40% faster design-to-development handoff through token synchronization.
Improved accessibility with standardized contrast ratios and text scales.
Future-proof scalability across light/dark modes and brand extensions.
The Impact — From System to Story
The ResNet Design System is more than a collection of patterns — it’s a story of growth through discipline.
By aligning creativity with structure, Product Rocket helped ResNet transform design from an art of iteration into an engine of scalability.
Where once there were mismatched interfaces, there’s now a cohesive, intelligent ecosystem — one that adapts to new products, new teams, and new ideas with ease.
