Infatuation DS Audit,
Migration off MaterialUI
Design System Deep Dive
Olex Ponomarenko
Presented 2025-03-10
Project Scope - How it started
Eng Manager: "We are partway through a migration from MUI to Chakra, what's the status? Can we gain some velocity by closing it out?"
Introductory conversations with designers:
- Kevin (Lead designer): "Mobile and Web design are using separate components in Figma, but we are currently working on converging"
- Other folks: "We often find mismatches between Figma intent and web" incl. "things drift after getting shipped"
Context
- 4-5 Vertical squads
- 1 "platform squad" with devopsy eng, myself, and a mobile contractor
- This specific DS effort was ~ 1/2 of my time
- Kevin (design lead) was responsible / accountable to the design work, and had a lot of ongoing product work as well
- JPMC was doing a large-scale Accessibility audit of The Infatuation, with vague timelines
- Effort kicks off as Design System V1 with myself and Kevin as owners. Started a weekly project check-in that continues to this day as Design Systems Monthly
Issues before the DS Audit



- Code had many different "H4", plus bad use of html tags (a11y)
- Figma had doubles of H2, H3, H4 styles
Staged Plan:
- Introduce DS process, establish DS goals
(Launch DS v1 by EoY) - Disallow new MUI imports
- Grids launch (mobile + web), new Tokens available
- fully removed divergent typography & colors, CI step
- JPMC Accessibility Audit – issues on small screens ID'd
- iOS + Android DSv1 launch
- Responsive Mobile Pass
- Fully Removed MaterialUI
- Buttons, DX, Venue rework
Approx Dates:
- September 2022
- Late September
- Late October
- November
- Late November
- Dec ~10
- Dec ~15
- Jan ~2, 2023 (after C/F)
- Q1
Colors sub-project:
A royal (blue) mess
secondary: {
pink: '#FD6FCE',
pink700: '#ff8eda',
orange: '#FC9B21',
yellow: '#FFE34C',
yellow700: '#ffec87',
green: '#2DC791',
green700: '#7ddbba',
lightBlue: '#87D7FF',
blue: '#87D7FF',
blue100: '#0E54BC',
blue500: '#4DA1F7',
transparent: 'transparent',
},
neutral: {
almostBlack: '#181818',
grey200: '#B8B8B8',
dark: '#181818',
white: '#FFFFFF',
100: '#EBECF0',
200: '#999999',
300: '#757575',
},
~20 variables omitted (DSv1)
$blue100: #0e54bc;
$blue300: #136aed;
$blue500: $blue40;
$blue700: #87d7ff;
$neutral-blue100: $coolgray100;
$neutral-blue300: #344563;
$neutral-blue400: #42526e;
$neutral-blue500: $coolgray60;
$neutral-blue600: #5e6c84;
$neutral-blue700: #6b778c;
$neutral-blue900: #8993a4;
$neutral-blue1000: $coolgray40;
$neutral-blue1100: #a5adba;
$neutral-blue1200: #b3bac5;
$neutral-blue1300: #c1c7d0;
$neutral-blue1400: $coolgray20;
$neutral-blue1500: #ebecf0;
$neutral-blue1600: #f4f5f7;
$neutral-blue1700: $coolgray10;
$neutral-grey300: #757575;
"New" Chakra code:
neutralBlue: {
100: '#091E42',
200: '#8993A4',
300: '#B3BAC5',
400: '#091E42',
700: '#6B778C',
1000: '#97A0AF',
1700: '#FAFBFC',
},
semantic: {
error: '#BF2600',
success: '#006644',
information: '#0747A6',
},
Custom CSS:
+ MUI color scheme...
+ one-offs
Cleaning up all the colors
- Worked with design to decide on color token naming, sent around relevant literature
- We went with my suggested format hue-NN, where NN ~= (100 - Lightness), rounded to the nearest 10
- Even if having 2x neutral hues doesn't make a lot of sense, at least now they have consistent naming
- Assisted with WCAG / a11y documentation – which of our header styles were OK with what colors, required AA contrast, AAA, etc
Cleaning up all the colors
ack --ignore-file="ext:snap" --ignore-file="ext:svg" --match "(#[0-9a-f]{6}|(?:rgba?|hsla?)\((?:\d+%?(?:deg|rad|grad|turn)?(?:,|\s)+){2,3}[\s\/]*[\d\.]+%?\))" --output="$&" --no-filename | sort | uniq
- Using aggressive code-searching, assessed the problem – both number of "yolo" colors and variable usage
- Did the same for native mobile application
- Got buy-in from design using Figma visual aid
- Manually mapped & checked probable importance of ref's
"What are all the hex, rgba, hsla colors mentioned in this web, app?


BEFORE
AFTER
Impact on Codebase
- PR 1: New color variables added
- Figma: Figma update, all other Figma colors removed, communication + documentation
- PR 2, 3: Audit work, clamped all colors to DSv1
-
PR 4: To prevent new colors from "spawning", code-search result is saved as snapshot count of unique colors
- Lightweight warning to acknowledge new colors, shadow values, etc, to be checked in code review
-
Colors since then:
- Some later iteration removed coolgray hues
- Current DS is at just 16 core colors, and ~25 extra one-off color instances in code (mostly svgs, gradients, shadows, etc)


Typography - Before DSv1
30+ styles defined in Figma, many more in code
Typography Changes
Similar process to colors:
- Audited existing font style* combinations, pushed for removing fonts for performance reasons
- PR 1: Added DSv1 stripped down 7-style toolkit + Documentation of how to apply styles (e.g. How to make an H2 semantic header w/ H3 styling, etc)
- Figma: Modified some of the designs for responsiveness, fixing issues on small screens and tablet sizes
- PR 2..N: Cleaned up all non-conforming styles (100+ files)
- Last PR: Removed 2 whole fonts (55kb+ page weight)
* - specific combos of (font X weight X letter-spacing X etc)
a11y / Responsive type audit

One of two galleries to drive size + letter-spacing conversations; this one for smallest "caption" size. Used core component to show responsive issues; and present potential solutions:
Rollout to Engineering
- Slack communications
- Synchronous meeting with in-depth walkthrough of design-engineering rationale, video recorded
- Documentation with first PRs that introduce variants


Overall DSv1 Project Results
- About 4 months from idea start to completion, occurring in parallel with other platform work
- Application size: -60KB JavaScript gzipped size, -55KB Fonts, -18KB CSS size (~10-15% savings)
- Accessibility & bugs: Lots of consistency improvements outside of original scope of "DSv1"
- DX: Went from ~2.5 avg "importables" to ~1 for core components like Buttons, Image, Grid, etc
- Designers loved the changes too, easier handoff, fewer styles in Figma and better organized
After the DS Project



- A11Y improved for 320px screens & 1600+
- Culture of detail-oriented followups in PR
- Successful annual audits from JPMC A11Y
- Huge gains in app & web consistency
After the DS Project
- Gained trust & confidence with eng / design / product leadership: used this to introduce annual DX retro, and later Storybook, selective screenshot testing, and
- Mentored a Sr Engineer throughout my tenure at Infatuation, who shadowed & took over the recurring Design Systems process in Q2 2024
Thanks, that's all!
olex.pono@gmail.com
deck
By Olex Ponomarenko
deck
- 71