Foundations / Typography
One font system with surface-specific roles.
The current system uses a shared heading family and body stack, then defines marketing and app roles through separate tokenized scales rather than two unrelated type systems.
Font families
Heading family
Manrope via shared heading stack
var(--font-heading-stack)
Body family
Shared body copy stays on the body stack for broad compatibility and calm readability.
Arial, Helvetica, sans-serif
Heading scale
H1
The quick brown fox jumps over the lazy dog.
clamp(2.1rem, 4.2vw, 3.2rem)
H2
The quick brown fox jumps over the lazy dog.
clamp(1.75rem, 3vw, 2.4rem)
H3
The quick brown fox jumps over the lazy dog.
clamp(1.4rem, 2.2vw, 1.85rem)
H4
The quick brown fox jumps over the lazy dog.
clamp(1.2rem, 1.8vw, 1.45rem)
H5
The quick brown fox jumps over the lazy dog.
clamp(1.06rem, 1.4vw, 1.2rem)
H6
The quick brown fox jumps over the lazy dog.
1rem
Surface roles
Marketing display
Marketing display reflects a sanctioned shared token, not a route-local size choice.
clamp(2.4rem, 6vw, 4rem)
Marketing body large
Marketing body large reflects a sanctioned shared token, not a route-local size choice.
1.125rem
App title
App title reflects a sanctioned shared token, not a route-local size choice.
clamp(1.9rem, 4vw, 2.75rem)
App body
App body reflects a sanctioned shared token, not a route-local size choice.
1rem
App caption
App caption reflects a sanctioned shared token, not a route-local size choice.
0.875rem