BridgeComfortable

Previews use

Applies to every design system preview on the site. The Bridge app chrome stays the same.

Brand

Density

Typography

IBM Plex Sans for interface text, IBM Plex Mono for code and token names. Eight sizes on a 1.2 ratio from a 14 px base. If a design needs a step that is not here, propose a token instead of picking a value by eye.

Updated Oct 16, 2026

Edit in Studio

Select a token to see where it is used and its history. Click a name to copy it.

Copy names as

Type scale

font.size 8 tokens

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

800 42 px / 1.2 Rare display moments

Review the token change

700 35 px / 1.2 Empty states, onboarding

Review the token change

600 29 px / 1.2 Page titles

Review the token change

500 24 px / 1.2 Section headings

Review the token change

400 20 px / 1.35 Card and dialog titles

Every token change ships as a reviewed pull request.

300 17 px / 1.5 Reading body, lead text

Every token change ships as a reviewed pull request.

200 14 px / 1.5 UI text, labels, table cells

Every token change ships as a reviewed pull request.

100 12 px / 1.35 Captions, badges, table meta

Every token change ships as a reviewed pull request.

Weights

font.weight 4 tokens
regular 400

Approve and merge

medium 500

Approve and merge

semibold 600

Approve and merge

bold 700

Approve and merge

Line heights

font.line-height 5 tokens
tight 1.2

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

snug 1.35

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

normal 1.5

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

relaxed 1.65

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

Tracking

font.tracking 5 tokens

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

Families

font.family 5 tokens

Brands pick their faces through the font roles font.family.sans and font.family.mono. Both brands ship IBM Plex, self-hosted with @bridge-ds/tokens/fonts.css; without it, products fall back to the platform font.

sans

Ship the system, not the slides

mono

color.bg.default 0O Il1