Typography

Overview
Tokens

Typography tokens

Typography tokens define font families, weights, sizes, and line heights. They’re mapped by role, not raw values—so if the brand font changes, only the base tokens are updated.

Typefaces

Rootflo uses the typefaces SF Pro Display and SF Mono.

Typography variables

Typography name
Size
Usage
H1
64px
Use for main page titles or hero sections
H2
48px
Section titles on landing pages or key dashboards
H3
40px
Sub-section headings inside pages
H4
32px
Content headers, or major UI blocks
H5
28px
Smaller section headers, dialogs
H6
24px
Minor headers, inline headings within content
P1
20px
Important body text, or feature highlights
P2
18px
General body text in product UI
P3
16px
Default text for forms, lists, tables
P4
14px
Secondary details, captions, helper text.