Every component as it ships, grouped by where you meet it in the game. Each one belongs to someone: you, mallow, the coach, or the menu around the board. The archive tab holds the options that lost. The creative direction mixes Adventure Time, Dislyte and Wreck-It Ralph: a retro arcade sugar glitch theme, washed in vaporwave neon and pastel haze. I chose a decidedly feminine and irreverently youthful art style that sets Girl Chess apart from chess, whose default look is masculine, utilitarian and baroque.
| belongs to | colour | rule | examples |
|---|---|---|---|
| you | cyan | your plate wears the four-point star | your name plate, turn chip, "you took" tray, the hints toggle |
| mallow, the opponent | magenta, the only alarm colour | its plate wears the melting drip | mallow's plate, its moves and arrows, warnings, thumbs-down |
| the coach | lavender | speech floats and is never pressed; the fortune slip is only for lessons | chat, the band under the board, the coach's plate |
| the menu | lavender, with mint for good or go | rounded, with a press shadow, so you know you can press it | buttons, settings, back, start new game, resign and draw |
The wordmark and the header band it sits in. A cyan and pink offset sits behind every letter and jumps every 9 seconds. The bottom of the final S is shifted sideways on purpose: the logo's one glitch that never resolves.
tutor with benefits
tutor with benefits
The closed palette, three type registers, spacing and radius. Mint means good or legal; magenta is the only alarm.
Signal type never goes on a pressable; bubble type never writes a coordinate or a name plate.
Every margin and gap uses one of these.
Sharp things never round past 4px; their corners are cut with clip-path.
Menu controls pop, information lies flat, the coach's and mallow's speech floats, containers sink. The game's readouts (name plates, coordinates, labels) have cut corners and a hard 2px shadow with no blur.
interactive · pops off the table, presses down
0 5px 0 <hard>, 0 10px 18px <blur> · small: 0 3px 0one member only: .board-stack, the candy toy itself
informational · lies flat on the table
character speech · floats, never presses
receptacles · sink into the surface
the game's labels: cut corners, hard shadow, Chakra Petch
Name plates, coordinates and hint chips are readouts, so they cast the hard shadow instead of none.
Everything that animates, running live. Glitches use steps() and never ease; only physical moves (press, land, shimmer) get curves.
The board mat, square states and both armies. The scene shows a live hint: your queen on f3, h5 pulsing, f/3 and h/5 lit.
target-hint pulses like the check ring, in cyan; hint-origin stays still.
Both seats around the board: name plate, captured pieces, turn chip. The active seat gets a cyan inset ring; mallow's stripe scrolls while she thinks.
The rows of the highlight tray: her move on the left in cyan, mallow's reply on the right in magenta. Each badge toggles on its own.
Every button is squishy and presses down. The end-game button asks the engine, then arms as resign, draw or win.
back leaves the game open and returns to the start screen, where the continue card offers resume game.
game 195: you and mallow 1300 are mid-game, 4 moves in.
The gear opens the popover. Top to bottom: confirm before playing, judge strictness (standard is the default), the two coach toggles, coach voice (Claude (Recommended) is the default). A fourth voice, claude, shows only when localStorage gc-dev is "1".
Messages about the app rather than the game. All flat tints; the session banner is lavender because a server restart is not her mistake.
After she picks a move the judge thinks, then marks it: a check, plus a nudge or warning badge when the move costs something. help? starts the hint ladder; each press is more?.
When she is winning and her move slows the mate, one line beside the nudge says why. It shows until the first help? press, then the ladder takes the slot.
Once a hint shows, it sits in one row with ask about this and the next ladder press.
The coach's one line under the ladder, written by the model. The 60px band stays reserved so the board never moves; it is empty after the game.
A collapsible panel: right of the board at 1200px and wider, under it below that. Lavender for the coach, cyan for you, never mallow's magenta.
your queen wants h5. f7 can't cover it.
move 14 is where it tipped: qxb7 won a pawn but let her rook into the seventh.
your queen wants h5. f7 can't cover it.
The panel moves by CSS only and is never mounted twice, so the thread survives a resize.
move 14 is where it tipped: qxb7 won a pawn but let her rook into the seventh.
The collapsed chat's button, with the coach's glyph as a still face.
The chat header's plate: the player plates' anatomy in lavender, with a paper fortune slip and a c00kie frame every 9s.
The result, replay, and new game. All three results glitch like the wordmark. Empty live-play slots collapse, so the panel rides up under the board.
Under a finished game, top to bottom: the arrow legend, three bullet sections, her highlighted moves, then the turning-point cards. All written by code, not the model.
your opening is working: you were winning this one from move 6 to move 22.
the middlegame is where this one slipped. when you are winning and the position starts to look familiar, that is the moment to change something.
develop your pieces before opening lines for mallow's queen.
this loosened the squares in front of your king. next time, look for a developing move that keeps the shelter closed.
The study ledger in magenta for mallow's moves, right below hers. Only replay and the ask button: there is no try-the-line for mallow's side.
this was the computer's top choice here. the plan behind it: knight takes e5, queen to d4, then rook to e8.
even mallow slips. queen takes f6 was clearly stronger. the game was already decided here, so the numbers barely move either way.
The drawer lists every game by day with its number and result. Unfinished games from the last 7 days get resume game; delete takes two clicks.
game 195: you and mallow 1300 are mid-game, 12 moves in.
game 195: you and mallow 1300 are mid-game, 12 moves in.
Every component on this tab was built and considered, then lost to the version on the shipped tab. Nothing here ships; each entry keeps its demo and says why the winner won, because the losing option is half the record.
tutor with benefits
.px 9px #23A8C7 + .tagline 12.5pxwhy the art piece won: a 9px label could not carry the brand: the shipped wordmark is 20px Press Start with a permanent RGB split, a 9s glitch cadence, and a final S whose bottom stays shifted sideways. The pixel register survives, demoted to accents (move counter, kickers).
why the five end-game skins won (finding 14): one shared magenta said "danger" even when the armed outcome was a draw or her own win: the shipped control gives each adjudicated outcome its own skin, and mint appears on exactly one button in the app: take the win.
why the color-only fix won: the solid broke the nudge's anatomy and paradoxically read flatter than its pale sibling. The shipped badge is anatomically identical to the nudge, #FFD6EC / #C22B7E, so severity is carried by hue alone, and magenta stays the only alarm.
why the chamfered plates won (items 2 · 9 · 16): "an oval around text" had no iconography, no material, no rating. The shipped plate is the machine's registry entry: Chakra Petch, clip-path chamfer, hard shadow, and name + elo in one component; the melt and the dead pixel survived the move.
why the flat tint won: an informational element wearing a squishy shadow violates the depth law: flat = a statement, squishy = an invitation. You cannot press a status line, so it stopped pretending you could.
why round 3 won: these silhouettes were never the problem: they ARE the shipped silhouettes. Round 3 keeps them untouched and upgrades only the finish: stroke 1.6 → 1.8, one gloss + one sparkle per piece, plumper crown finials, and the cat-knight's triangle ears. The in-between round-2 redraw ("too bulbous, too samey, knight not a cat") was rejected outright and deleted: it never even earned an archive slot.
why the signal-register coords won: at 7px and ~2.1:1 contrast these could not participate in the hint loop. Shipped: Chakra Petch 700 italic 13px #6952C4 with a hard white lift, and the lit-coordinate echo pulses in time with the target ring.
why the daisy-gear won: an OS emoji renders differently on every platform and carries none of the system's line language. The shipped 44px gear is a drawn SVG with one cyan glitched tooth, the machine showing through the candy, and a 20° hover rotate.
why the chrome-free slot won (owner ruling 2026-07-22): this stub dated from before the coach had a voice, and once the coach was live it read as leftover scaffolding. The ruling: keep the narration, kill the chrome: the shipped slot renders only when the coach speaks, silent is clean negative space, and the 60px reservation still guarantees the board never reflows.
why the plain slot won: the boxed panel made the coach chrome; the shipped band lets her be a voice. Its parts survived elsewhere: the kicker/chip anatomy lives on in the chat anchors and debrief kickers. And note the tell that dates it: the magenta seat predates the coach: since the coach became the lavender third seat, mallow's magenta in a coach surface is illegal by the color-voice law.
why the sprinkles won (item 12): generic party confetti belongs to no world in particular. The shipped celebration is 90 matte cupcake-sprinkle capsules with ~10% pixel hearts, tumbling with drift, the candy world celebrating in its own material.
why the distinct card won: quieter, but provenance and speech blur: a record of a moment should not look like a turn of conversation. The shipped anchor is a full-width lavender-washed card stamped with a sharp kicker chip.
why the c00kie corruption frame won: the coach is a reformed tracking cookie: one lavender-only misrender frame every 9s keeps the machine visible in her without borrowing mallow's magenta. Static was too clean a bill of health; the slip twitch animated the prop instead of the character.
why pixel won: the smooth curves soften toward fruit at seat size, and the cast's glyph register is already pixel art (mallow's heart, the you-star).
why (c) won: the plate's edge color is mallow's rule for accents, but at glyph mass it hazes into the #E7DFFF plate.
why (c) won: the quiet middle sat closest to the whisper tier, but the white slip loses contrast against the mid-lavender body, and the slip is the whole story.
why the tight 18px seat won: at 22px the glyph starts competing with the words and costs the pill ~2px of breathing room. Shipped, the words stay the headline and the face is a passport photo.
why it left: nothing in the app emits a threat-coloured arrow any more, in review OR live: it went dead the moment solid=happened/dashed=didn't became the rule, because a punishment mallow did NOT play has to be dashed. A legend row for a state that cannot render teaches a colour the player will never see, then leaves her waiting for it. #FF3DA6 stays reserved as the only alarm colour.
why the cipher rail (d1) won: the map plate pinned the key ON the board and covered the very arrows it explained; the dossier moved it to a sidebar column the debrief does not have at most widths. The rail is the debrief's first child: she reads the cipher, then the cards.
also retired: the side-by-side two-cluster body (417px of content inside a 380px plate, deleted at round 3, not media-queried), the 18x2.5 line sample that read as a fifth arrow row, and the scolding labels "you should've" / "mallow should've" (owner reads an arrow for what it means to HER: "recommended move", "what your move allowed").
why the bar pocket (d2) won: the pin rail (a strip under the coach band) spent a permanent band of vertical space on a control used a few times a game, and its one-time 49px slide moved the chat opener; the ledger card above the chat reserved 128px of rail for the same job. The pocket rides in chrome the bar already owns, no dead space by construction, and the state dot survives the tray closing.
the flag glyph failed its own falsification test: in a chess app a flag reads as resign / lose on time, exactly the game-action confusion the control must never invite; the shipped glyph is the control's own 7px checkbox ring. And the word "mark" itself lost: the owner's word is highlight, and the port renamed every surface string.
why the move-pair badges won: the tray's rows now pair her move with mallow's reply, so she can highlight either one.
why the ledger (d2) won: d1 opened every highlight at full size, so four highlights out-shouted the turning points; d3 folded highlights into the verdict bullets, and its own mock conceded the answer: moves that were simply fine fit no verdict section and dropped to a trailing stub, demoted below everything. The ledger keeps her list one row tall per memory and never longer than two turning-point cards.
the mockups' affirming verdict chip read held up; shipped chips read done well / could be better, the bullet sections' own vocabulary (owner ruling 2026-07-28), one vocabulary for the whole analysis.
why it lost: a rejected claim about her position was still readable: struck through is not gone. What ships instead: the redraft mutes the bubble and the first new delta REPLACES the text. The round-3 two-tier direction (stream the model's own thinking, never the draft; validated answer as the turn's only solid bubble) is ruled but waits on a thinking SSE frame the backend does not emit yet, so it is not built.
Reserved for an increment that never scheduled it: no ledger or handoff mentions it and nothing in src offers a draw. It waits here until someone asks for it.
A depth tier for things not built yet, last worn by the coach band's placeholder and the end panel's streaks row, both gone. No live surface reserves space with it now.
The siege was made up: an eighth word that was never in her approved vocabulary, so it was deleted and an episode card now earns no badge. The rail was picked, built, and withdrawn the same day, because at three to six cards "the timeline is really just messing up the UI"; the badge legend keeps its dot as the colour swatch.