Space and radius
Air that grows with the type, and three corners chosen by the size of the box.
The decision
- The problem
Air measured in screen height. On a wide, short screen the type grew and the air didn't: at 2000 by 1030 a 92px statement had 124px around it, barely one line.
- What I chose
Air sized by width, like the type, in two steps: chapter between blocks that say different things, interior between a headline and its text.
- Ruled out
A fixed scale in pixels, and anything measured in screen height around type measured in screen width.
- What it cost
Nothing on the About page: measured, its large headline already had 4.3 lines of air below it, so it keeps its own.
Spacing
The two main steps are read live from the stylesheet. From about 900 to 2000 pixels wide the statement keeps three times its own size in air. Past that the air stops growing a little before the type does, and on a phone there is relatively more.
Change the width
The type and the air of a statement, resolved from the live tokens for any screen from 320 to 2560 pixels. Drag it and the statement and the air around it grow together.
One block provides the air
When two blocks meet, only one of them provides the space. Decide which component owns its padding and make its neighbours yield. Without that rule, three reasonable exceptions pile up and the same component breathes 32px on one page and 140px on another.
Reading pauses
Full-screen cards hold still before the next one covers them: half a screen of scroll on the home, a third on the About chapters. The reader gets time with each one before it moves.
Radius
Three corners, chosen by the size of the box, not the type of component: a capsule, a panel, and everything else. The stylesheet once had thirteen. With photographs at 14px, the 12px of the small surfaces sat 2px away, and two values the eye can't tell apart are one, so they merged.
Nested corners are concentric: outer radius equals inner radius plus the gap between them. The contact composer is 27px because the send button is 20 and sits 7px in. And border-radius: 100px is not 100px: it means as much as the box allows, so on a box that grows the curve opens up. The composer broke exactly that way before it got its number.