Hierarchy, spacing, light & alignment

Digested from Erik D. Kennedy: 7 Rules for Creating Gorgeous UI - Part 1 and Part 2, 3 Pro Tips on Alignment. Paraphrased in our vocabulary.

1. Light comes from the sky

Every shadow and gloss must be consistent with light falling from above: tops lighter, bottoms darker, shadows below. Inset things (inputs, pressed buttons, slider tracks, unchecked boxes) darken at the top; outset things (buttons, cards, popups, dropdown handles) lighten at the top and cast a small shadow below. In flat design the same physics survives as color: higher surfaces are brighter. Light from below reads as wrong instantly - pre-verbally.

2. Double your whitespace

Default markup has no air; designed pages have deliberate air - sometimes what feels like a ridiculous amount. Reframe: the page starts as whitespace and elements take space away, not the reverse. Space between lines, between elements, between groups of elements - with group gaps visibly larger than element gaps. His worked example: menu rows at 2× text height, list gaps 25px vs in-list 15px.

3. Pop and un-pop (two-direction emphasis)

Every text style is a mix of up-pop moves (bigger, bolder, darker-contrast, uppercase, more margin) and down-pop moves (smaller, lighter, grayer, lowercase, less margin). Only the page title is styled all-up-pop; everything else must combine both directions, leaning one way. Hover/selected states change color, background or shadow - never size or weight (layout shift).

4. Text over images - only by method

Never raw text on a raw photo. The methods: (1) whole-image dark overlay (~35% black); (2) text in a translucent dark box; (3) blur the region under the text; (4) floor fade - gradient to ~20% black at the bottom (bottom, because light comes from the top); (5) scrim - a soft elliptical dark gradient behind the text. White text throughout.

5. Alignment tips

• Left-aligned text aligns weakly on its right edge. Don't hang anything off a ragged right; flip the layout so both elements share the hard left edge.
• Centering is still aligning - vertically centering an avatar to its byline is an alignment decision, and often the right one.
• Hang the light stuff. Punctuation, bullets, icons - anything lighter than text hangs outside the text's alignment line, as print has done since Gutenberg.

Delta vs our system

CONFIRMS - Double whitespace = spacing by duplication. Our .25/.5/1/2/4rem ladder IS his doubling, tokenized; "group gaps > element gaps" = our hierarchy-gaps-≥1-step rule applied to space. - Pop/un-pop = scarce emphasis, and "only the title gets everything" matches our one-heart-per-page instinct. - Light from the sky is Teletubbies physics - the page must be pre-verbally plausible; wrong-direction shadows fail the 5-second test before the reader knows why. - Alignment over grids (see against-systems.md) validates our baseline-alignment rule - every element answers "what am I aligned to?".

ADDS - The inset/outset table. Which elements read carved-in vs raised is a rule we never wrote; it disciplines our cards, inputs and buttons in one line. - Text-over-image methods with numbers (35% overlay, ~20% floor fade, scrim). We have no rule; country leaflets and hero banners need one. - No size/weight change on hover - mechanical, checkable, prevents layout shift; absent from Autocontrol. - Hanging punctuation/bullets/icons - a print-grade refinement that fits our typographic seriousness; we currently let bullets sit inside the text edge. - Ragged-right warning - never align anything to the right edge of left-aligned text.

TENSION - His spacing is judged by eye, ours by token. He'd say "add air until it looks right"; we say "trace every gap to a token." Not contradictory - the token ladder is our way of freezing his verdicts - but his warning stands: passing token-audit doesn't yet mean the page breathes. The audit checks legality, the squint checks life.