YieldX · Case study

Creating a design system from the ground up

YieldXIA, UX strategy & UI design
The new YieldX color palette: main, semantic, complementary and neutral colors
2×accessibility score on Lighthouse and WAVE
60button styles audited and consolidated
130typography styles audited and consolidated
1stcomponent library in Figma for the team

The problem

No rules for buttons, colors, icons or type, and no components in Figma.

  • Inconsistencies across the platform
  • Slow design work, with lots of copying and pasting
  • Accessibility issues, like low color contrast
GoalBuild YieldX's first design system: consistent, efficient and scalable. It was my first large-scale project after joining.

Heuristic analysis

What I found in the product

Analytics screen with inconsistent colors
Inconsistent color palette
Portfolio review screen where the main CTA looks secondary
The main CTA styled as a secondary button
Preferences panel with low-contrast text
Low contrast between colors

Documentation

Taking inventory of everything

I documented every existing button, icon, type style and color, and organized them by category and where they lived in the product.

60

different buttons in the product

130

typography styles, counting line height and letter spacing

Color

From "too blue" to a real dark mode

The dark theme was so blue that the primary color couldn't stand out. With the two other designers on the team, I rethought the palette to get a true dark mode feel.

Full color palette with hex values

Components

Agreeing on the rules together

I led design sessions to review every component, decide what to keep, and set rules for when to use each one. Then I mapped out the variants. For typography, that meant:

SizeA set type scale
StyleWeights and cases
FontOne family per role
SpacingLetter spacing and padding
Color & stateDefault, hover, disabled

Before → after

Every screen, rebuilt with the new library

The team redesigned all product screens with the new component library and handed them off to developers. Even the Figma layers went from "Group 5491" to named components.

Before: the old credit quality screen
Before: too blue, with unnamed layers
After: the redesigned credit quality screen
After: true dark mode, built from components

Measuring success

Early results after handoff

More consistencyAcross design, product and development teams.
2× accessibilityScore doubled on Lighthouse and the WAVE evaluation tool (WebAIM).
Faster designNo more rebuilding similar components from scratch.

It was also a great way to build a strong relationship with the tech team, explain the reasoning behind each change, and teach developers about Figma.