indigo-tic is a small, universal tic tac toe game. The product intent is a two-screen, immediately playable toy: a public entry that shows what the game is and how it looks, and a game surface where two players take turns placing marks on a 3x3 board until the game detects and reports a win, loss, or draw — after which a new game can be started.
The audience is anyone with two minutes and a screen: a kid on a phone at a bus stop, an adult killing time. The register is playful, warm, and low-stakes. It must feel like a toy you already know how to use, not a product you have to learn. There is no account, no sign-in, no saved history, and no server-side game state required by the accepted requirements.
indigo-tic is delivered as a first-party custom web UI with two pages:
Both pages are owned by the application and require no access identity (access_requirement: none). The single accepted active human persona is Player — the person who plays tic tac toe against an opponent in the app. The opponent is the second human participant in the same local game; the app itself is the system that enforces turn order and adjudicates the outcome.
Current scope: a playable local two-player tic tac toe game with turn alternation, outcome detection (win, loss, draw), a new-game action after a game ends, and a persistent score strip.
Narrow exclusions: no online or networked multiplayer, no matchmaking, no accounts or profiles, no persistent cross-session history, no AI opponent, no chat, and no monetization are established by the accepted requirements. Nothing in this document should be read as authorizing those adjacent capabilities.
The accepted requirement is a tic tac toe app, and the accepted delivery shape is a custom first-party UI. The two pages above are the complete current information architecture: an anonymous public entry that introduces and demonstrates the game, and the game surface that owns play.
Access is deliberately open. Neither page requires identity, and no accepted journey needs durable actor-specific state to be privately owned or resumed — a game is played in one sitting, and the score strip is the game's only persistent chrome. No first-use identity establishment, invitation, provisioning, or account-management capability is therefore part of this product.
Everything the player sees and touches is first-party. There is no provider-owned surface, no external destination, and no headless delivery in the accepted scope. The system's own work — enforcing alternating turns, detecting a win, loss, or draw, and updating the score strip — is internal execution supporting the player's interaction, not a separate destination.
Future ideas are kept out of the current pages and acceptance criteria; see Section 11.
INDIGO-TIC; a short statement of what the game is, who it is for, and what it does; the current state of the self-playing demo board (in progress, or a completed game under reduced motion).PLAY button that enters the Game page and starts a game.INDIGO-TIC in Silkscreen, all-caps, spanning roughly 88% of the viewport width as a single line at desktop, with the hyphen rendered as a pixel-yellow accent block.PLAY button — chunky rectangle, 3px hard offset shadow, pinned bottom-left of the composition, aligned to the same left margin as the wordmark.PLAY, entering the Game page with a fresh game.PLAY button remains fully functional regardless of demo-board state.YOUR TURN · X / YOUR TURN · O); the terminal status line (X WINS / O WINS / DRAW); the score strip values for X, draws, and O; whether the game is in progress or finished.NEW GAME — starts a fresh game after a game ends (or at any time, clearing the board); RESET SCORE — clears the score strip back to zero.min(88vw, 520px) so it never touches the edges at 375px. Square tiles with 2px hard borders and zero border radius.#8E7BFF and O in pixel-yellow #F2C14E.NEW GAME and RESET SCORE as chunky rectangles with 3px hard offset shadows, wrapping to a column at 375px.YOUR TURN · X, and the score strip at its current values.X WINS, O WINS, or DRAW, the winning line draws (on a win), and the score strip updates.NEW GAME to start over.FR-1 — Play tic tac toe on a 3x3 board (explicit) As a Player, I should be able to play a game of tic tac toe on a 3x3 board so that I can play the game the app exists to provide.
PLAY button) or presses NEW GAME.YOUR TURN · X and the score strip showing its current values.PLAY again.FR-2 — Take turns placing marks on the board (explicit) As a Player, I should take turns with my opponent placing marks on the 3x3 board so that we can play the game out.
FR-3 — Detect and report a win, loss, or draw (explicit) As a Player, I should be told when the game is won, lost, or drawn so that I know the game has ended and who won.
X WINS, O WINS, or DRAW; on a win the winning line draws as a dotted rule stepping cell by cell across the three winning cells in four 80ms steps; the score strip updates — the winner's cell increments, or the draws cell increments on a draw.NEW GAME to start over.NEW GAME to play again, or RESET SCORE to clear the score strip.X WINS is the loss for O and vice versa).FR-4 — Start a new game after a game ends (explicit) As a Player, I should be able to start a new game after a game ends so that I can keep playing.
NEW GAME after a game has ended.YOUR TURN · X, and the score strip retains its accumulated values.FR-5 — See the game demonstrated before playing (required_inference) As a Player, I should see the game demonstrated on the Landing page before I start so that I understand what the app is and what it does.
INDIGO-TIC wordmark, a short explanation of the game and its audience, and a live 3x3 pixel demo board that plays one self-solving game on loop, with X in periwinkle and O in pixel-yellow.PLAY button remains functional.PLAY to enter the Game page with a fresh game.FR-6 — Keep score across games in the session (required_inference) As a Player, I should see a running score for X, draws, and O so that repeated games have a result to compare.
RESET SCORE to zero it deliberately, or simply continues playing from zero.NEW GAME and the score strip carries forward into the next game.Product context. The Player is the person who plays tic tac toe against an opponent in the app. They arrive with no account and no setup — often on a phone, often with only a couple of minutes — and they expect to be playing within seconds. The app is a toy they already know how to use.
Primary goal. Play a complete game of tic tac toe against a second player, see the result clearly, and start another game if they want one.
Distinct accepted responsibilities.
PLAY.X WINS, O WINS, or DRAW — and the winning line when there is one.NEW GAME after a game ends.RESET SCORE when they want a fresh tally.Relevant inputs and decisions. Which empty tile to claim on their turn; whether to keep playing after a game ends or stop; whether to reset the accumulated score.
Interactions with other accepted participants. The Player shares the board with a second human player sitting at the same screen. Turn alternation is the handoff between them: the turn indicator is the observable signal that the other player's move is now expected, and the reported outcome is the shared result both players read. The app is the system that enforces the alternation and adjudicates the outcome; it is not a participant.
Observable success. A mark appears where they tapped, the turn indicator switches to the other player, the game ends with a clearly reported win, loss, or draw, the winning line is drawn when there is one, the score strip reflects the result, and NEW GAME produces a clean board ready for the next game.
What makes this role distinct. The Player is simultaneously the initiator and one of two participants in the same local game — they both make moves and read the outcome of a game they are playing in. There is no separate administrator, spectator, or account holder in this product, and no role has differentiated visibility or control over shared state.
INDIGO-TIC wordmark in Silkscreen, a short explanation of what the game is, who it is for, and what it does, and a live 3x3 pixel demo board that plays one self-solving game on loop, X in periwinkle and O in pixel-yellow.PLAY button pinned bottom-left of the composition.YOUR TURN · X, and the score strip at its current values.PLAY button still works; the Player is never blocked from starting.YOUR TURN · X.YOUR TURN · O.YOUR TURN · X.X WINS, O WINS, or DRAW.NEW GAME to start over.NEW GAME (Flow 4) or RESET SCORE (Flow 5).NEW GAME in the controls row below the board.YOUR TURN · X.RESET SCORE in the controls row below the board.NEW GAME to start a fresh one; the next completed game increments the cleared strip.Muse and headline. Susan Kare — Charming clarity, indigo grid: a tic tac toe app with pixel soul. Kare's craft is small legible symbols with personality inside a grid you can feel, which is the exact fit for a 3x3 board: the board becomes an icon sheet of nine chunky tiles, and X and O become pictograms rather than text glyphs. The indigo ground is honoured as a deep pixel-field, with the marks as the crisp two-colour signal.
Palette — dark mode (authoritative).
| Role | Hex | Use |
|---|---|---|
| Background | #191A4A | Deep indigo field — the dominant ground on both pages |
| Surface | #232566 | Board tiles, lifted slightly off the field, with 2px light pixel borders |
| Text | #F4F1E8 | Warm paper-white — all readable text |
| Primary | #8E7BFF | Periwinkle — the X mark |
| Accent | #F2C14E | Warm pixel-yellow — the O mark, the winning line, the wordmark hyphen, and one CTA |
| Muted | #9A9BD4 | Muted periwinkle — labels, turn indicators, and rule lines only, never body copy |
No gradients anywhere. Accent yellow is rationed to the winning line, the O mark, and one CTA. X and O read instantly on the dark field and stay distinguishable at 375px.
Typography.
+0.02em so pixel counters do not merge.clamp(44px, 9vw, 104px), h2 24px → 34px, h3 18px → 22px, body 16px → 18px, label 11px → 13px with +0.12em tracking, tile mark 40px → 72px. Line-height 1.05 on display, 1.5 on body.Shape language. Pixel-grid geometry: everything snaps to a 4px module. Board tiles are square with 2px hard borders and square corners — no border radius anywhere; the hard edge is the point. Marks are built as 5x5 pixel matrices rendered as CSS box-shadow pixel art or an inline SVG of filled squares, so an X looks like a Kare-era icon rather than a font glyph. Buttons are chunky rectangles with a 3px offset hard shadow (no blur) that compresses on press. Rules and dividers are 2px dotted or solid lines in muted periwinkle. Nothing is rounded, nothing glows.
Spacing rhythm. Strict 4/8pt scale throughout.
Imagery style. No photography, no illustration, no 3D. The imagery is the interface: pixel-drawn X and O marks, a 5x5 pixel cursor hand for the hover state on tiles, tiny pixel pictograms for the score strip (a pixel X badge, a pixel equals-sign for draws, a pixel O badge), and a 2px dotted rule system. A faint 4px indigo dot-grid texture at 6% opacity sits behind the landing field to make the pixel module visible without adding decoration.
Forbidden. Blue-indigo primary on a white or near-white ground; Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, or system-ui for any heading or body text; rounded corners, border-radius on tiles or buttons, frosted glass, blur, or soft drop shadows with blur radius; gradient blobs, glow effects, neon outlines, or luminous volumetric treatment; a centred hero stack of headline + subheadline + blue button, or a grid of identical hover-lift cards; photography, 3D renders, or illustration; bouncy spring easing, elastic transitions, or confetti on win; score or turn text in muted periwinkle #9A9BD4 at body size. The generic indigo/blue-on-white SaaS template is forbidden for this project.
Readable-text integrity. Headlines, wordmarks, labels, numbers, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, and no other element covers any part of them. Decoration and motion may be cropped, bled, overlapped, or cut as the direction asks, as long as they cover no readable text or control.
The board as an icon sheet. The Landing first screen is a full-bleed deep indigo field (#191A4A) with a 4px dot-grid at 6% opacity. The dominant element is the wordmark INDIGO-TIC set in Silkscreen, all-caps, spanning roughly 88% of the viewport width as a single line at desktop at clamp(44px, 9vw, 104px), with the hyphen rendered as a pixel-yellow accent block. To its right at desktop and below it at mobile sits a live 3x3 pixel demo board (max 320px) that plays one self-solving game on loop — X in periwinkle, O in pixel-yellow — so the product demonstrates itself inside the hero. A single chunky PLAY button with a 3px hard offset shadow sits bottom-left of the composition, aligned to the same left margin as the wordmark. No centred stack, no subheadline paragraph, no gradient, no floating cards.
The concept carries into the Game page unchanged: the same nine chunky tiles, the same 5x5 pixel marks, the same hard-edged controls, so the demo board the player watched on Landing is literally the board they then play on.
Signature moves.
INDIGO-TIC with a pixel-yellow accent block for the hyphen, at up to 104px, sitting above a self-playing 3x3 demo board in the hero.Interaction Model: Static Motion Tempo: restrained Hero Dimensionality: flat
Landing Hero Motion Brief.
INDIGO-TIC wordmark — the product demonstrating itself inside the hero.PLAY.steps() timing function) like an old sprite animation; the winning line extends cell by cell in four 80ms steps; the turn indicator blinks once on change; press states compress the button shadow by 3px in 60ms. Everything is instant on input.PLAY button bottom-left with its 3px hard offset shadow.PLAY button and all game controls remain fully usable.NFR-1 — Immediate, low-stakes play (explicit) The app must be playable within seconds of opening, with no account, sign-in, or setup step. Rationale: the accepted audience is a kid on a phone at a bus stop and an adult killing two minutes; the register is a toy you already know how to use.
NFR-2 — Legibility at small viewports (explicit)
Readable text and controls stay whole at 375px, 768px, and 1280px. The board is capped at min(88vw, 520px) so it never touches the edges at 375px; the controls row wraps to a column at 375px; the wordmark scales via clamp(44px, 9vw, 104px). No element covers any part of readable text or a control.
NFR-3 — Mark distinguishability (explicit)
X (#8E7BFF) and O (#F2C14E) must remain instantly distinguishable on the dark field at 375px, including for the smallest tile mark size (40px).
NFR-4 — Reduced-motion support (explicit)
Under prefers-reduced-motion, the demo board shows a completed game statically, marks appear without the two-step reveal, and the winning line appears whole. All game functionality remains available.
NFR-5 — No gradients, no blur, no rounded corners (explicit) No gradients anywhere; no border-radius on tiles or buttons; no frosted glass, blur, or soft drop shadows with blur radius; no glow, neon outline, or luminous volumetric treatment.
NFR-6 — Session-scoped score (required_inference) The score strip is session chrome, not a durable account record. It is not required to survive a page reload, and no persistence layer is required by the accepted requirements.
steps() timing functions for the sprite-style reveals. Marks rendered as inline SVG or box-shadow pixel art.Assumptions.
YOUR TURN · X on a fresh board.NEW GAME clears the board and preserves the score strip; RESET SCORE clears the score strip and leaves the current game in place. These are the two distinct controls the direction specifies below the board.Constraints.
Future (not current scope, not in current pages or acceptance).
YOUR TURN · X or YOUR TURN · O, which blinks once on change.X WINS, O WINS, or DRAW.NEW GAME — the control that clears the board and starts a fresh game while preserving the score strip.RESET SCORE — the control that returns the score strip to zero.
Three in a row, two players, one screen
indigo-tic is tic tac toe, drawn small and sharp: a 3×3 grid of chunky pixel tiles, X in periwinkle and O in pixel-yellow.
It is for two people with two spare minutes — no account, no setup, nothing to learn, whether you are on a phone at a bus stop or stealing a moment between other things.
You take turns placing a mark on any empty tile. The moment three of your marks line up — a row, a column, or a diagonal — the winning line draws itself and the game is called. Nine marks and no line is a draw. Then start a fresh game and go again.
Two players · one board
PLAYPress PLAY to open a fresh board. X moves first, turns alternate, and the game reports the moment a line closes or the grid fills — X wins, O wins or draw.
Demo game · X WINS

Three in a row, two players, one screen
indigo-tic is tic tac toe, drawn small and sharp: a 3×3 grid of chunky pixel tiles, X in periwinkle and O in pixel-yellow.
It is for two people with two spare minutes — no account, no setup, nothing to learn, whether you are on a phone at a bus stop or stealing a moment between other things.
You take turns placing a mark on any empty tile. The moment three of your marks line up — a row, a column, or a diagonal — the winning line draws itself and the game is called. Nine marks and no line is a draw. Then start a fresh game and go again.
Two players · one board
PLAYPress PLAY to open a fresh board. X moves first, turns alternate, and the game reports the moment a line closes or the grid fills — X wins, O wins or draw.
Demo game · X WINS
No comments yet. Be the first!