Accessible typography & token architecture

Semantic type scaleGoverned token structureAccessibility by default

Screenshots of Figma and homepage

Defined a scalable typography system and semantic token architecture to support consistency and accessibility across a multi-brand digital platform.

This work aligned semantic tokens, accessibility standards, and component usage so that typography functioned as system language, not just visual style.

Context

As the design system expanded across distributed teams and properties, inconsistencies in typography usage created friction and accessibility risk.

Without shared semantic structure, teams interpreted visual styles differently, leading to uneven implementation and duplication across sites.

Typography needed to operate as structured system logic, not isolated visual decisions.

The structural challenge

Typography had to serve multiple layers simultaneously:

Accessibility compliance
Design clarity
Semantic structure
Implementation reliability

The challenge was to move from visual styles to governed semantics that could scale across more than 1,000 sites.

Strategic approach

  • The work focused on defining typography as a foundational system layer.
  • Established an accessible, ratio-based type scale aligned to WCAG standards.
  • Defined semantic token layers separating intent from visual values.
  • Mapped typography tokens directly to components and implementation patterns.
  • Documented usage standards to reduce ambiguity across distributed teams.

Outcomes

Consistent system-level typography across 1,000+ sites.
Reduced design to development translation issues.
Accessibility standards embedded into foundational tokens.
Improved cross-team adoption through clearer semantic guidance.

Discuss your system foundation

If your organization is building or refining a design system, I can help align structure, accessibility, and implementation.