Infatuation DS Audit,
Migration off MaterialUI

Design System Deep Dive

Olex Ponomarenko
Presented 2025-03-10

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"

- 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

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