Question cards, one layout
The mechanics stay as built in #369. This round is the cards' content and layout: one frame, one spacing system and one square tile for every answer type, with each type's options side by side. Every card is live: tap to turn it, tap to answer, drag it sideways to swipe.
Round 3 (this page): one layout for every answer type. The back wears the front's frame, every list is a 2×2 of square tiles, agree and yes / no get a stamp instead of a button, picks are slots instead of a search bar.
Round 2: B3 Intertitle worked through, every state and move; now built on staging (PR #369). Round 1: three directions each for the how-to and question cards. Both stay in this artifact's version history.
Back to the drawing board on content and layout, with a big focus on one layout across the cards. Any card that picks from a list is four squares, even with two options. Crop the images so they look good and make them bigger. The back reuses the front's border, so "Swipe to continue" has a home. Agree / Disagree is the worst: a big button that adds a check. Words only when there's no art. No search bar in the middle of a pick card. Spacing everywhere.
One frame, three bands, one tile
Both faces wear the same double-ruled frame. Inside it, top to bottom: the head (the deck label pinned at the top, the question centered in what's left), the stage (always a square grid of tiles, sitting on the foot), and the foot (a fixed slot: "Tap to answer" on the front, the toggle and "Swipe to continue" on the back). The stage never moves and never changes size between types; the question grows into whatever room the stage leaves.
| Spacing | pt | Where |
|---|---|---|
| Frame inset | 12 | Card edge to the outer rule; the inner rule sits 5 inside it |
| Frame foot | 64 | Clears the printed Undo, i and ⋯ (12 + 44 + 8). 12 in onboarding, which has none |
| Padding | 18 · 16 · 14 | Inside the frame: top, sides, bottom. Content is 264 wide |
| Label → question | 8 | The label is pinned; the question centers in the rest of the head |
| Bands | 16 | Head to stage, stage to foot |
| Tile gap | 8 | Every grid, every type. Tiles are 128 square |
| Foot slot | 56 | Toggle row 28, gap 10, hint line 14. Reserved even when empty, so nothing jumps |
| Type | 11 · 21 · 28 | Label (caps, .15em). Question 21 over two rows of tiles, 28 over one row or none |
| Tile | Rule |
|---|---|
| Shape | Square, 12 radius, 1 pt edge. Never tall, never three across |
| Portraits | Cover, focus 50% 20%: TMDB profiles are head and shoulders, so eyes land in the top third |
| Posters | Cover, focus 50% 30% by default, where most key art sits. An option can set its own focus in prompts.ts when it doesn't (Jaws: the shark, 50% 90%) |
| Name | 14 semibold, two lines at most, 10 in from the bottom left, on a scrim from 45% to basalt at 92% |
| Chosen | Ochre ring and check in its top right; the rest dim to 42% and lose most of their color |
| Fourth square | When there are three, the fourth is a face-down card: the frame's double rule and the mark. Not tappable |
The same card, a little wider
Onboarding deals the same cards. No printed buttons there, so the frame's foot drops to 12 and the tiles grow to 147. Everything else is identical: tap to turn, tap to answer, swipe to continue.
What changes
- The back gets the front's frame, with the same 56 pt foot slot in the same place: "Tap to answer" on the front, the toggle and "Swipe to continue" (or "Swipe to skip" before an answer) on the back.
- One back layout: label pinned, question centered, stage sitting on the foot. The stage is a two-column grid of square tiles: never three across, never two tall halves.
- Two options sit as one row of the same squares with an "or" on the seam; the question takes the room above. Three keep the 2×2 with a face-down fourth.
- Crops: portraits at 50% 20%, posters at 50% 30%, an optional per-option
focusinprompts.ts. One scrim and one name style on every tile. - Agree / Disagree and Yes / No: the check-icon tiles go. Two ink pads; tapping one stamps the statement, and the stamp stays on the front.
- Words only become the same squares, typeset, and stay the fallback when any option has no picture (today's rule).
- Picks: no search button and no Change button. Dashed slots open Spotlight (
PickSpotlightas is); picks land as tiles; tapping a filled tile reopens Spotlight with it in the tray. - The front's cameos become a small copy of the stage (the same squares at 56), instead of round avatars and tilted posters. Answered, the front shows the pick, and its foot says "Swipe to continue".
A everywhere
Stamp for agree and yes / no: it's the only option where answering changes the card itself, and the stamped front is what a profile can show. Question-takes-the-room for this or that and for single picks, so a two-option card reads like a one-row version of the four-option card. The face-down fourth square for three choices and for three picks, so every list is the same 2×2.
Open question: a stamp is ember for Agree and Disagree alike (the type's color). Disagree could take stone instead, so the two read apart at a glance on a profile. I kept one color per type, as the palette table says.