Context
Who: commuters and parents, playing one level at a time, sound often off. Jobs: clear a level in 1–3 minutes, feel good, stop cleanly. Constraints: one thumb, bright environments, color-vision variety, and a young audience that must never be pushed into a purchase.
Principles
| Rule | Rationale |
|---|---|
| Three registers: play, operate, explain | Luckiest Guy for moments, Baloo 2 for controls and counters, Nunito Sans for anything a player must actually read. |
| Pieces differ by shape, not only hue | The board is the game; colorblind players and grayscale screens must still parse it instantly. |
| Juice is bounded | Pop 150 ms, cascade 250 ms, popup 400 ms; nothing blocks input, and reduce motion turns juice into fades. |
| No dark patterns | No timer by default, lives regenerate predictably, and every purchase is an explicit, reversible choice. |
Level play
Why the board works
- Each piece is a color and a shape: circle, square, diamond, triangle, star, hexagon. The grayscale proof keeps the board fully readable.
- Moves and score use tabular numerals in the UI face; they never jitter while animating.
- The pop layer never blocks input; a tap during a popup still plays the next move.
- Objectives show progress as “8 / 12”, not a mood ring — the number is the truth.
Level complete and failure
Level cleared!
Out of moves
Level map
States carry stars, labels, and the current pulse — not only gold versus gray. Locked levels state their unlock condition when selected.
Settings and help
Settings
Help · the text face at work
Match three or more pieces in a line to clear them. Matching five in a row creates a star piece that clears a whole color when swapped. You can always leave a level and keep your progress; lives refill on a fixed timer and never gate the tutorial.
Help and settings are the only places with paragraphs — set in Nunito Sans at a comfortable measure, never in the popup face.
Typography
- The popup face is all-caps by design and never used for instructions — it cannot be read in a sentence.
- Buttons and counters share the UI face, so “tap me” and “read me” look different on every screen.
- Any text a player must act on (settings, purchases, help) is set in the text face at ≥ 14 px equivalent.
Color and pieces
Six candy hues, six shapes. The shape is the contract; the color is the delight.
Components and states
Buttons
All ≥ 48 px tall, one primary per screen, no disguised close buttons.
Booster states
Star meter
Filled stars are gold, empty are outlined — the count is also written as “2 stars”.
Toasts and popups
Toasts never cover the board or the primary action, and never require dismissal to continue.
Motion and accessibility
Motion budget
- Pop 150 ms, cascade 250 ms, popup 400 ms; nothing exceeds half a second and input is never blocked.
- Score counts up in ≤ 300 ms but the final number is committed immediately — the value is never mid-animation when the next move starts.
- Reduce motion replaces pops with fades and stops the map’s current-node bounce.
Accessibility
- Pieces are shape-coded at all times; colorblind mode is not a hidden setting, it is the default build.
- Touch targets are ≥ 48 px; boosters and the board sit in thumb reach for one-handed play.
- Counters can be enlarged without breaking the board, and every value has a text form.
- No timer on standard levels; where a timed mode exists it is opt-in and clearly labeled.
Verification
Live probes
| Pair | ratio | Note |
|---|
Board pieces are checked as UI graphics (≥ 3:1 against the board); each also carries a shape, so a failing hue is never the only signal.