01  Principles

Principles

Five beliefs, in priority order — when two conflict, the higher one wins. The mechanical choices under them aren't separate rules; they're these, made concrete. Written to be used in a critique, not admired on a wall.

How they show up

The recurring mechanical choices in this document — each one is a driver above, made concrete.

• The board is the hero; everything else stays quiet. One primary action per screen, controls in outline, and no decoration that pulls the eye off the letters.
• One hue, one meaning · one pill, one live value. Green is earned, rose is danger, plus one system hue for focus; a pill holds a single changing number, never a static label.
• Motion belongs to menus, not gameplay. Ambient movement on idle screens; the instant a round goes live, everything freezes.
• Two grounds, symmetric. Light and dark are one system with the roles swapped; every colour is a token, so a hardcoded value can't survive a mode flip.

02  Foundations

Color

Two grounds. The color that is the page in one mode is the ink in the other. The ground/ink pair is a true inversion; the softer tiers — soft, faint, lit — are hand-tuned per mode rather than blindly swapped, so each reads correctly.

Tokens are built in three tiers: a base reference (--dk-* / --lt-*) holding the only literal values; an active layer (--ground, --fg…) that components reference; and a mode swap on :root[data-mode="light"] that repoints the active layer. Flipping that one attribute is the whole mechanism — a hardcoded hex can't follow it, which is why it's forbidden.

fig.01 — the same two roles, grounds swapped

The two semantic hues

Green (--earned) and rose (--danger) are the only colors that carry meaning — and the only ones that don't invert. Each means exactly one thing. Green is never a selection colour: a word shown or traced on a board, and the pill that shows it, use the pressed-tile state. Shown in context, on the word pill they live on:

fig.02 — earned · danger · dup · neutral

04  Foundations

Radius

Three radii carry the system. Reach past them only with a reason.

Also present: 8 (brand die), 10 (segmented), 18 (sheet top), 2 (rails). Prefer 12 / 999 / 14.

05  Foundations

Spacing

A 4px base grid. Common gaps: 8 / 12 / 16 / 20 / 24. The modal head is the reference rhythm — 20 above the title, 4 to the sub, 16 to the rule, 12 under.

06  Foundations

Motion

Motion in Outword has one job: make the game feel alive without slowing anyone down. It explains where something came from, confirms a tap, or celebrates something rare. A move that does none of those gets cut.

Principles

• Purpose first. Every move answers one question: where did that come from, did that work, or is this worth celebrating.
• Size it to the moment. Things that happen often stay small and quick. Only things that happen once get a story (see the moment map).
• The round is sacred. While a clock is running, only feedback moves: tile state and the word pill. No ambient motion and no celebration on the board.
• Physical, not magic. Things arrive from somewhere and leave to somewhere. Nothing pops out of nothing, and nothing stretches.
• Calm by default. Motion settles and stops. Attention is asked for once per visit, then the screen goes still.

Vocabulary

Seven moves cover everything that ships. New motion uses one of these before it invents anything. Press a move to replay it.

Ambient · the brand-mark trace runs a 5700ms cycle on menus only (see Brand mark) · mode cross-fade eases the ground over 0.5s · chevron 0.15s

The moment map

Rules

1. Only feedback moves during a live round. Celebration, attention and ambient motion all wait for Home or results.
2. Never scale from zero. Pops start at ×0.4–0.9. Things fade and grow in; they don't appear from a point.
3. Grow with a mask, never a stretch. Anything with text, a radius or a border slides out of a clipping mask (translateY(101%) → 0). scaleY on those is banned, because it squashes corners and type.
4. Enter slow, leave fast. Entries decelerate and exits accelerate. An exit is never longer than the entry it undoes.
5. One move per area at a time. Groups stagger 40–60ms apart so the eye can follow. Two things never compete in one spot.
6. Ask for attention once. A ring or dot animates on the first view of a visit (sessionStorage), then holds still. Nothing loops forever except the brand mark on menus.
7. Confetti is earned, and it clears. Rare positive moments only, the full fall (4–6s), and it's gone before any button needs a tap.
8. Errors don't shake. Colour plus plain words. Shaking reads as scolding, and kids use this too.
9. Reading time is part of the motion. In a story, hold 3s after each caption lands before the next beat starts.
10. Only transform and opacity. No animating width, height, top or box-shadow, so motion stays smooth on older phones.
11. Reduced motion is a full design, not an off switch. See below.

