BridgeHandbookDraft
For agents
Menu
Stable

Typography

Mulish on one ladder of sizes, each with one job: how to pick a size, how type behaves on phones, and how it maps to Arch.

One typeface, Mulish, on one short ladder of sizes. Each step has one job, so a screen's hierarchy reads at a glance: a title, the text under it, the details under that. The same ladder works on the web, on phones and in the mobile app; only display headlines grow with the screen.

Mulish

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 $ % · → ?!

  • Regular 400Body, meta
  • Medium 500Field labels
  • SemiBold 600Buttons, links, names in rows
  • Bold 700Titles, stats, eyebrows

The app loads Mulish once with next/font (weights 400 to 700), which sets --font-mulish; the package's base styles add -0.01em letter spacing and smoothing. No component names a font, and nothing asks for a weight that isn't loaded (800 would be faked).

The ladder

Ten steps from 11 to 48px, each with its line height built in. Write the named size (text-13, text-18): it sets the line height too. Nothing sits between the steps, and nothing goes under 11px except the Badge's 8px label.

  • Display

    28 → 36 → 48 · Bold

    Your network, at work

    The headline of a public or marketing page. Never inside the app.

    text-28 md:text-36 lg:text-48 font-bold tracking-tight

  • Page title

    22 / 28 · Bold

    Network overview

    The page's one h1. Also a dashboard stat, with tabular-nums.

    text-22 font-bold tracking-tight

  • Title

    18 / 26 · Bold

    Make an intro

    Dialogs, sheets, drawers, and a heading over a group of cards.

    text-18 font-bold tracking-tight

  • Small title

    16 / 24 · Bold

    Recent intros

    A card's heading. 14px in a header strip or a small card.

    text-16 font-bold tracking-tight

  • Body

    14 / 20 · Regular

    Leah leads Saltmarsh's climate fund and backs seed-stage grid software.

    Reading text: descriptions, dialogs, forms, empty states, and most text on phones.

    text-14

  • Label

    14 / 20 · SemiBold

    Make intro

    Buttons and links (SemiBold); names and field labels.

    text-14 font-semibold

  • Body dense

    13 / 20 · Regular

    Priya Natarajan was introduced to Leah Okonkwo

    Rows, tables, feeds and lists, where many items stack.

    text-13

  • Meta

    12 / 16 · Regular

    2 days ago · 4 mutual

    Dates, counts, help text, column headers.

    text-12

  • Eyebrow

    11 / 16 · Bold, caps

    Industry

    A small label over a value. Rare.

    text-11 font-bold uppercase tracking-[0.55px]

Picking a size

Pick by the job, not by how big it should look. Most of these come with the component, so a screen rarely writes a size at all.

You're settingUse
The headline of a public pageDisplay
The name of the page you're onPage title (22)
A number on a dashboardPage title size, tabular-nums (StatBox)
A dialog, sheet or drawer's titleTitle (18), set by the component
A heading above a group of cardsTitle (18)
A card's headingSmall title (16), set by Card
A paragraph, a form, a dialog's messageBody (14)
A list of people, intros or companiesBody dense (13), names SemiBold
When something happened, how many, a hintMeta (12)
A button or a linkLabel (14 SemiBold), set by Button

Web and phones

  • The ladder is the same on every screen. A phone doesn't shrink text: 14px body and 12px meta stay readable at arm's length.
  • Only Display grows with the screen: text-28 md:text-36 lg:text-48. App screens never use it.
  • Text fields are 16px on phones and 14px from 768px up (text-16 md:text-14), because iPhones zoom into any field set smaller. Input, Textarea, SearchInput and TagInput already do this; a hand-built field must too.
  • Long titles wrap rather than shrink. Truncate a name in a row; never a page title.
  • The mobile app uses the same numbers as React Native fontSize values, with the same line heights: 12/16, 14/20, 16/24, 18/26, 22/28.

Using type

One step apart, not two sizes the same

Recent intros

Priya Natarajan → Leah Okonkwo

2 days ago

Do. Title, body, meta: each a step down, so the order reads before the words do.

Recent intros

Priya Natarajan → Leah Okonkwo

2 days ago

Don’t. 15, 14, 13: three sizes a pixel apart. They look the same, so nothing leads.

Numbers line up

  • $1,250,000
  • $84,500
  • $312,000
  • $9,750
Do. Set amounts and counts in tabular-nums, aligned right, so digits stack.
  • $1,250,000
  • $84,500
  • $312,000
  • $9,750
Don’t. Leave them left-aligned in proportional figures. The column can't be scanned.

Sentence case

Recent introsWaiting for reply
Do. Titles, buttons and tags in sentence case. Capitals only for the eyebrow and the Badge.
RECENT INTROSWaiting For Reply
Don’t. Capitals or Title Case. They read louder and slower.
  • Titles and stats are Bold. Buttons, links and names in rows are SemiBold. Field labels are Medium. Everything else is Regular; Bold for a word of emphasis.
  • Text colors come from Color: --text-primary for titles and names, --text-body for reading text, --text-muted for meta.
  • One h1 per page. Heading levels follow the page's outline; the size follows the job. Never skip a level to get a smaller size.
  • Truncate names in rows to one line (truncate, with min-w-0 on the flex child) and clamp card descriptions to two (line-clamp-2). Never truncate an amount or a count.
  • Reading text that runs across a page stops at about 65 characters a line (max-w-prose).

Arch in Figma

Arch's text styles in Figma were drawn for the mobile app, a step or two larger than the web. Use the ladder above in code; when you design in Figma, this is the nearest Arch style for each step.

StepSizeNearest Arch style
Display28 → 36 → 48Heading 1 (28 B) → Display 2 (48 B)
Page title22 / 28between Heading 2 and Heading 1
Title18 / 26Heading 2 (18 B)
Small title16 / 24Heading 3 (16 B)
Body14 / 20Body 3 (14 LH20)
Label14 / 20Button (14 SB)
Body dense13 / 20Body 3, 1px smaller
Meta12 / 16Caption (12)
Eyebrow11 / 16Overline (10 B), 1px larger

Profile pages

Bridge OS's member and contact profile pages (/to/[username], /contact/[refId]) use steps of 4: 12, 16, 20 and 28px. That is a recorded exception for those pages only, and the parts they share with other screens (profile card, intros table, ICP card). Button, Badge and the rest stay on the ladder.

Rules

Sentence case

Buttons, titles, headings, tabs, labels and statuses use sentence case: only the first word and names get a capital. "Make intro", "Intro forwarded", "Stop sharing".

Nothing below 11px

No text is smaller than 11px, except the 8px uppercase Badge sticker. Use the scale: 24, 22, 16, 15, 14, 13 (body), 12, 11.

Numbers line up

Numbers that change or get compared (stats, counts, dates in a column, page numbers) use tabular-nums, so digits keep their width and columns line up.