Typography can help create clear hierarchies, organize information, and guide users through a product or experience.
Aqua uses type tokens and themes to manage typography. Type tokens are pre-set configurations of typographic elements such as font size, weight, or leading (line height) that are specifically calibrated for use in the products. Selecting the appropriate type style is determined by layout or template structure. Layouts may have several levels of architecture or areas that require varying typographic hierarchies.
A disciplined consistency with how you size and style type makes the whole admin more intuitive to use. Merchants who learn how to navigate one experience can apply that same knowledge to each new experience they come across.
Do
✅ Use semantic typography tokens
✅ Use the defined hierarchy
✅ Use Inter for all product interfaces
✅ Use typography styles instead of raw font values
Don't
❌ Use hardcoded font sizes
❌ Use unsupported font weights
❌ Create custom line-heights
❌ Override typography styles locally
<aside> 💡
Typography Foundations Update
✓ Segoe → Inter ✓ Primitive-based architecture ✓ Font weight normalization ✓ Accessibility improvements ✓ Updated line-height scale ✓ 4px grid alignment
</aside>
