01 / WHY IT MATTERED
Inconsistency was creating unnecessary decisions.
An audit of existing screens showed inconsistent font sizes, line heights and weights. That made screens harder to maintain and made the relationship between Figma styles and production code unclear.
02 / BUILDING THE SCALE
A smaller system can create more consistency.
- Audited existing screens and typography usage.
- Compared Material Design and Tailwind.
- Mapped the product to a minimal type scale.
- Defined font sizes, line heights and weights as reusable tokens.
- Set up Figma variables and global CSS custom properties.
- Created a clear Figma-to-code mapping for developers.
03 / IMPLEMENTATION
The handoff is part of the design.
I treated the implementation model as part of the design work. Tokens were named and structured so the same decision could be understood in Figma and expressed directly in CSS.
04 / LEARNING
Good systems reduce decisions rather than adding rules.
A small, flexible scale created more consistency while keeping enough range for the product. The current work is designed around a 1920px frame with responsive typography as the next evolution.