Home and Compete
Your name on a board, one clear way to play with friends, and today's three games as compact cards that turn green only once you've played them.
When it happens
Home is where the app opens and where every round returns. It's also the only screen allowed to ask for anything: the save nudges, the update reel and the podium all wait for Home, one per visit, and never interrupt a round. The brand mark animates here and nowhere else.
It has two jobs, in two sections:
- Play starts a game with other people, or alone. Nothing here banks to the leaderboard except a room's games played and wins.
- Compete holds the month's leaderboard and today's three games, the same for everyone. Each can be played once a day and resets at midnight ET.
Composition
Top to bottom:
| Part | Spec |
|---|---|
| Header | the brand mark (animated), the key (your code), light and dark, help |
| Welcome back | after a restore only: "Welcome back, NAME" and "Your name and scores are here.", gone after 7s |
| Name board | your name traced across a board as you type (Tile) |
| Name field | "Your name", up to 15 characters, and "Spell it out and watch it land on the board." |
| Play | the eyebrow "Play" over a hairline. Join a game: the primary, full width, 12px under the label. Create game and Play solo: outline buttons side by side, 8px under it and 8px apart |
| Home-screen card | when it's due (Recovery and save nudges) |
| Compete | the eyebrow "Compete", with today's date on the right |
| Today card | on the 1st of the month only (Celebration) |
| Leaderboard row | .cc-row: a 40px rank circle, "Leaderboard · October", and "833 pts · 104 behind Samra-the real1" |
| Daily board | .cc-wide: DAILY in selected tiles at 24px, "Daily board" and "90 sec · 5×5" |
| Longest word, Trivia | .cc-pair: two columns 10px apart, each a .cc-tall card at least 140px tall |
| Footer | "Outword · v" and the version |
Dark
Light
The Compete cards
| Part | Spec |
|---|---|
.cc-card | radius 14, padding 14, --raise fill, 1px --rule border. Not played today: border --select-stroke. Played today: fill 7% --earned over --raise, border 45% --earned, arrow green |
| Arrow | an 18px glyph in a 24×24 box, at top 8 and right 8. Rows reserve 36px on the right; tall cards reserve 22px beside the top row |
| Type | eyebrow .cc-eb 700 11px, 1.2px tracking, uppercase (green with a check once played); big number .cc-big 800 22px, tabular; meta .cc-meta 600 13px, --fg-soft |
Word tiles .cc-t | 17px by default (14px for the Longest card's slots under 360px), corners 28% of the size. Selected: --select, --select-stroke, --select-ink. Empty: a 1.5px --rule outline. Five to a line, then wrap |
Dark
Light
Dark
Light
Each card, before and after
| Card | Before you play | After |
|---|---|---|
| Leaderboard | your place this month in the circle, your points and the gap to the leader, number first: "833 pts · 104 behind Samra-the real1", or "you're leading". Before you've scored this month, the circle holds a dash placeholder and the line reads "NAME leads with N pts", or "Nobody's scored yet this month" | the same row; it opens the month's standings. If you won last month, the crown sits on your circle |
| Daily board | DAILY in selected tiles; "Daily board", "90 sec · 5×5" | "Daily ✓" and your points, "46 pts" |
| Longest word | an empty slot for each letter of the board's longest word, five to a line, and a small lock; "Longest word", "60 sec · 9 letters" | your word in selected tiles in the slots; "Longest ✓", "6 of 9" |
| Trivia | the ? tile; "Trivia", "2 min · as many as you can" | your place today (option K, below) |
Once someone has found the longest word possible on today's board, the Longest card's lock opens and their name sits at the foot of the card with a lock: green only if it's you. Once a card is played, tapping it opens that game's leaderboard for the day instead of a new round.
The Trivia card, option K
Shipped in 3.23.2, recorded in the release notes as option K. After you play, the card shows your place today as a rank circle (32px; 1st uses .place-1), "2nd today" over "of 14", your count, and one quiet line (.cc-trline, 600 12.5px, --fg-soft, one line with an ellipsis):
| Where you stand | The line |
|---|---|
| Behind | the leader's count, then their name: "Top 7 · Samra-the real1" |
| Tied | "Tied with Alexandria-Kate", plus "+n" when more than one |
| Leading | "Ahead by 2", or "Ahead on skips" when the counts are equal; "1st today" turns green |
| The only player | no line |
Never on this card: a lock, "unlocked", empty tiles standing for a count, or the answer.
Flow
- Name first. Spell your name and it lands on the board above the field. Anything that needs a name (Join, Create, Play solo and the Compete cards) checks for one first, and if it's missing the field says "Add your name first. It's what shows on the leaderboard." and takes focus.
- Play. Join a game opens a sheet for the host's 4-letter code, with Public games listed under it. Create game and Play solo open the same settings sheet: Classic or Trivia, then that mode's settings.
- Compete. Tap a card to play today's game. Back on Home, the card has turned green and shows your result; tapping it again opens the day's leaderboard.
States
| State | What the player sees |
|---|---|
| No connection | Join a game and Create game are disabled; Play solo stays live, with a line saying solo works because the board and the dictionary are on the phone. Unplayed Compete cards are disabled at half opacity, with "These need a connection. They score to a leaderboard everyone shares." |
| Creating a room | Create game reads "Rolling…" |
| Not played today | the card's border in --select-stroke; the time and size in the meta line |
| Played today | green fill, border, arrow and eyebrow check; the result in the big number |
| Played on another phone | the card fills in on its own when Home opens or the app comes back to the front (3.21.2) |
| Result not saved yet | the leaderboard shows your own row with a note, and retries the next time it opens |
| The 1st of the month | the podium opens once, then the Today card sits above the leaderboard row until midnight |
Why it's built this way
Known issues and gaps
- The unplayed Trivia cover has three empty slots. The spec lists the ? tile, "Trivia" and "2 min · as many as you can", then "Nothing else", and names "empty tiles standing for a count" among the things the card never shows. The code (
CcQuestion) renders three small empty tiles beside the ?, visible in the first capture. - The Today card predates the bento. On the 1st, the podium's card is the one Compete card still built on the older
.daily-card, with a "View →" text link instead of the corner arrow. - An unranked circle uses a colour outside the palette.
.place-nonefills with a pale blue (rgba(184,204,239,0.18)) that isn't a token. See System health. - "Game" and "room" are mixed. Create game opens a sheet whose button reads "Create room", and errors use both words. The reference page flags this as a product fix to make.
- Play solo now asks for a name. 3.9.2 left solo ungated because it banks nothing; the code now checks the name for solo too, and no changelog entry records the change.
- An em dash is back in the copy. The offline line under Play contains one, though 3.8.0 swept em dashes from every shipped string.
- The captures show 3.23.3. The footer in each Home screen reads v3.23.3; 3.23.4 and 3.23.6 changed only trivia.
- The narrowest phones get smaller covers. Under 360px the Longest card's slots drop to 14px and the Trivia card's place to the standard 28px circle, with an 11px label, so they clear the arrow. At 320px the arrow had sat 10px over the fifth slot, and "1st today" ran 5px under it.
- The spec's arrow spacing reads "22px under the top row". The code reserves 22px to the right of the top row (
.cc-toppadding), with 14px below it.
Related
- Tile: the selected tiles on the covers
- Celebration: the Today card and the crown on your circle
- Recovery and save nudges: the key, Keep your spot, the home-screen card
- Update reel: what plays on Home after a feature release
- Scoring: how the three dailies add up to the month
- D-002, green is earned
Changelog
| Version | Change |
|---|---|
| 3.24.0 | Under 360px the Longest card's slots are 14px and the Trivia card's place is 28px, so neither runs under the arrow. The month board opens on your own row (Scoring) |
| 3.23.2 | The Trivia card shows your place today (option K), not a lock |
| 3.23 | Compete card arrows sit in the top-right corner, 8px from the edge. A result that didn't save shows your own row with a note and retries |
| 3.22 | Home refreshed: Play with one primary; Compete becomes a bento with tile covers; a card turns green once you've played it today; the lock names who unlocked a board first |
| 3.21.2 | Today's cards match on every phone: Home reads your own entries for today and fills in any card that's missing |
| 3.21 | The key, Keep your spot and the home-screen card arrive on Home; Welcome back after a restore |
| 3.20 | The Today card on the 1st; the crown on your circle if you won last month |
| 3.11.0 | Home reflects the connection: Join, Create and the Compete boards disable offline with a reason; solo stays live |
| 3.9.2 | A name is required before anything that banks |