Typography

Source: packages/shared/tokens/primitives.css

Font Families

Token	Value
`--font-family-sans`	`"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif`
`--font-family-mono`	`"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif`

Tailwind mapping

@theme inline {
  --font-sans: var(--font-family-sans);
  --font-mono: var(--font-family-mono);
}

Font Sizes

All sizes defined in px. The base size is 16px.

Token	Value	Usage
`--font-size-xs`	`12px`	Captions, fine print
`--font-size-sm`	`14px`	Secondary text, table cells
`--font-size-base`	`16px`	Body copy, inputs, buttons
`--font-size-lg`	`18px`	H4 headings
`--font-size-xl`	`24px`	H3 headings
`--font-size-2xl`	`32px`	H2 headings
`--font-size-3xl`	`48px`	H1 headings
`--font-size-4xl`	`64px`	Hero heading (landing)
`--font-size-5xl`	`72px`	Reserved

Font Weights

Token	Value	Usage
`--font-weight-normal`	`400`	Body text, descriptions
`--font-weight-medium`	`500`	Headings, labels, buttons
`--font-weight-semibold`	`600`	Emphasis, section titles
`--font-weight-bold`	`700`	Strong emphasis

Line Heights

All line-heights follow a 4px grid for vertical rhythm.

Token	Value
`--line-height-tight`	`16px`
`--line-height-snug`	`20px`
`--line-height-normal`	`24px`
`--line-height-relaxed`	`28px`
`--line-height-loose`	`32px`
`--line-height-xl`	`40px`
`--line-height-2xl`	`48px`
`--line-height-3xl`	`56px`

Heading Styles

Defined in theme.css base layer:

Element	Font Size	Weight	Line Height
`h1`	`--font-size-3xl` (48px)	medium (500)	`--line-height-3xl` (56px)
`h2`	`--font-size-2xl` (32px)	medium (500)	`--line-height-2xl` (48px)
`h3`	`--font-size-xl` (24px)	medium (500)	`--line-height-xl` (40px)
`h4`	`--font-size-lg` (18px)	medium (500)	`--line-height-relaxed` (28px)

Utility Classes

Custom typography utilities defined in theme.css:

Class	Family	Weight	Size	Line Height
`.text-body-1`	sans	400	16px	24px
`.text-body-2`	sans	400	14px	20px
`.text-button`	mono	400	14px	20px

<p className="text-body-1">Standard body copy at 16/24.</p>
<p className="text-body-2">Secondary body copy at 14/20.</p>
<span className="text-button">Button label style.</span>