Spacing and sizing

Raft spaces everything on a 4px grid and sizes everything people touch to at least 44px. Headers share one height across a screen, so the seams under them line up.

Principles

• Space on the 4px grid. Use Tailwind's spacing scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px.
• Touch targets are at least 44px. A control that looks smaller is padded up to 44px by its hit area, not by its drawing.
• Headers line up. Every header on a screen has the same height, so the seam under each one runs as one line.

Spacing

• Use the 4px steps for all spacing between and inside components.
• Inside small pieces (chips, the gap between a pixel and its word, tags) a half step of 2px is allowed: 6px and 10px.

Hit targets

• Make every touch target at least 44px in both directions.
• Extend a control that looks smaller than 44px, and a text button, with a transparent pseudo-element to 44px.
• Don't extend inline links and reference chips in running text: they follow the line of text.
• Desktop controls used only with a pointer may be smaller: sidebar rows and menu items 36px, rail items 40px, the hover toolbar 32px.

Heights

• Make the rail header a 56px square.
• When the desktop window is shorter than 600px (@media (max-height: 600px)), shrink every 56px header to 48px together. The rail shrinks with them, its header stays square, and rail items shrink from 40px to 36px; see Responsive layout.

Avatar sizes

Avatars come in 19px, 27px, 35px, 51px and 99px: a multiple of 8 plus two 1.5px edges. See Avatar.

Layout widths

How things land on these margins is in Alignment. Breakpoints are in Responsive layout.

Related

• Page structure: how the regions are arranged.
• Shape: radii and stroke widths.