G
Tokens
TypographySpacingColorRadiusShadowMotion
Foundational
FieldMenuTextbox

Typography

Typeface

Sizes

The line-height and letter-spacing are calculated dynamically:
bigger text sizes have more condensed line height and letter spacing.

Aa
s
font-size:
line-height:
letter-spacing:
--grn-text-s
Aa
m
font-size:
line-height:
letter-spacing:
--grn-text-m
Aa
l
font-size:
line-height:
letter-spacing:
--grn-text-l
Aa
xl
font-size:
line-height:
letter-spacing:
--grn-text-xl
Aa
xxl
font-size:
line-height:
letter-spacing:
--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.