Typography Tokens
Architecting a semantic typography system using Figma Variables and Styles for a global product ecosystem.
The Challenge
The existing typography lacked a logical structure, making it difficult for developers to implement consistent styles and causing significant maintenance overhead during product updates.
The Solution
I engineered a multi-tiered token system that separated primitive values from semantic roles, ensuring a fully scalable and accessible type hierarchy across all products.
My Role
Lead Design System Architect.
The Impact
This semantic framework has bridged the gap between design and code, reducing front-end development time and ensuring 100% typographic consistency across the platform.
Introduction
One of my challenges at StarCompliance was creating a set of scalable design tokens. Colours were straightforward, but typography required much more thought and depth, particularly when it came to the semantic tokens.
I felt it would be prudent to include the entire documentation I wrote for the typography tokens within my portfolio, as it really helps to demonstrate my thought process and technical skills.
The following documentation screenshots are taken from the Design System I created; all diagrams, theory, and documentation were written and prepared by myself.
