Card
A surface one step up from the page, with a 1px rule and no shadow. A card groups what the player reads or taps as one thing, and a Compete card turns green only once you've played it today.
Usage
Use a card for something the player reads or taps as one thing: a game on Home's Compete section, a player's row in the standings, a trivia question, a public room to join, the recovery code panel.
Use a card for spare space. When a fixed container has room to spare, it shows as a card with its content centred, never as empty ground on one side. That's how the trivia question card was built.
Don't lift a card with a shadow. Depth comes from flat surface levels, not a shadow stack.
Don't turn a card green to make it inviting. A Compete card goes green once you've played that game today, and never before: green means earned.
Anatomy
Surfaces. Three flat levels and one opaque helper. Each is a token with a dark and a light value.
| Level | Token | Dark | Light | Used for |
|---|---|---|---|---|
| Ground | --ground | #202845 | #F2F0EA | the page, and a sheet's panel |
| Raise | --raise | rgba(242,240,234,.08) | #FAF9F6 | cards, fields, rows |
| Raise, opaque | --raise-solid | #313852 | #FAF9F6 | the crown's halo on a raised row, where a translucent fill can't cover what's behind it |
| Lit | --lit | #3D445C | #D5D4D3 | a lit surface that isn't a tile: today, only the 3rd-place podium columns |
The card. The cards share one build, with a few corner and padding sizes:
| Part | Spec | Token |
|---|---|---|
| Fill | the raise level | --raise |
| Edge | 1px solid, the whole way round | --rule |
| Corners | 14px on the newer cards (Compete, question, room, code panel, Home's notices); 12px on standings rows, the trivia rules card and the lobby's settings | |
| Padding | 14px on Compete cards; 14px 16px on the question card and room rows; 12px 14px on a standings row's head | |
| Shadow | none |
The Compete card (.cc-card) adds a 24×24 arrow fixed 8px from the top-right corner, with 36px kept clear on the right of a wide card and 22px on a tall card's top row. Wide cards (.cc-wide, .cc-row) are one row; tall cards (.cc-tall) sit two to a row in .cc-pair, 10px apart, at least 140px tall, with their text pinned to the bottom. Covers are small tiles (.cc-t): DAILY in selected tiles, and on the Longest word card your own word in selected tiles, five to a line.
States
| Card | State | Look |
|---|---|---|
| Compete card | to play (.play) | --raise fill, edge in --select-stroke |
played today (.done) | fill is 7% green mixed into --raise, edge is 45% green, the arrow and eyebrow turn --earned with a check | |
no connection (:disabled) | opacity 0.5; a card already played stays live | |
| Standings row | at rest (.standing) | --raise head, 1px --rule edge |
1st (.winner) | edge in --fg | |
earned (.unlocker) | edge in --earned: the day's trivia leader, or whoever found the longest word first | |
showing its word (.sel) | edge in --fg | |
you, on the podium list (.pod-you) | edge in --fg |
Green takes the whole card, fill and edge together, never a green fill inside a neutral rule.
Behaviour
- A Compete card is one tap target. The whole card is a
<button>: tap to play, or, once played, to see today's results. - A Compete card's cover fades in over 600ms when Home opens, and holds still under reduced motion.
- A standings row presses as one piece. Tapping its head dips the whole card, edge included, to
scale(0.99). - A standings row opens in place to show that player's words or stats, with the chevron turning 180°.
- The question card keeps one height for a whole trivia run, so the board under it never moves. See Trivia.
Accessibility
| Token | Dark · ground | Dark · card | Light · ground | Light · card |
|---|---|---|---|---|
--fgbody text | 12.70AAA | 10.14AAA | 12.70AAA | 13.75AAA |
--fg-softsecondary text | 6.36AA | 5.07AA | 4.78AA | 5.17AA |
--fg-fainttertiary | 3.19UI only | 2.55decorative | 2.29decorative | 2.48decorative |
--earnedearned (green) | 8.98AAA | 7.17AAA | 5.71AA | 6.18AA |
--dangerrefused (rose) | 8.52AAA | 6.80AA | 7.54AAA | 8.16AAA |
--focusfocus ring | 5.27AA | 4.21UI only | 5.38AA | 5.82AA |
WCAG contrast, computed from the tokens on every build. AA needs 4.5:1 for text, 3:1 for large text and UI.
- Text on a card:
--fgis 10.14:1 (dark) and 13.75:1 (light) on--raise;--fg-softis 5.07:1 and 5.17:1. Both pass AA. - The edge is decorative.
--ruleis 1.65:1 (dark) and 1.30:1 (light) against the ground, below the 3:1 target for UI. That's deliberate, for the hairline look, so a card's edge alone never marks it as tappable: Compete cards also carry an arrow, and standings rows a chevron. - A Compete card is read as its words. Its covers and arrow are
aria-hidden, so a screen reader reads only the card's text. - Green is never the only signal: a played card also changes its words, showing its result ("46 pts") in place of the time and board size.
Content
- Numbers lead, names last. "833 pts · 104 behind Samra", "Top 7 · Samra-the real1": a long name only ever truncates itself.
- An eyebrow names the card, uppercase: "Leaderboard · October", "Daily board", "Trivia".
- A played card shows the result, not the instructions: "46 pts", "6 solved", "1st today / of 4".
- Compact. Home cards strike a middle ground between visuals and space.
Why it's built this way
Known issues and gaps
- The spec's three levels don't match the code. The spec says the levels are ground, raise and lit, with
--litfor "a tile in the current trace", and that depth comes from the tile's inset lip. A traced tile uses--select;--litis used only by the 3rd-place podium column; and the tile has no lip, only its 2.5px edge. - Two recipes for an earned card.
.cc-card.donemixes its green withcolor-mix()(7% fill, 45% edge) instead of using--earned-card-bgand--earned-card-border, the tokens made for it. The rules that do use those tokens (.daily-card.done,.daily-chip.cracked) aren't reached by any screen. - Cards that don't follow the mode swap. The longest-on-board card (
.lob-card) uses a hardcoded white tint, and the.daily-cardrules behind Home's podium card carry a pale blue that no screen reaches (3.23.6 audit). - Corners and padding vary: 12 and 14 for corners, and several paddings. There are no radius or spacing tokens yet.
- The card CSS reads legacy names (
--tray-raise,--tray-line,--paper,--ok-green); they resolve to the canonical roles.
Related
- Home: how the Compete cards are arranged
- Trivia: the question card
- Rank: the circle on the leaderboard card and in standings rows
- Color:
--raise,--ruleand green
Changelog
| Version | Change |
|---|---|
| 3.23.6 | The trivia question sits in a card styled like the Home cards: --raise, --rule, 14px corners |
| 3.23.2 | The played Trivia card shows your place today, your count and one quiet line |
| 3.23.0 | Compete card arrows sit in the top-right corner, 8px from the edge |
| 3.22.0 | Compete becomes a bento of cards, each turning green once played today; 14px padding and a 1px edge on every card |
| 3.20.0 | --raise-solid, the opaque twin of --raise, for the crown's halo |