Typography
GeneratedType scale, weights, and text styles
Lato, two tiers, kept separate rather than blended into one continuous scale. Product type is read at arm's length in sequence; display type is read in a glance from across the room. Generated from packages/tokens/src/tokens.json.
In-app / product tier
In-app title48px / Bold / 1.1x
Title 134px / Bold / 1.15x
Title 228px / Bold / 1.15x
Title 322px / Medium / 1.2x
Headline18px / Medium / 1.2x
Body16px / Regular / 1.5x
Callout15px / Regular / 1.5x
Caption13px / Regular / 1.4x
Footnote12px / Regular / 1.4x
Micro (footer only)10px / Regular / 1.4x
Large in-app numeral
52-64px, 700 weight, line-height 1.0, or 0.96 when it stacks or wraps, tracking -0.045em at 52px to -0.06em at 64px. One slot between the two tiers, for a balance or a headline metric, never a heading scaled up.
Marketing / display tier
Hero72-80px mobile / up to 120px desktop, weight 700, line-height 0.95-0.98
Section headline36-40px mobile / 56-64px desktop, weight 700, line-height 1.1
Lead paragraph18px mobile / 20px desktop, weight 400, line-height 1.5
Body16px mobile / 18px desktop, weight 400, line-height 1.5