Component · load-bearing
Every screen in THREE CHANCES is cards on a table, so this component carries the product. Front and back, six states, one accent. A card face shows its value and the wordmark — never a round number, because a card is not tied to a round. Players choose when to play it.
Hover, click or tab to a card. Selecting locks it in for the round.
No card selected
States are modifier classes and map one-to-one to Figma variants.
default
Face up, playable, at rest
hover
Lifts 6px, gold glow
selected
Gold ring, lifts 10px, awaiting lock-in
played / disabled
Desaturated and dimmed, no pointer events
winner
Green ring + circular ✓ badge
loser
Red ring + cut-corner ✗ badge + vignette
Dark gradient, double gold hairline, 45° hatch. Used for undrafted cards and the opponent's hidden hand — where a count matters more than a value.
back · default
Face down, not yet drafted
back · hover
Draft pick target
back · selected
Position claimed in the draft
back · taken
Slot already drafted by a player
back · small
Opponent hand indicator
front · small
Small face — e.g. a hand card in the swap modal (the undrawn pool is face down)
Roughly one man in twelve has a red–green colour vision deficiency, which is exactly the pair this game uses to say "you won" and "you lost". Every outcome therefore carries three independent signals: hue, glyph, and badge shape.
A card is not bound to a round — a player holding 10, 6 and 3 decides each round which one to reveal. Printing "R1" on a face would state something false and would break the moment a player sandbags a low card into a round they expect to lose. The face carries value and wordmark only; round context belongs to the board, not the card.
Applies to both faces unless noted.
| State | Class | Treatment | Non-colour cue | Interactive |
|---|---|---|---|---|
| default | — |
Card shadow, at rest | — | Yes |
| hover | .is-hover |
−6px lift, gold glow 20px | Position change | Yes |
| selected | .is-selected |
2px gold ring, −10px lift, glow 28px | Ring + deeper lift | Yes |
| played / disabled | .is-played |
Grayscale 55%, brightness 62%, no shadow | Desaturation + flattening | No |
| winner | .is-winner |
3px green ring, green glow 30px | ✓ glyph in a circular badge | No |
| loser | .is-loser |
3px red ring, red glow, loss vignette | ✗ glyph in a cut-corner badge | No |
| focus | :focus-visible |
Gold-light ring offset from the table | Distinct from selection | Yes |
Card numerals are set in DM Serif Display. This page cannot load webfonts, so numerals fall back to Georgia here — install the family in Figma and in the app build for the intended weight and figure width.