Brand mark
A disc with a 3×3 lattice and a line that traces a legal board path across it. The disc is the O of "utword", and the logo is a move you could make in a round.
How it's built
The mark is the traced O: a filled disc, a 3×3 lattice of dots, and a line that traces a board path across them. The word "utword" follows it, so the disc reads as the word's first letter. It's drawn as SVG on a 0 0 100 100 viewBox, so it stays sharp at any size and any pixel density.
Construction
Every number is locked, and they all come from one constant: the cell spacing is 0.234 of the disc's diameter (R_CELL).
| Part | Spec | Token |
|---|---|---|
| Disc | centre 50, 50; radius 34.2, so its diameter (68.4) is 68.4% of the box | fill --fg |
| Lattice | 9 dots, radius 3.15, one cell apart: 0.234 × 68.4 = 16.01 units, so the dots sit at 33.99, 50 and 66.01 on each axis | fill --mark-dot |
| Trace | a polyline through dot centres, stroke width 3.9, round caps and joins, pathLength="1" so one dash formula draws every path | stroke --ground |
| Word | "utword" in --font-display, weight 700, the same size as the mark (1em), pulled in by -0.125em, letter-spacing −0.5px | --fg |
| Box | the SVG is 1.30 × the mark's size, so the disc sits on the word's cap line |
The trace is drawn in the ground colour. Because all three parts are tokens, the mark swaps with the mode: a cream disc with a navy trace on the dark ground, a navy disc with a cream trace on the light one.
Sizes in use
| Where | Size | Mark box | Disc | Dots across | Trace width |
|---|---|---|---|---|---|
| Header | 30 | 39px | 26.7px | 2.5px | 1.5px |
| "Played before?" | 40 | 52px | 35.6px | 3.3px | 2.0px |
App icons (apple-touch-icon, icon-180, icon-192, icon-512) | 180 to 512px | disc, lattice and hook on the dark ground | |||
Favicon (favicon-16, favicon-32) | 16 and 32px | disc and hook only; the lattice is left out |
The traces
The trace only ever draws a real board path: each step moves to a touching cell, across an edge or a corner, and never visits a cell twice. That's the exact rule you swipe by in a round, so every frame of the logo is a word shape a player could make. On a 3×3 lattice that rule allows 10,256 paths of 3 to 9 cells. The mark doesn't draw them at random, because a random path throws an awkward shape at logo size now and then; it rotates through a curated set.
Cells are numbered across the lattice, left to right, top to bottom:
0 1 2
3 4 5
6 7 8| Order | Path | Shape |
|---|---|---|
| 1 | 1 · 4 · 7 · 6 · 3 | the hook: down the middle, across the bottom, up the left. The canonical path |
| 2 | 0 · 4 · 8 · 5 · 2 | the diagonal down, then back up the right |
| 3 | 6 · 4 · 2 · 1 · 0 | the diagonal up, then across the top |
| 4 | 6 · 3 · 1 · 5 · 8 | an arch over the middle |
Motion
The lattice holds still; the trace moves. Each path draws in over 1400ms, holds for 2800ms, retracts over 1000ms and pauses for 500ms: a 5700ms cycle, eased cubic in and out, then the next path. All four take 22.8 seconds. It's the game's own swipe gesture at an ambient pace.
It only moves where motion belongs:
- On Home only. The header mark is
liveon Home. On every other screen, and above all during a round, it rests on the hook. - On screen only. An
IntersectionObserverstops it when the mark scrolls out of view and starts it again when it comes back. - Still under reduced motion. With
prefers-reduced-motion: reduceit never starts, and shows the hook fully drawn.
The name board on Home is the same primitive: the same tiles, the same trace polyline (--trace, width 2.4, 50% opacity), drawn at 190ms a letter.
Do and don't
Accessibility
- The lockup is one image to assistive technology:
role="img"with the label "Outword", and the SVG inside isaria-hiddenandfocusable="false", so it's announced once, as "Outword". - In the header it sits inside a button labelled "Home", which leaves the current screen for Home.
- It holds still under reduced motion and during play, so the one loop in the system never competes with the board.
Why it's built this way
Known issues and gaps
- The one-page reference shows twelve traces; the game draws four. The reference page's mark section and its changelog say 3.14.6 moved the mark to "a curated rotation of twelve legal traces (was four)". The code, the shipping bundle and the spec all have the four paths above. The code wins: the rotation is four until a release says otherwise.
- No minimum size is set. The smallest lattice in use is the header mark, where each dot is about 2.5px across. The 16px and 32px favicons already leave the lattice out and keep the disc and the hook, but that's a decision made in the icon files, not a written rule.
- The word isn't Arial Black on iPhones.
--font-displayfalls back to the system face on iOS, so "utword" is set in the system face at 700 there. The screenshots in these docs show the same fallback. - "Menus" means Home. The motion rules say the mark loops "on menus"; in the code it animates on Home and rests everywhere else.
Related
- Motion: the one loop in a system that otherwise holds still
- Tile: the board the trace comes from
- Color:
--fg,--mark-dotand--groundin both modes - Principles: 05, unmistakably Outword