Reduced motion

07  Foundations

Brand mark

A filled disc with a 3×3 lattice, and a line that traces a legal board path across it — the disc is the leading O of "utword." SVG on a 0 0 100 100 viewBox; geometry locked to the approved reference.

fig.06 — the live mark, tracing legal board paths · disc --fg · dots --mark-dot · trace --ground

Legal traces

The trace only ever draws a real board path — cells that touch, edges or corners, and never the same one twice. It's the exact rule you swipe by in a round: a word is just a legal trace with letters on it.

The rule allows 10,256 legal paths of 3 to 9 cells. Drawing them at random throws the occasional awkward shape at logo size, so the mark instead rotates through a curated set (the four below, the game's MARK_PATHS, chosen to read cleanly), starting from the canonical hook (1·4·7·6·3), which is also the app icon and the still frame under reduced-motion.

the rotation set · the live mark above cycles these in order · hook leads and is canonical

Motion — the lattice holds, the trace moves

Each trace runs the same beat: draw 1400ms → hold 2800ms → retract 1000ms → pause 500ms — a 5700ms cycle, eased cubic in-out — then the next in the rotation. The nine dots never move; only the line does. It's the game's own swipe gesture, slowed to an ambient pace.

The NameGrid is the same primitive — as of v3.14.1 its letters recede, so its trace line stays visible while the game board's is hidden.

08  Components

Tiles

The heart of the UI; everything else is quiet around it. Square by construction, radius 14, 2.5px border, box-sizing border-box so a state change never shifts the grid.

Name board

On the home screen your name is spelled across a mini board — the reward for typing a real name. It's the same tile, the same selected treatment, and the same polyline as gameplay, so it reads as a board rather than decoration. The name sits on a random legal path (adjacent cells, no reuse); the rest is filler. The name letters wear the selected/recede treatment (--select fill + --select-stroke) while filler stays the bright resting tile — the inverse emphasis of gameplay, which is exactly why the trace line shows here.

5 columns · tile radius 9 · trace --trace, width 2.4, 50% · draws at 190ms/letter

09  Components

Buttons & controls

One primary per screen, and it's the action people are most likely to take — not the one listed first. Most players join rather than host, so Join is the filled primary and Create is the outline. Everything else is an outline too; there is no third style — a screen that seems to need one has too many actions.

States

default · pressed (scale .98 + brightness .94) · focus (2px --gold ring, offset 2) · disabled (.4 opacity)

10  Components

Toggle

Two toggles. The segmented control switches between named options — the on segment fills with --fg, so the choice reads as loud as a primary. The mode toggle is a single icon button that flips the ground.

11  Components

Pills

Radius 999, reserved for a single live value — the clock, the score, the word being traced. Not for recaps or badges; those use weight and ink.

fig.10 — timer · urgent (rose, ground ink) · score

The word pill's resting state is boxless, so touching a tile has nothing to collapse; min-height holds the slot. Arriving fades grey→green; leaving is instant (.empty is transition:none) so no green blob lingers after the word is gone.

Tappable word pills

resting · active (its word is showing on the board) — the pill flips exactly like a pressed tile · never green

12  Components

Cards & sheets

Exactly three elevation levels — depth comes from the tile's inset lip, not stacked shadows: --ground (page), --raise (on it), --lit (a tile in the trace).

Bottom sheet

The app's modal rises from the bottom — that's where thumbs already are. The scrim dismisses; the ✕ is for people who don't know that. Every gap in the head is a multiple of 4: 20 above the title, 4 to the sub, 16 to the rule, 12 under.

fig.11 — scrim dismisses · sheet rises from the thumb line · 18px top radius only

13  Components

Fields

One field style. The name field is the default; the join field is the same field with a .code modifier — centered, uppercase, +6px — for typing a host's 4-letter code.

States

Validation runs on submit, never while typing. The field itself doesn't change on error — the message does the work: names show an inline .field-err, the join code shows an .err banner. Fields never disable.

14  Components

Compete cards

Home's Compete section is a small bento: the monthly leaderboard row, the Daily board (full width), then Longest word and Trivia side by side. Every card is one tap target with its arrow tucked in the top-right corner. A card turns green once you've played that game today — green means earned, so it never shows before.

Longest word card

Before: empty slots for the board's longest word (5 + 4) with a small lock, "Longest word / 60 sec · 9 letters". After: your word in selected tiles in the slots, "Longest ✓ / 6 of 9". The lock opens (green) only when you found the longest word possible; white when someone else did.

Trivia card · option K (3.23.2)

Before: the ? tile, "Trivia", "2 min · as many as you can" — nothing else, so it never reads text-heavy. After: your place today as a rank circle (circle = rank) with "2nd today / of 14", your count, and one quiet line. The number always leads, so a long name only ever truncates itself.

15  Patterns

System states

Outword is realtime and multiplayer, so waiting and failure are core surfaces, not corners. Every state below ships in the app — the copy is verbatim, and it's where the Voice principles actually earn their keep.

16  Patterns

Help & recovery

A swipeable help deck that teaches the game in the game's own language (3.18), and a short recovery code so a cleared browser or a new phone never loses your name and rank (3.21).

Help sheet

Opened from the header ? — a swipeable deck across two sections: Playing and Competing. The chooser lists them with a thumbnail board that spells each name on a trace; open one and the cards demonstrate on a real mini board — the same tile and trace as gameplay — so the tutorial is the game, not a diagram of it. It auto-opens once on a true first visit, and never during a live round, where the clock would keep running behind it.

the chooser · each thumbnail spells its section on a trace board · cards teach on real mini boards

Recovery code (3.21)

Identity lives under a hidden id. Every player gets a short code: six characters in two groups of three (K7P-RX4), drawn from 20 letters and 5 digits with everything a kid could misread left out (0/O, 1/I/L, 2/Z, 5/S, 8/B). At least two digits and never four letters in a row, so a code can't spell a word. It's made in the background the moment the player exists and stored in Firebase (rc/CODE → id, create-only and not listable; rcu/id → CODE). The old long code (otter-cobalt-a1b2c3d4) still restores forever, and is shown if the short code can't be made.

The code is shown as tiles, outlined in --fg, never a boxed input. The whole panel is the copy button (square = tap). Save is two buttons side by side: Save to Photos (primary) shares a picture of the code with instructions on it; Save to Notes (outline) shares a ready-made note. Each turns into an outlined "Saved to …" with a check. Text buttons carry no icons.

17  Patterns

Celebration

One moment a month. On the 1st, last month's final standings open as a podium for everyone, the winner wears a crown for the rest of the month, and confetti falls. All of it is built from parts the game already owns: the three tile states, the trace line, and the brand's flared crown. No new hue, and nothing ever plays during a round.

The crown

The crown means one thing: won last month. It hangs off the top-left of that player's rank circle, tilted back, so it reads as a crown on the rank without hiding the number. It's a flared shape (three points, a dot on each, a base that narrows) because that's the one that reads as a champion at 16px.

The podium

Players asked for gold, silver and bronze. The system says it in tiles instead: 1st is a solid tile, 2nd a traced tile, 3rd a lit tile. The board's own vocabulary, so the top three stand apart without a fourth hue.

Who sees what

Confetti

When it shows

• On the 1st, once. The sheet opens on its own the first time the app lands on home that day, and only if last month had a scorer. ow_podium_YYYY-MM marks it seen.
• Rest of the 1st. Closing it leaves a "Today" card at the top of Compete: a tiny podium with the crown, who won, and who closed it out. Tapping reopens the sheet. Gone at midnight.
• No action button. The X and the scrim close it. There's nothing to do next, so the sheet doesn't pretend there is.
• All month. The crown stays on the winner's rank circle until the next 1st.

18  Patterns

Update reel

The "What's new" popup that plays once after each release: one continuous story built from the app's real pieces, not screenshots or a phone frame. The format is fixed; only the chapters change. It's the place motion gets to tell a story, because it happens once. Its job: show players exactly what was added, how to use it, and where and when they'll see it.

Principles

• Real pieces, not screens. Rows, the key, code tiles, the code card, the podium and the crown, lifted onto the ground bigger than life.
• One hero object. The tile carries the story; each beat grows out of the last, like a match cut.
• Make it theirs. The player's own name and code.
• Say what's new. The open counts the changes, "New:" marks a feature, the rail names each chapter.
• One move per beat (a deal, a fill, a drop), and a 3s hold after each caption so it can be read.
• Kinetic captions. Headline of 5 words or fewer; each word rises 60ms after the last out of a 4px blur. One line of 14 words or fewer under it.
• Earned celebration. The full confetti only where a chapter earns it, and it clears before the buttons.
• Quiet close. Plain words and one useful pointer. Never a finale.

The template

Every release uses the same shape, so players learn how to watch it. Only what goes into the slots changes.

Total = 5s + 9s per chapter + close · 1 to 3 chapters · never longer than about 35s

Inside a chapter: four beats

Each chapter answers four questions in order, so a player leaves knowing exactly what was added, why it matters, how to use it, and where to find it. A simple feature can fold beats together: the 3.21 podium is one beat that answers New, How and When at once. Worked example: 3.21, chapter 1, with its real copy.

Chapter spec

Fill one of these in for every chapter before anything is animated. If a field can't be filled, the change probably doesn't need a chapter.

The close: where each thing lives

What gets a chapter

Copy template

OPEN       eyebrow  New in Outword · {version}
           headline New in Outword
           sub      {N} new things in {version}.
CHAPTER n  rail     {n} · {Name}
           context  {What they already know, ≤5 words}
                    {why it matters, one line}
           new      New: {the thing, ≤4 words}
           how      {Verb} … {≤14 words}
           where    {Place in the app}
CLOSE      recap    {Name} · {Where or when}   (one per chapter)
           headline That's what's new
           sub      {Both are / It's / All three are} live now.
           buttons  [Continue playing → Home]   Watch again

Before it ships

1. Every chapter's spec table is filled, with real copy and no placeholders.
2. The open says how many things are new, and the rail names each one.
3. Every hero is a real component from the app, at its real proportions.
4. Each beat uses one move from the vocabulary, with a 3s hold after its caption.
5. The player's own name and code appear wherever the story shows them.
6. Confetti only where a chapter earns it, and it's gone before the close.
7. Reduced motion opens on the close, and every recap line still makes sense alone.
8. Screen readers hear one sentence per beat in a live region.
9. It plays once per version, on Home, for returning players only. Never mid-round.

19  Patterns

Trivia

A question on top, its answer hidden on a 5×5 board as a path you swipe. The daily run is 2 minutes, as many questions as you can: solve one and the next is straight up. One hint for the whole game; skip is free. The same pieces as every other board — tiles, the trace, the word pill — so nothing new had to be learned.

The question card

Questions run 1 to 4 lines, and anything above the board that changes height moves the board under the player's thumb. So the question sits in a card that keeps one height for the whole run: as tall as the run's longest question. Every question of the run is laid out, hidden, in the card's one grid cell, so the browser measures the height at the player's own width and font size. The label and question sit centred, with equal space above and below. Spare space reads as padding only when it belongs to a surface.

The hint tag

The hint lights the first two path tiles and rides in the pill as a soft filled tag with a bulb. The tag sits tight against the rest of the word so PO·PCORN reads as one word, and it stays through wrong answers and the green solve. With the hint lit, tracing the whole word, starting on the second hint tile, or tracing only what's left all count.

End of the run

The summary shows the count big, "solved · N skipped · hint used", then every question you met in order: your answer in selected tiles + SOLVED (green), or dashed empty tiles + SKIPPED. If you have the most today the label reads "You solved the most" in green and the podium confetti fires — the only celebration in trivia, and it happens after the round. Otherwise "Solved in 2 minutes". 3.25.5: tap any answer and a sheet shows its question, the answer forming in the word pill, and the board it was on with the answer traced: the daily board leaderboard's small board, pressed tiles and soft trace. Tap the board to play it again; room results open the same sheet with who solved it. The leaderboard ranks most solved, then fewer skips; the leader reads "most today". No lock, no "unlocked".

Trivia mode in Play

Trivia replaced Survival in Create game and Play solo. Settings: Round 1 / 2 / 3 min and Difficulty Mixed · Easy · Intermediate · Difficult (a full-width segmented control — the selected segment is --fg solid, never the tile treatment). The rules card says it in three lines, including "one hint for the whole game". In rooms everyone gets the same questions in the same order; results show standings (solved, skips) and every question with chips for who solved it (you in green, "nobody" in italic).

20  Patterns

Scoring

Every game scores in small numbers a player can add in their head. Rooms and solo boards rank the people in them; the three daily games also bank points into one monthly total, which is the leaderboard on Home. Points are banked once, when you finish, and never recomputed.

Word points

A word is worth its length minus two, with a floor of one: 3 letters = 1, 4 = 2, then letters − 2 (partyScore). Under 3 letters isn't a word.

Each game

The month

Banked points add up across the month on the Compete leaderboard, ranked by points, then words. Only players who played a daily game that month appear. On the 1st the final standings open as the podium, and last month's winner wears the crown until the next 1st.

Your month, by game (3.24.0) and the month board's stats (3.25.0)

Every opened row on the month board says the same things in the same order, about this board's points only. Your own row opens by itself on three cells, the month's points from the Daily board, Longest word and Trivia, each with a swatch in the ink of --fg (Daily solid --fg, Longest --fg-soft, Trivia an outline of --fg since 3.25.3). Then up to five days with points, newest first, one bar each, every part carrying its points (since 3.25.6 a part is never narrower than its number plus 4px a side). Every row then shows the month, "12 of 31 days" and a mark a day (played days filled, today outlined), and the records said in full: Best Daily board, Longest word found first (the open lock stays --earned), Best Trivia run (3.25.1: Longest streak left; the strip shows the runs). Since 3.25.1 the line under the leaderboard's title is a text button, "How points work". Since 3.25.2 its sheet ("Tap a game to see it play.") says each game's rule in one line, and tapping a game plays it on a small board ("3 letters is 1 point, +1 a letter.": TAG +1, GATHER +4, GATHERED +6; "3 points a letter, +10 for the board's longest.": GARDENS climbing to +21, then the lock opening for +10; "5 points a right answer.": two questions, +5 each). Before a tap, and under reduced motion, each board shows how it ends. The Daily board keeps a point a letter, with no unique rule. Words found and Party games won are gone: one mixes two games' words, the other counts rooms, which bank no points here.

Nothing new is stored: each day is rebuilt from that day's own results with the rules in force since 2026-10-10, and a finished day is kept on the phone, so it's read once. A month that began before 2026-10-10 shows its older points as one earlier cell, so the cells always add up to the row's total.

Worked examples

• Daily board: dealer, dearer, dilate, eaters and ideals are six letters each, 4 points each: 20 points, banked as 20.
• Room: two players both find dealer (4 each); only one finds retailed, 8 letters, 6 points, doubled to 12.
• Longest word: the card says 9 letters. A 7-letter best banks 21. A 9-letter word ends the round and banks 27 + 10 = 37; so does a 10-letter word if you find one (30 + 10 = 40).
• Trivia: 6 solved, 2 skipped, hint used: 30 points. A player with 6 solved and 1 skip ranks above you.

21  Patterns

Question bank & rotation

197 questions in three scopes: the original 96 shared by daily and rooms, 50 daily-only and 51 room-only. Questions come only from Ru's own lists, filtered to one-word answers, no numbers, kid-safe and clear (see trivia/question-requirements.md).

22  Standards

The rules, short

1. Never hardcode a color — always a token, so it survives a mode flip.
2. Type on --earned / --danger fills is --ground. Never white or black.
3. Green means positive; rose means negative. One meaning each.
4. Green never marks a selection. A shown or traced word, and its active pill, use the pressed-tile state.
5. An earned/danger element carries the hue on fill and border — never a coloured fill with a neutral --rule stroke.
6. Pills are for one live value. Recaps use weight and ink — not pills, not green.
7. One primary per screen; everything else is an outline. No third style.
8. Icon buttons are 44×44 / radius 12 / --fg-soft — modal close included, no exceptions.
9. Three elevation levels: ground, raise, lit. Depth from the tile lip, not shadows.
10. Radius: 12 (most), 999 (pills), 14 (tiles). Past these only with a reason.
11. Tiles never press-dip. Trace hidden on the game board; name board excepted.
12. Respect prefers-reduced-motion on anything that moves.
13. The crown means one thing: won last month. Never decoration, never during a round.
14. 1st, 2nd and 3rd are solid, traced and lit tiles. Never gold, silver and bronze.
15. A code is shown as tiles and copied by tapping it. Text buttons never carry icons.
16. One ask per visit, only on Home, never mid-round. "Not now" is respected.
17. Every save path has a fallback, and the long code always still works.
18. The update reel uses the app's real pieces, names exactly what's new, and closes quietly.
19. Size motion to the moment: small for common, a story only for rare.

23  Standards

Do & don't

The rules above, shown. Each pair is a real component rendered right and wrong — the reason matters more than the rule, because it's what lets you judge the cases this doc doesn't cover.

24  Standards

Accessibility

Target: WCAG 2.1 AA — 4.5:1 for body text, 3:1 for large text (≥24px, or ≥19px bold) and non-text UI. Measured from the tokens, not asserted; the failures are disclosed below, not hidden.

• Hit targets — 44px on every interactive element, the modal close included. No exceptions.
• Focus — always-visible :focus-visible ring, 2px --gold (=--fg), offset 2px; the home/mode icon button rings in --focus. Passes 3:1 non-text (5.3:1).
• Keyboard & AT — known gap. Spelling a word is a pointer-driven swipe across tiles; there is no keyboard or assistive-tech path to trace a word today. It's a real limitation for a swipe-native game, disclosed here rather than omitted; a keyboard model (arrow-to-move, space-to-select) is the open item.
• Reduced motion — honored throughout; the mark and tiles hold still under prefers-reduced-motion.
• Live numbers — tabular-nums so they don't shift width as they tick.

25  Standards

Voice & content

Plain verbs, sentence case, active voice. A control says what happens and keeps the same name through the flow. Errors don't apologise and name the fix; empty states invite the next step rather than set a mood. The shipped examples live in System states.

26  System

Governance

The system has one owner and one source of truth. That's not a limitation of being small — it's the thing that keeps two years of changes from turning into a pile of one-off exceptions.

Source of truth

app.jsx at its current APP_VERSION. This document is generated from it; where they disagree, the code wins and the doc is the bug. The built app.js is output — never edited by hand except for a verified one-value string change.

Add vs. reuse

Reuse first. A pattern earns a component only once it appears in roughly three places; before that it stays local. A new token or component needs a name, a one-line reason, and an entry here — no silent additions.

Naming

Tokens are semantic, not literal — --earned, not --green; --ground, not --navy. The name says the job, so the value can change without the name lying.

Versioning

Minor for features, patch for fixes. Every release bumps four things together — APP_VERSION, app.js?v=, sw.js VERSION, and CHANGELOG.md — or the service worker serves a stale shell and the change never ships. The design system's version moves with them (this page's badge, the README title, the spec's source line), and npm run check stops the release until all of them match.

Deprecation

Nothing is deleted out from under a caller. Old names resolve to canonical through the alias layer and are marked "don't add new ones"; superseded artifacts are labelled stale rather than removed until nothing points at them. The old root design-system.html went in 3.23.6, once nothing did.

Review

One change per release, and a visual mock is approved before any UI code is written. Unrelated changes never ride along unflagged.

Recent changes

3.25.7

One round, one clock: in a room, a phone that sees the start late joins the round in progress and ends with everyone; a phone still playing when the tally is out stops.

3.25.6

Every part of the month bars shows its points: a part is never narrower than its number plus 4px a side. Before, a thin part left its number off, so on a 375-wide phone Longest word's points were missing on most days.

3.25.5

Trivia answers open their question: tap an answer on the summary or in room results and it replays on the board it was on, with the daily board leaderboard's board and trace.

3.25.4

Coming back with a code: Paste under the code tiles, and the field over them is see-through instead of invisible; I have a code skips the tutorial. A sheet with no foot clears the home indicator, and sheets sit on top of a keyboard. The code tiles are 38px under 360px.

3.25.3

Trivia's part of the month bars is an outline of --fg, not --fg-faint: the three games are easier to tell apart, and its numbers read at 12.7:1. How points work starts empty.

3.25.2

How points work, said once and shown: each game says its rule in one line, and tapping a game plays it on a small board with the points it earns; before a tap, and under reduced motion, each board shows how it ends. The Daily board keeps a point a letter after Boggle's and Word Hunt's scoring were weighed; a score stays final when you finish.

3.25.1

October's "+744 from Oct 1–9" note is gone, to cut noise. How points work: a text button under the leaderboard's title, in place of "Points add up from every Compete board.", opens the three games' rules with an example each, written from the scoring constants. Longest streak leaves the records.

3.25.0

Stats on the month board: every opened row says the same things in order. Your row: the games, October's note in place of the "earlier" cell, your last days with each part's points on its bar. Every row: the month as a mark a day, then Best Daily board, Longest word found first, Best Trivia run (new) and Longest streak. Words found and Party games won are cut. A streak under a name ends when a day is missed.

3.24.0

Your month, by game: your own row on the month board opens on the month's points from each game and your last five days as bars, split in the inks of --fg; tap a day for its numbers. Rebuilt from each day's results, nothing new stored. Home's half cards fit 320px screens: smaller slots and place under 360px.

3.23.7

Longest word has one goal from start to finish: the board's headline word, the length on the card and above the board. Any word that long or longer wins and banks the +10; the win used to be judged against the full dictionary's longest word, a rare word on about half of days. Scoring is written down in full (word points, rooms, each daily game, the month, worked examples).

3.23.6

Trivia question card: the question sits centred in a fixed-size card (--raise, --rule, 14px corners) as tall as the run's longest question, so the board never moves between questions. The design system moved into the repo (design-system/): css/ and trivia/ are generated from app.jsx and checked on every release, and the stale root design-system.html was removed. See audits/.

3.23.4–5

3.23.4 reserved the question's space with the question at the top (a gap under short questions); 3.23.5, preview only, put it at the bottom (the gap moved under the timer). Both replaced by the card.

3.23.3

Hint tag centred (6px every side) with a 2px gap to the word. Confetti name tiles are board tiles scaled down. Question rotation: Trivia mode caps repeats at 3 per phone; the daily walks the whole bank.

3.23.2

Home trivia card shows your place today (option K), not a lock. Scoring rebalanced: Longest 3 per letter +10, Trivia 5 per answer. Swipe reads the live trace; whole-tile first touch and lift. Daily trivia: same questions for everyone, countdown, "You solved the most".

3.23

Trivia becomes an unlimited 2-minute run (one hint, free skips, most solved). Trivia mode replaces Survival in Play, with a difficulty toggle. Compete card arrows top-right.

3.22

Home refresh: the Compete bento (leaderboard row, Daily board, Longest + Trivia). Daily trivia. The update reel becomes a story on real screens, exported from the canvas. Podium confetti at the earned moment.

3.21.1

Green never marks a selection. A word shown on a review board (the longest-on-board word included) lights in the pressed-tile state with the normal trace, and active word pills flip like a pressed tile. The update reel is keyed to REEL_VERSION so patches never replay it.

3.21

Short recovery codes (six characters as tiles, Save to Photos or Notes, fallbacks for every path), the save nudges (outlined key with a dot, Keep your spot, home-screen guide, Played before?), the update reel format, and the first motion vocabulary. Then formalised: motion principles, eleven motion rules, a reduced-motion table and a live motion lab; the update reel template (open, chapters of four beats, recap close), its chapter spec, copy template and pre-ship checklist.

3.20

Monthly podium on the 1st (solid, traced, lit columns; the crown drops on 1st; trace-ribbon confetti for everyone, tuned per viewer) and the crown all month on last month's winner. New token --raise-solid.

3.18

Recovery codes (readable word-word-id, view/restore sheet reached from the header key icon). The help sheet stays two sections — Playing, Competing.

3.14.6

Brand-mark motion → curated rotation of twelve legal traces (was four).

3.14.1

Name-board letters recede, so its trace line stays visible while the game board's is hidden.

3.12

Game-board trace line hidden — filled tiles carry the word; feedback moved to the pill.

27  System

Deliberately omitted

What the system refuses to build is as load-bearing as what it does. Each omission traces to a principle; adding any of these would cost more in clarity than it returns.

• Nothemes beyond the two grounds
  Light and dark already cover it. A third theme is surface area with no job — and every extra theme is another set of contrast pairs to keep honest. (Principle 3, 4)
• Noshadow / elevation stack
  Depth comes from the tile's inset lip and three flat surface levels — ground, raise, lit. Stacked shadows would add rendering cost and visual noise for a hierarchy that's already legible. (Principle 3, 4)
• Nofourth hue
  Two semantic hues (earned, danger) plus one system hue (focus) is the whole palette. A genuinely new hue would start diluting meaning and break "one hue, one meaning." (Principle 2, 4)
• Nogold, silver or bronze
  The top three are told apart by the board's own tile states (solid, traced, lit), not by three metal colors that would each be a new hue with one job. (Principle 2)
• Noicon library
  A handful of 20px stroked glyphs, drawn to one spec. More icons means more to misread and more to keep consistent, for a game that needs almost none. (Principle 4)
• Nocomponent-count target
  A small, opinionated set beats a large generic one. Growth is demand-driven (the rule of three), never a roadmap goal. (Principle 4)
• Noanimated mode switch
  Changing mode is a quiet 0.5s cross-fade, not a moment. Celebrating it would contradict low stimulation. (Principle 3)

28  System

Reference

Each active role resolves, per mode, to a value in the base tier (--dk-* / --lt-*) — the only hardcoded hexes in the system. The table shows those resolved values: 29 roles × 2 modes = 58 base literals. Components reference the active role, never a literal. Only colour is tokenised; durations, spacing and radii are raw constants (see those sections). Legacy aliases resolve to canonical in one place, so nothing breaks — prefer canonical names in new work.