Typography

Google Sans Flex everywhere for UI and marketing chrome. Visual size does not determine heading level — pick the semantic element, then apply the type role.

Scale

Display and large headings are fluid. Body and control text use rem-based steps so they scale with user preferences.

displayvar(--text-display-size)

Display — growth that compounds

headingvar(--text-3xl)

Heading — clear client outcomes

titlevar(--text-2xl)

Title — section label

xlvar(--text-xl)

XL — lead paragraph support

lgvar(--text-lg)

Large — comfortable reading size

basevar(--text-base)

Body text keeps a comfortable measure and a steady rhythm.

smvar(--text-sm)

Supporting text uses a readable, theme-aware navy tint.

navvar(--text-nav)

Nav — dense chrome links

xsvar(--text-xs)

Caption / meta

xxsvar(--text-xxs)

Eyebrow / overline

monovar(--font-family-mono)

Monospace for code, tokens, and IDs: --ru-navy

Family: --font-family-sans → "Google Sans Flex", system-ui, sans-serif. Do not invent a second typeface.

Token reference

Token	Value
`--font-family-sans`	`"Google Sans Flex", system-ui, sans-serif`
`--font-family-mono`	`ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`
`--font-weight-normal`	`400`
`--font-weight-book`	`450`
`--font-weight-medium`	`500`
`--font-weight-semibold`	`600`
`--font-weight-bold`	`700`
`--text-xxs`	`0.6875rem`
`--text-xs`	`0.75rem`
`--text-nav`	`0.8125rem`
`--text-sm`	`0.875rem`
`--text-base`	`1rem`
`--text-lg`	`1.125rem`
`--text-xl`	`1.25rem`
`--text-2xl`	`1.5rem`
`--text-3xl`	`1.875rem`
`--text-4xl`	`2.25rem`
`--text-display-size`	`clamp(2.25rem, 1.25rem + 3vw, 3.75rem)`