Layout and spacing

#How it works

Outword is laid out for a phone. Every screen is a single column, and every release is tried at two sizes before it ships: 390×664 and 320×568. The screenshots in these docs are 390×844, captured at 2×.

#Safe areas

The page runs edge to edge (viewport-fit=cover), so the CSS clears the notch, the Dynamic Island and the home indicator itself with env(safe-area-inset-*):

• The page adds 32px under the top inset and 20px over the bottom one, and its gutters never shrink below 20px.
• The action bar sits 16px over the bottom inset.
• A sheet's foot sits 8px over the home indicator, which already reserves room of its own. Where there's no inset to sit on (a desktop, an iPhone SE, Android with hardware buttons) it falls back to 16px. A sheet with no foot adds the inset under its body (3.25.4). While a keyboard is up, sheets sit on top of it (--kb) and drop the inset.
• Toasts drop in 14px under the top inset.

#Short and narrow screens

Two media queries respond to the screen's size. Each one changes a single screen.

Both test sizes are under 760px tall, so the tightened trivia layout is the one testers see. The results screen doesn't use a query: it measures its own action bar at runtime (--bar-h) and sizes its scrolling area to leave exactly that much room, plus 96px.

#The board

The board is a CSS grid, gap: 8px, 4×4 or 5×5, that fills the column. Tile sizes at common widths, computed from the CSS:

The smallest tile in play, a 5×5 tile on a 320px phone, is still above the 44px target floor.

#Spacing

The spec describes a 4px base grid with common gaps of 8, 12, 16, 20 and 24. The code tells a different story. Counted across every padding, margin and gap in the game's CSS, 279 of 537 values sit on the 4px grid and 258 don't:

The eight most used steps are every even number from 2 to 16. In practice the system runs on a 2px sub-grid, and 10 and 14 are as much a part of the rhythm as 8 and 12.

Some rhythms are written down, in the code or the spec:

#Corner radius

Radius tells you what a shape does. Square is tap, pill is read, circle is rank: buttons and fields are rounded squares, a pill holds a live value, and a circle is a place in the standings. No button is ever circular.

Some small copies of the tile keep a proportion rather than a pixel value: Compete card tiles round at 28% of their size, confetti tiles at 22%, and the help sheet's thumbnail boards scale every tile value by 24/52.

#Touch targets

The rule is that every interactive element is at least 44px in its smaller dimension. One control breaks it.

#Rules

#Why it's built this way

#Known issues and gaps

From the 3.23.6 audit, plus what turned up while writing this page:

• The 4px grid isn't the real grid. 258 spacing values fall off it, and 10, 14, 6 and 2 are among the most used steps. Planned fix: document the 2px sub-grid honestly, then make the common steps tokens.
• No radius tokens. 21 distinct values against a documented ladder of 12, 999 and 14 (plus 8, 10, 16, 18 and 2). The strays still rendered are 1, 4, 6, 7 and 9px; 11, 13, 15 and 22px appear only in CSS nothing renders. Planned fix: --radius-sm 8, md 12, lg 14, sheet 18, pill 999, and map the strays.
• The spec's gutter is wrong. It says the page gutter is --bar-pad (16px). The code's gutter is 20px; --bar-pad is the action bar's and the sheet foot's vertical padding. The trivia spec uses the same 16 and puts the question "33px from each screen edge (16 gutter + 1 border + 16 padding)"; it's 37px, and the CSS comment on .tv-q ("main gives 16") is stale.
• The spec's sheet rhythm is from before 3.9.1. It gives the head as 20 / 4 / 16 / 12; the code has been 24 / 4 / 20 / 16 since 3.9.1, and the comment above .modal-head still says 20 / 4 / 16 / 12.
• A height query the code itself warns against. The help sheet avoids max-height queries on purpose: Mobile Safari changes the viewport height as its bars show and hide, so a height query can flip while you scroll and resize the board. Trivia's max-height: 760px query (3.22.1) is that kind of query. Whether it flips on a phone near 760px hasn't been checked.
• The help sheet ends lower than the other sheets. Its CSS says its bottom padding is .modal-foot's expression "verbatim", and it was in 3.9.1. The foot has since moved to max(16px, 8px + inset) while the help sheet kept max(16px, inset), so on a phone with a home indicator the help sheet ends 8px lower than every other sheet.
• One tap target under the floor. "Clear" in the word log is 32px tall. Planned fix (3.23.7): min-height: 44px with the same visual text.

#Related

• Typography: what sits in the column
• Tile: the board's one shape
• Sheet: the bottom sheet's head, body and foot
• D-004, the question card: the rule that the play surface never moves