# Hierarchy, spacing, light & alignment

Digested from Erik D. Kennedy: [7 Rules for Creating Gorgeous UI - Part 1](https://www.learnui.design/blog/7-rules-for-creating-gorgeous-ui-part-1.html) and [Part 2](https://www.learnui.design/blog/7-rules-for-creating-gorgeous-ui-part-2.html), [3 Pro Tips on Alignment](https://www.learnui.design/blog/3-pro-tips-on-alignment.html). 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.