Laying the foundation of the design system
Context
Two months in, the team embraced local components, but we first needed solid design foundations to ensure consistency before expanding further.
My approach
I set up a dedicated design system file, and with my fellow designer, started defining its foundations by creating a simple, effective set of references to speed up work and maintain consistency.
Outcome
We built a solid foundation with colors, typography, shapes, layout, and icons that was robust enough for shared components and close to existing designs to ensure smooth, gradual adoption.
Colors
To unify the product’s visuals, I requested a code extract of the color variables. With over 200 hue-based names (e.g., lightGrey2: #C3C2C2), mapping them to designs was unmanageable.
After aligning with my pair, we chose to start fresh on the three most visited pages, using a semantic “color roles” approach inspired by Material Design.
We defined roles like Primary, Secondary, Surfaces, Outlines, and Text, ensuring they met at least AA WCAG standards. Tonal palettes helped maintain both accessibility and visual harmony.
The result was a simple yet scalable color foundation, ready to evolve as new components were designed.
Primary, secondary, and surface colors
Text and surface color pairings with sufficient contrast
Typography
With Poppins and Inter already in use as a font pairing, we defined roles for text styles to limit variations and ensure consistency.
We chose a major second type scale because it provides a harmonious set of intervals and closely matched the font sizes already in use in the product. Using this as a baseline, we adjusted line heights for readability, settling on a range of 125%–140%, following Google Fonts recommendations and fine-tuning it to suit our content. This type scale worked across web and mobile, with minor adjustments for responsiveness using tokens.
Responsive text styles for desktop and mobile
Shapes
To simplify corner radius usage, we consolidated the various existing values into six consistent options, stored as tokens.
We also defined clear guidelines for their application and updated interactive elements to fully rounded shapes to enhance the product’s playful aesthetic.
Different corner radiuses applied to shapes
Layout
Although responsiveness wasn’t a priority for product management, several pages struggled with usability across devices.
To address this, I proposed layout guidelines focused on three size classes: mobile, tablet, and desktop. Each followed a column-based system (4, 8, and 12 columns, respectively) with specific margins and gutters.
I also suggested designing within small mobile (375x812px) and small desktop (1280x832px) constraints to encourage content prioritization and prevent clutter on larger screens.
Desktop, tablet, and mobile default layouts
Icons
Icon use was inconsistent, pulling from multiple libraries alongside custom in-house designs.
To standardize this, I recommended switching to Google Material Symbols for their extensive library, seamless Figma integration, and developer-friendly implementation.
To maintain consistency, we agreed on fixed icon properties:
Weight: 400
Grade: Normal
Style: Filled
Optical size: 24dp
Sample of icons used in the design system