Foundations

Spacing and grid

The spacing scale, radii and the inner-outer rule

Inner is smaller than outer

After Maxim Ilyakhov: related elements sit closer to each other than to the next group and to the container’s edge. Empty space defines groups, not borders or lines. Rule 13 in DESIGN.md, “Grid and spacing”

Steps

Each step is clearly larger than the previous one, neighboring steps are never equal. If a label sits 8 from its field, the next field is at least 16 away

4–12

Pair

label and field, title and description, icon and text

8–16

Group items

form fields, rows, cards with captions

24–32

Groups

page sections, tile blocks

20

Tile edge

from content to the edge

Bad and good

Same content, different spacing. In the bad one the eye groups unrelated elements

Label and field

Bad: fields 8 apart, label 12 from its field: it’s closer to the field above
Good: label 8 from its field, fields 24 apart

Section heading

The summary was generated, check the names

Tasks

Beta on Friday, copy due Thursday

Bad: heading is equally far from the text above and below, it’s unclear what it belongs to

The summary was generated, check the names

Tasks

Beta on Friday, copy due Thursday

Good: heading 8 from its text, 32 from the previous section

Card caption

Design sync

Beta review

Bad: caption 12 from its card, cards 8 apart: the caption pulls toward the next one

Design sync

Beta review

Good: caption 8 from its card, captioned cards 24 apart

Icon in a button

Start recording
Bad: icon 16 from the text and 8 from the edge: it drifts away from the label
Start recording
Good: icon 8 from the text, 20 from the edge

Exception: filled containers

The edge of a filled container separates the group on its own. Tiles with padding 20 sit 8 apart, and that’s fine. The rule applies inside the tile: title and description 4 apart, 20 to the edge

Meetings

12 this week

Summaries

Ready for 9

Recordings

3 h 40 min

Scale and radii

Radii

rounded-chip
8 · labels, 40 thumbnails
rounded-nested
16 · nested
rounded-window
17 · macOS window
rounded-tile
24 · tile
rounded-panel
40 · panel
rounded-frame
56 · site frame
rounded-pill
pill · buttons, fields, chips

Spacing scale

8 / 12 / 16 / 20 / 24 / 32, no other values; 4 only for optical fixes

4
8
12
16
20
24
32

Tile, nested and gaps

Tile: padding 20, radius 24

Nested: radius 16 = 24 − 8

8 between tiles and from the window edge

Air instead of lines: no borders or dividers