Layout, Bento & App Shells
Grid
1440
12 col · 24 gutter
12 col · 24 gutter
1024
8 col · 20 gutter
8 col · 20 gutter
390
4 col · 16 gutter
4 col · 16 gutter
4
8
12
16
20
24
32
40
48
64
80
96
128
160
4-pt spacing scale, 4 → 160. Max content width 1280 px, 24 px gutters on mobile.
Bento rules
Tiles from 1×1 to 3×2. Exactly one hero tile per grid. Every tile type has a job; decoration isn’t one. On mobile, the hero stays first and tiles stack in reading order.
HERO · Live UI · 2×2
One per grid
METRIC · 1×1
$412k
QUOTE · 1×1
“Triage takes 40 min now.”
INTEGRATION · 1×1
SHORTCUT · 2×1
Read the API docs →
Expand
Tile gets a view-transition-name; open state renders the section with the same name. Esc or Collapse returns focus to the tile.
Tile gets a view-transition-name; open state renders the section with the same name. Esc or Collapse returns focus to the tile.
Reflow
1440: 3 col · 1024: 2 col · 390: 1 col. Spans clamp to available columns.
1440: 3 col · 1024: 2 col · 390: 1 col. Spans clamp to available columns.
Radius
10 · 16 · 24 · pill. Inner radius = outer − padding.
10 · 16 · 24 · pill. Inner radius = outer − padding.
App shell · Compact
CONTENT · rows 36 px (compact) / 48 px (comfortable)
INSPECTOR · 320 · collapsible
Settings
Left section nav, 640 px form column, sticky save bar.
Left section nav, 640 px form column, sticky save bar.
Billing
Plan card, usage meters, invoices table, payment method.
Plan card, usage meters, invoices table, payment method.
Onboarding
Full-screen, 560 px column, step progress top, skip always visible.
Full-screen, 560 px column, step progress top, skip always visible.
Help center
Two columns: 240 px nav + 720 px article, TOC on wide screens.
Two columns: 240 px nav + 720 px article, TOC on wide screens.