Typography

Fraunces for display and page titles, Instrument Sans for reading and interface text, IBM Plex Mono for code and token names. Seven roles set size, line height and weight together; a screen uses four sizes at most. If a design needs a step that is not here, propose a token instead of picking a value by eye.

Edit in Studio

Type scale

font.size10 tokens

Each step at its size, with the line height and tracking it pairs with.

Preview brand

100064 px / 1Display: the home hero and onboarding only (typography.display)

Review the token change

90050 px / 1Numbers that must win a glance

Review the token change

80044 px / 1.2Page titles (typography.h1)

Review the token change

70036 px / 1.2Rare emphasis in dense views

Review the token change

60030 px / 1.2Section titles (typography.h2), page titles on phones

Review the token change

50024 px / 1.2Headings inside dense Studio views

Review the token change

40021 px / 1.35Card, dialog and group titles (typography.h3)

Every token change ships as a reviewed pull request.

30016 px / 1.5Reading body and leads (typography.body)

Every token change ships as a reviewed pull request.

20014 px / 1.5Interface text, labels, table cells (typography.ui)

Every token change ships as a reviewed pull request.

10012 px / 1.35Captions, badges, table meta (typography.caption)

Every token change ships as a reviewed pull request.

Display: the home hero and onboarding only (typography.display).64pxUnused
Numbers that must win a glance.50pxUnused
Aa
Page titles (typography.h1).44px
1 component
Components
- PageHeader
Rare emphasis in dense views.36pxUnused
Aa
Section titles (typography.h2), page titles on phones.30px
2 components
Components
- EmptyState
- PageHeader
Headings inside dense Studio views.24pxUnused
Aa
Card, dialog and group titles (typography.h3).21px
5 components
Components
Aa
Reading body and leads (typography.body).16px
9 components
Components
Aa
Interface text, labels, table cells (typography.ui).14px
36 components
Components
Base styles
Read by base.css, the global stylesheet apps import once with @bridge-ds/react/styles.css.
Aa
Captions, badges, table meta (typography.caption).12px
24 components
Components

Weights

font.weight4 tokens

regular400

Approve and add

medium500

Approve and add

semibold600

Approve and add

bold700

Approve and add

Aa
Body text.400
2 components
Components
- Accordion
- Checkbox
Aa
Labels and buttons.500
23 components
Components
Aa
Titles.600
15 components
Components
Only for numbers that must win a glance.700Unused

Line heights

font.line-height5 tokens

tight1.2

Semantic tokens give each color a job and point to a different primitive in each theme, so one change repaints every screen.

snug1.35

Semantic tokens give each color a job and point to a different primitive in each theme, so one change repaints every screen.

normal1.5

Semantic tokens give each color a job and point to a different primitive in each theme, so one change repaints every screen.

relaxed1.65

Semantic tokens give each color a job and point to a different primitive in each theme, so one change repaints every screen.

Icons and single glyphs, never text that wraps.1
3 components
Components
Headings from 24 px up.1.2
5 components
Components
Captions and card titles.1.35
14 components
Components
Body text and UI text that wraps.1.5
23 components
Components
Base styles
Read by base.css, the global stylesheet apps import once with @bridge-ds/react/styles.css.
Long reading, like changelogs and guidance.1.65Unused

Tracking

font.tracking5 tokens

Tighter as type gets bigger, slightly open at caption size. Values are in em, so they scale with the text.

-0.025Unused
Tokens
-0.015
2 components
Components
- EmptyState
- PageHeader
Tokens
-0.01
5 components
Components
0Unused
Tokens
0.01
18 components
Components

Families

font.family8 tokens

Brands pick their faces through the font roles font.family.display, font.family.sans and font.family.mono. Bridge sets Fraunces, Instrument Sans and IBM Plex Mono; Ocean uses IBM Plex throughout. All are self-hosted with @bridge-ds/tokens/fonts.css; without it, products fall back to the platform font.

display

Your design system, one source of truth

sans

Ship the system, not the slides

mono

color.bg.default 0O Il1

Aa
"Instrument Sans Variable", "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-seriffont family instrument-sans
40 components
Components
Base styles
Read by base.css, the global stylesheet apps import once with @bridge-ds/react/styles.css.
Aa
"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospacefont family plex-mono
4 components
Components
Base styles
Read by base.css, the global stylesheet apps import once with @bridge-ds/react/styles.css.
"Fraunces Variable", Fraunces, Georgia, Cambria, "Times New Roman", seriffont family frauncesUnused
Aa
Display and heading serif of the bridge brand."Fraunces Variable", Fraunces, Georgia, Cambria, "Times New Roman", serif
1 component
Components
- PageHeader
Aa
Body and UI sans of the bridge brand."Instrument Sans Variable", "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
40 components
Components
Base styles
Read by base.css, the global stylesheet apps import once with @bridge-ds/react/styles.css.
Aa
Self-hosted via @fontsource-variable/ibm-plex-sans (import @bridge-ds/tokens/fonts.css)."IBM Plex Sans Variable", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
40 components
Components
Base styles
Read by base.css, the global stylesheet apps import once with @bridge-ds/react/styles.css.
Aa
Self-hosted via @fontsource/ibm-plex-mono."IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
4 components
Components
Base styles
Read by base.css, the global stylesheet apps import once with @bridge-ds/react/styles.css.
system-ui, -apple-system, "Segoe UI", Roboto, sans-serifUnused

Updated Nov 11, 2026