Replica Design System
Built on the MUI suite of UI tools and implemented in Figma, the Replica Design System is a centralized source of truth that empowers consistent standards across a recognizable family of product experiences.
Why we built it
Replica’s product surface had grown faster than its standards. Designers were re-solving the same UI problems, handoff quality was uneven, and map, table, and chart styles drifted between features. We needed a single source of truth in design and code so teams could ship faster with higher consistency.
My role
I led the strategy and build of the system in Figma with a matching code library in MUI and Storybook, partnered with engineering to wire up tokens, and set the governance rituals that kept it healthy.
What we built
A system that moves from the atomic level to working product patterns, with clear rules for data-heavy UI.
Foundations: tokens that travel
Use Type, Color, and Spacing tokens as the bedrock. Tokens drive accessibility, theming, and developer ergonomics.
Type: Shows the typography scale and line-heights that keep dense tables readable without fatigue.
Colors: presents semantic colors plus purpose-built choropleth and heatmap ramps used in maps and charts.
Spacing: documents the grid and container rules so layouts stay aligned across pages and screen sizes.
Components: the shared building blocks
We defined buttons, inputs, tables, menus, dialogs, and iconography with states and dark mode coverage.
Buttons: demonstrates primary, secondary, icon, and dark variants with state behavior.
Tables: covers dense and default table styles, selection, sorting, and list-style panels for saved items.
Data patterns: where the system pays off
Replica lives on maps, tables, and charts. We built patterns that make analysis faster and more trustworthy.
Maps: standardizes basemap styling, link width ratios for network volumes, legend formats, and 3–7 step ramps so the same dataset renders consistently across studies.
Charts: shows summary cards, histograms, and range filters that pair with charts in the same panel for “see and set” interactions.
How it shipped
-
Design and code in lockstep. The Figma library and Storybook shared the same tokens and names so designers and engineers spoke the same language.
-
Adoption rituals. Weekly office hours and short pattern reviews kept teams unblocked and the library honest.
-
Release path. New patterns launched behind flags, then graduated once quality bars and a11y checks passed.
-
Docs that teach. Each page explains why a rule exists, when to use it, and how to extend it for edge cases.
The Impact
Reduced UI drift and rework by giving product teams a single library that covered maps, tables, and charts.
Enabled faster onboarding for new designers and engineers through clear examples and Storybook parity.
Reduced design to development time by up to 50 percent through the new design system and patterns.
More Work Examples
Tractics UI/UX Transformation
Replica Trends
Replica Places Studies
Studio.Replica Redesign
mySidewalk Dashboards
Replica Data Library