Recommended weights
Limit the number of weights on a single screen. Use Black/Bold for hierarchy and Regular for content.
Regular 400
Medium 500
Semibold 600
Bold 700
Black 900
Typography system
Type scale
Apply this scale to preserve a stable reading rhythm across the entire application.
RoleSizeUsage
Heading H1
36-48 px
Page titles and hero messages
Heading H2
28-32 px
Section titles
Heading H3
22-24 px
Sub-sections and cards
Body
16 px
Primary content and descriptions
Caption
14 px
Contextual helper text and metadata
Best practices
- Prefer left alignment for long-form content.
- Keep comfortable line-height (1.4 to 1.6).
- Avoid full uppercase blocks outside short labels.
- Check text contrast in every active theme.
Composition example
Sample editorial block aligned with hierarchy and readability rules.
Invest in nature with clarity.
Every message should explain the action, the impact, and the next step. Form serves understanding.
Secondary label / contextual information