Skip to content

Typography

Font families

BrandFontFallbacks
VerdantaOutfitsystem-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif
GetPlantsIntersystem-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif

Token: font.sans — overridden per brand.

Type scale

All sizes use px values (not rem) to stay consistent across contexts.

TokenSizeWeightLine-heightUsage
font-size.xs11pxCaptions, legal text
font-size.sm12pxSmall body text
font-size.base14pxDefault body
font-size.md16pxLarge body
font-size.lg18pxTitles
font-size.xl22pxLarge titles
font-size.2xl28pxHeadings
font-size.3xl34pxLarge headings

Semantic type tokens

Composite tokens that bundle family, size, weight, and line-height:

TokenComposition
type.caption400 11px/1.5
type.body-sm400 12px/1.8
type.body400 14px/1.8
type.body-lg400 16px/1.3
type.label500 14px/1.3
type.title-sm600 14px/1.3
type.title600 18px/1.3
type.title-lg600 22px/1.3
type.heading700 28px/1.3
type.heading-lg700 34px/1.2

Font weights

TokenValueUsage
font-weight.regular400Body text
font-weight.medium500Labels, emphasis
font-weight.semibold600Titles
font-weight.bold700Headings

Line heights

TokenValueUsage
line-height.tight1.2Large headings
line-height.snug1.3Titles, labels
line-height.normal1.5Captions
line-height.relaxed1.8Body text