Stable

Spacing

4px steps and eight named distances, picked by how related two things are; control heights, rows and page edges.

Spacing comes in 4px steps, and a handful of named distances cover almost every decision. Pick a distance by how related two things are, not by eye: the closer two things are in meaning, the closer they sit.

The scale

In Tailwind one unit is 4px, so gap-3 is 12px and p-6 is 24px. Layout uses the 4px steps; 2 and 6px are for the insides of package components only.

Size	Tailwind
2px	`p-0.5 gap-0.5`
4px	`p-1 gap-1`
6px	`p-1.5 gap-1.5`
8px	`p-2 gap-2`
12px	`p-3 gap-3`
16px	`p-4 gap-4`
20px	`p-5 gap-5`
24px	`p-6 gap-6`
32px	`p-8 gap-8`
40px	`p-10 gap-10`
48px	`p-12 gap-12`
64px	`p-16 gap-16`

Named distances

Eight answers to “how far apart?”. Each is what most of Bridge's apps already use for that job.

Between	Distance	Classes
Inside a thing: icon to label, buttons in a row, a dot and its word	8px (6 in small controls)	`gap-2` (`gap-1.5`)
A title and its subtitle	4px	`mt-1`
Related items: rows in a list, a label and its field, fields in a group	12px	`gap-3`
A heading and the content under it	16px	`gap-4`, `mb-4`
Between cards, in a grid or a stack	16px	`gap-4`
Inside a dialog, sheet or drawer	24px, 16px between its parts	set by the component
Between sections of a page	32px	`gap-8`
Page edges	16 → 24 → 32px	`px-4 sm:px-6 lg:px-8`

A card, measured

Every distance in this card is one of the named ones. The card sets its own padding (Card, lg); the rest is gap on the parent.

Recent intros

Made or received this month

Priya Natarajan4 days ago

Mei Lin ZhouSep 2

Control heights

Controls come in four heights on the same grid, so a field, a button and a chip in one row line up without extra classes.

Height	Class	Used for
28px	`h-7`	Small buttons in rows and toolbars (`xs`), filter chips. Bridge's smallest target.
32px	`h-8`	The default button (`sm`), icon buttons, segmented controls.
40px	`h-10`	Text fields, search, the medium button: they line up in a row. 44px on phones (see Responsive).
48px	`h-12`	The large button, on public pages and single-action screens.
44px		The smallest target in the mobile app (Apple's touch guideline).

Rows

Row	Space	How
A list row in a card	12px top and bottom; the card's side padding	`py-3`
A table row	14px top and bottom, 16 to 24px at the ends	set by DataTable
A row inside another card (`bare`)	14px top and bottom	set by Card
A menu item	8px top and bottom, 12px at the sides	set by ActionMenu

Pages and screens

Page edges are 16px on phones, 24px from 640px and 32px from 1024px: px-4 sm:px-6 lg:px-8. The mobile app uses 16.
The page starts 24px under the top bar on phones and 32px from 640px (pt-6 sm:pt-8); sections are 32px apart (gap-8).
How wide a page gets is on Layout. Spacing doesn't grow with the screen beyond the page edges: a bigger screen shows more, not looser.

Using spacing

Named distances, not nudges

Leah Okonkwo

Priya Natarajan

Mei Lin Zhou

Do. Every row 12px top and bottom, every avatar 8px from its name.

Leah Okonkwo

Priya Natarajan

Mei Lin Zhou

Don’t. 10, 14, 11: each row nudged by eye. Close enough to look like a mistake.

Closer means more related

Notifications

Emails Bridge sends you

Do. 4px from title to subtitle, 16px from them to the content: the pair reads as one.

Notifications

Emails Bridge sends you

Don’t. The subtitle floats away from its title and sticks to the content below.

Put gap on the parent, not margins on each child: one source per direction, and a hidden child leaves no stray space.
Never a negative margin to break out of padding. Use Card's flush, CardMedia or a strip header, which reach the edge for you.
Gaps between layout blocks (cards, sections, columns) are multiples of 8.
Never an arbitrary value (p-[18px]). If no named distance fits, the structure is wrong: fix the layout.
A bigger card gets more content, not more padding. Padding comes from Card's size.

In code

// A page: edges 16 → 24 → 32, sections 32 apart
<main className="mx-auto w-full max-w-7xl px-4 pt-6 pb-12 sm:px-6 sm:pt-8 lg:px-8">
  <div className="flex flex-col gap-8">…</div>
</main>

// A grid of cards: 16 apart
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
  <Card size="md">…</Card>
</div>

// Rows in a card: 12 apart, 8 from avatar to name
<ul className="flex flex-col gap-3">
  <li className="flex items-center gap-2">…</li>
</ul>