G
Tokens
TypographySpacingColorRadiusShadowMotion

Typography

Typeface

Sizes

The line-height is calculated dynamically: larger text sizes have a more condensed line-height.

Aa
s
font-size:
line-height:
--grn-text-s
Aa
m
font-size:
line-height:
--grn-text-m
Aa
l
font-size:
line-height:
--grn-text-l
Aa
xl
font-size:
line-height:
--grn-text-xl
Aa
xxl
font-size:
line-height:
--grn-text-xxl

Weights

Aa
normal
--grn-weight-normal
Aa
medium
--grn-weight-medium

Design guidelines

The body text size is m, use it by default to maintain the UI consistency.
Use xl for the main title in a view. Use l for subsections titles.
s can be used to deemphasize text but use it sparingly as it compromises legibility.