Page 1 of 19
System Requirements Document for turbo-project
1. Introduction
turbo-project is a professional, fully playable chess application delivered as a dark, instrument-grade web console. The product intent, derived from the authoritative user requirement thread ("ابني لي chess بشكل محترف ومضهر محترف ui ux" — build me a chess game professionally, with a professional UI/UX), is to let a player sit down at a board that feels like a precision tournament instrument rather than a toy: legal chess moves executed on a real board, a live match state (whose turn, what was played, what the result is), and a visual system that reads as quietly luxurious and competitive.
The audience is adults who play chess seriously — people who treat the board as measured hardware, who want the match screen to feel like a Swiss chronograph, and who expect the interface copy to be carried in Arabic with equal craft. The product is a single-player-facing board experience: two sides of one board played in alternating turns on the same device, with the application owning the rules, the state, and the presentation.
Page 2 of 19
2. System Overview
turbo-project is a browser-delivered chess console with two first-party destinations:
- Landing — the public entry surface that explains what the chess experience is and offers the way into play.
- Chess Game — the cohesive playing space where a match is started, legal moves are executed, match state is tracked, and the match is concluded with a displayed result.
Both destinations are application-owned custom UI and are reachable without an account. There is no sign-in, no profile, no saved history, and no server-side match persistence in the current scope: the match lives in the playing session, and the application owns the rules engine, the turn state, the move record, the clock display, and the result.
The accepted active human actor is a single persona, لاعب الشطرنج (the chess player), who plays both sides of the board in alternating turns. The application itself is the non-persona actor that validates legality, advances turns, records moves, and declares results.
Page 3 of 19
2a. Product Interpretation and Delivery Boundary
Delivery. turbo-project is delivered as a first-party web application with custom UI. The user asked for a chess game with a professional look and a professional user experience; the delivery shape is therefore a custom interface, not an embedded third-party board, not a provider-hosted game service, and not a headless API.
Access ownership. Both accepted destinations are public and account-free. The player arrives at the Landing surface, understands the experience, and enters the Chess Game surface directly. No identity is established, because no accepted behavior requires durable actor-specific state to be privately owned or resumed: a match is played in one sitting on one device, and nothing in the accepted requirements asks for a saved game, a rating, or a personal record. Access is therefore none on both surfaces, and no authentication, registration, or account-management capability is part of this product.
Current vs. future. Current scope is the playable match and its presentation: board, legal move execution, turn tracking, move record, clock display, evaluation display, captured material display, and match conclusion with a result. Future scope (Section 11) covers ideas that were not accepted as current commitments and must not appear in current pages or acceptance.
Exclusions. No online multiplayer, no matchmaking, no opponent accounts, no chat, no puzzles or lessons, no opening database, no engine-strength configuration, no payment, and no social features are part of the current product.
2b. Source Content Inventory
Not applicable. No reference directive in this project declares content_source; there is no uploaded factual content collection to inventory.
Page 4 of 19
2c. Page Content and Component Coverage
Page 5 of 19
Landing
Information and state
- The product identity as a chess console: the headline word شطرنج and the supporting line بمعيار آلة دقيقة.
- A short statement of what the experience offers: a full, playable chess match on a precision board.
- The single primary entry action into play: ابدأ المباراة.
- No account state, no session state, and no personalized content — the surface is identical for every visitor.
Primary action
- Enter the Chess Game surface and begin a match.
Supporting actions
- Read the product framing and the instrument metaphor before committing to play.
- Reach the same entry action from the hero dial and from the closing section rule.
Domain entities
- None persisted. The surface presents product framing only; it holds no match, no move, and no result.
Component responsibilities
- Hero instrument plate — left two-thirds carries the stacked headline and supporting line; the headline baseline sits on a full-width 1px hairline with an 8px amber tick.
- Hero bezel dial — a 320px circular bezel whose outer ring is a 2px champagne arc; the CTA ابدأ المباراة is cut into the dial face as an amber block with black text.
- Material band — a brushed-titanium diagonal band behind the hero word.
- Contour field — topographic contour lines at 6% opacity as a background field.
- Dial-scale section rules — 1px hairlines with 8px amber ticks at 64px intervals separating hero, board preview, and footer.
- Board preview object — the board rendered as the hero object with a soft studio top-left key light and a 1px champagne rim; decorative presentation of the board, not an interactive match.
States
- Loading — the surface is static-first; no data fetch is required, so no loading state is shown.
- Empty — not applicable; the surface always has its full content.
- Success — the visitor reads the framing and activates ابدأ المباراة, which opens the Chess Game surface.
- Error — if the Chess Game surface cannot be reached, the entry action reports the failure in place and remains available for retry; the Landing content stays intact.
- Recovery — the visitor retries the entry action; no state is lost because none was created.
Page 6 of 19
Chess Game
Information and state
- The board: 64 squares in warm bone and slate, with a 1px inner hairline per cell.
- The current turn: which side is to move, shown as an amber instrument indicator.
- The move record: a ruled instrument column, one move per hairline row, with a 3-character tabular index and alternating amber/teal marks for white and black.
- The clock display: two 2px champagne arcs that deplete clockwise around the player names, with tabular numerals inside the ring.
- The evaluation gauge: a horizontal 4px ruled scale from -6 to +6 with a champagne needle.
- Captured material: small ruled chips in bone and slate.
- The match result: the concluded outcome, displayed when the match ends.
- Selection state: the origin square carries a 1px teal ring; legal target squares carry 6px teal dots.
- Last-move state: a 45% opacity teal overlay on the from/to squares plus a teal arrow drawn in 220ms.
Primary actions
- Start a new match.
- Select a piece and move it to a legal target square.
- Continue alternating turns until the match concludes.
Supporting actions
- Read the move record to follow the game.
- Read the clock, evaluation gauge, and captured material to follow the match state.
- Start a fresh match after a result is shown.
Domain entities
- Match — the current game: its turn, its move sequence, its clock state, its evaluation, its captured material, and its result.
- Piece — a custom-drawn line-and-fill silhouette in bone or slate, belonging to one side, occupying one square.
- Square — one of 64 board cells, identified by file and rank, holding at most one piece.
- Move — a legal transition of one piece from an origin square to a target square, recorded in the move list with its index and side mark.
- Turn — the side currently entitled to move.
- Result — the concluded outcome of the match, displayed to the player.
Component responsibilities
- Board — renders the 64 squares, the pieces, the selection ring, the legal-move dots, the last-move overlay and arrow, and receives the player's selection and destination input.
- Clock bezel — renders the two champagne arcs and the tabular numerals around the player names; the clock is the most prominent object after the board.
- Turn indicator — renders the amber instrument indicator for the side to move.
- Evaluation gauge — renders the ruled scale and the champagne needle that sweeps on each move.
- Move list — renders the ruled instrument column; on mobile it becomes a horizontally scrolling ruled move ticker.
- Captured material rail — renders the ruled chips for captured pieces.
- Result display — renders the concluded outcome and the way to start a fresh match.
- New match control — starts a fresh match and resets board, clock, move list, evaluation, and captured material.
States
- Loading — the board and instrument rail render immediately; no remote data is required, so no blocking loading state is shown.
- Empty — a fresh match: board in the starting position, empty move list, empty captured rail, evaluation needle at center, clock at its starting values, turn indicator on the first side to move.
- Success — a legal move is executed: the piece occupies the target square, the turn advances, the move list gains a row, the evaluation needle sweeps, the last-move overlay and arrow update, and captured material updates if a capture occurred.
- Error — an illegal destination is chosen: the move is refused, the piece returns to its origin square, the selection is cleared or retained per the player's next input, and the turn does not advance. The player is not left in an ambiguous state.
- Recovery — the player selects a different piece or a different legal destination and continues; the match state is unchanged by the refused attempt.
- Completion — the match concludes and the result is displayed; the player can start a fresh match from the result state.
Page 7 of 19
3. Functional Requirements
Each requirement below is a distinct story point with its provenance, lifecycle facts, and observable acceptance.
FR-1 — Play a complete chess match
- As a لاعبة/لاعب الشطرنج, I should play a complete chess match from the starting position to a concluded result on a single board, so that I can actually play chess rather than look at a board.
- Provenance: explicit.
- Trigger/input: the player starts a match and alternately selects and moves pieces.
- Observable result: the match progresses through alternating turns and reaches a displayed result.
- Access state: public, no account.
- Failure/recovery: if a move is refused, the match state is unchanged and play continues.
- Continuation: after the result, the player can start a fresh match.
- Owner: Chess Game.
FR-2 — Start a new match
- As a لاعبة/لاعب الشطرنج, I should start a new match and see the board in its starting position with a clean instrument rail, so that I can begin play from a known state.
- Provenance: explicit (the accepted requirement to build a playable chess game implies a startable match); mechanics
required_inference.
- Trigger/input: the player activates the entry action on Landing or the new-match control on Chess Game.
- Observable result: board in the starting position, empty move list, empty captured rail, evaluation needle centered, clock at starting values, turn indicator on the first side to move.
- Access state: public, no account.
- Failure/recovery: if the match cannot be initialized, the control reports the failure in place and remains available for retry.
- Continuation: the player makes the first move.
- Owner: Chess Game (entry from Landing).
FR-3 — Execute legal moves
- As a لاعبة/لاعب الشطرنج, I should select a piece and move it to a legal destination, with legal destinations shown as 6px teal dots and the origin square ringed in 1px teal, so that I can play without guessing what is allowed.
- Provenance: explicit (playable chess); presentation details explicit from the creative direction.
- Trigger/input: the player selects a piece, then selects a destination square.
- Observable result: the piece occupies the target square, the turn advances, and the move is recorded.
- Access state: public, no account.
- Failure/recovery: an illegal destination is refused; the piece returns to its origin and the turn does not advance.
- Continuation: the player selects another piece or another destination.
- Owner: Chess Game.
FR-4 — Enforce the rules of chess
- As a لاعبة/لاعب الشطرنج, I should have the application enforce the rules of chess on every move, so that the match is a real game and not a free-form board.
- Provenance: explicit (a chess game is a game with chess rules); rule coverage
required_inference as the indispensable mechanics of a playable match.
- Trigger/input: every attempted move.
- Observable result: only legal moves are executed; illegal moves are refused with the board unchanged.
- Access state: public, no account.
- Failure/recovery: refusal is the recovery path; the player is never left with a half-applied move.
- Continuation: play continues from the unchanged state.
- Owner: Chess Game (application rules engine).
FR-5 — Track and display the current turn
- As a لاعبة/لاعب الشطرنج, I should always see which side is to move, shown as an amber instrument indicator, so that I never lose track of whose turn it is.
- Provenance: explicit (turn state is part of a playable match); indicator styling explicit from the creative direction.
- Trigger/input: every executed move.
- Observable result: the turn indicator moves to the other side.
- Access state: public, no account.
- Failure/recovery: a refused move does not change the indicator.
- Continuation: the indicated side moves.
- Owner: Chess Game.
FR-6 — Record and display the move list
- As a لاعبة/لاعب الشطرنج, I should see every move on its own hairline row with a 3-character tabular index and alternating amber/teal marks for white and black, so that I can follow the game as a ruled record.
- Provenance: explicit (match state includes the moves played); presentation explicit from the creative direction.
- Trigger/input: every executed move.
- Observable result: a new row appears in the move list; on mobile the list scrolls as a live ticker.
- Access state: public, no account.
- Failure/recovery: a refused move adds no row.
- Continuation: the list continues to grow with the match.
- Owner: Chess Game.
FR-7 — Display the chess clock as a physical bezel
- As a لاعبة/لاعب الشطرنج, I should see two 2px champagne arcs depleting clockwise around the player names with tabular numerals inside the ring, so that the clock reads as the most prominent instrument after the board.
- Provenance: explicit from the creative direction (signature move); clock behavior
required_inference as part of a professional match presentation.
- Trigger/input: the match running and each turn passing.
- Observable result: the active side's arc depletes and its numerals count down; the seconds tick with a hard 80ms step and no easing.
- Access state: public, no account.
- Failure/recovery: with
prefers-reduced-motion, the clock updates without sweep and transitions collapse to instant state changes.
- Continuation: the clock continues for the running match.
- Owner: Chess Game.
FR-8 — Display the evaluation gauge
- As a لاعبة/لاعب الشطرنج, I should see a horizontal 4px ruled scale from -6 to +6 with a champagne needle that sweeps on every move, so that I can read the match as measured data.
- Provenance: explicit from the creative direction (signature move).
- Trigger/input: every executed move.
- Observable result: the needle sweeps to the new value.
- Access state: public, no account.
- Failure/recovery: a refused move does not move the needle.
- Continuation: the gauge continues to track the match.
- Owner: Chess Game.
FR-9 — Display captured material
- As a لاعبة/لاعب الشطرنج, I should see captured pieces as small ruled chips in bone and slate below the evaluation gauge, so that material balance is visible at a glance.
- Provenance: explicit from the creative direction (signature move).
- Trigger/input: a capture executed during the match.
- Observable result: a chip appears in the captured rail for the capturing side.
- Access state: public, no account.
- Failure/recovery: a refused move adds no chip.
- Continuation: the rail continues to accumulate with the match.
- Owner: Chess Game.
FR-10 — Show the last move on the board
- As a لاعبة/لاعب الشطرنج, I should see the last move marked with a 45% opacity teal overlay on the from/to squares and a teal arrow drawn in 220ms, so that I can immediately see what just happened.
- Provenance: explicit from the creative direction (signature move).
- Trigger/input: every executed move.
- Observable result: the overlay and arrow update to the new move.
- Access state: public, no account.
- Failure/recovery: with
prefers-reduced-motion, the arrow appears without the draw animation.
- Continuation: the marker follows the match.
- Owner: Chess Game.
FR-11 — Conclude the match and display the result
- As a لاعبة/لاعب الشطرنج, I should have the match conclude and the result displayed, so that I know how the game ended.
- Provenance: explicit (a complete playable match has an end); result display
required_inference as the indispensable observable outcome.
- Trigger/input: the match reaches its concluding condition.
- Observable result: the result is displayed on the Chess Game surface and the board stops accepting moves.
- Access state: public, no account.
- Failure/recovery: the result state remains readable and the new-match control remains available.
- Continuation: the player starts a fresh match.
- Owner: Chess Game.
FR-12 — Present a professional, instrument-grade UI
- As a لاعبة/لاعب الشطرنج, I should see the board, clock, move list, evaluation gauge, and captured material presented as a dark titanium instrument console, so that the product reads as professional rather than as a toy.
- Provenance: explicit (the user asked for a professional look and professional UX).
- Trigger/input: any visit to either surface.
- Observable result: the palette, typography, shape language, and layout of Section 6 are applied consistently.
- Access state: public, no account.
- Failure/recovery: not applicable to presentation; the surfaces remain readable at every supported viewport.
- Continuation: the player continues to use the console.
- Owner: Landing and Chess Game.
FR-13 — Carry Arabic UI copy with equal craft
- As a لاعبة/لاعب الشطرنج, I should read the interface in Arabic set in Saira at 1.7 line-height, so that the visual system serves the language of the request rather than treating it as an afterthought.
- Provenance: explicit (the request is Arabic-language); typographic treatment explicit from the creative direction.
- Trigger/input: any visit to either surface.
- Observable result: all interface copy is Arabic and set in the specified body face and line-height.
- Access state: public, no account.
- Failure/recovery: no readable text, clock numeral, or board square is cropped or clipped at 375px, 768px, or 1280px.
- Continuation: the player continues to use the console.
- Owner: Landing and Chess Game.
FR-14 — Enter play from the public entry surface
- As a لاعبة/لاعب الشطرنج, I should understand what the chess console offers and enter play from a single clear action, so that I can get to the board without friction.
- Provenance:
required_inference (the public entry surface is the accepted entry boundary for the playable match).
- Trigger/input: the player activates ابدأ المباراة on the hero dial.
- Observable result: the Chess Game surface opens with a fresh match.
- Access state: public, no account.
- Failure/recovery: if the Chess Game surface cannot be reached, the entry action reports the failure in place and remains available for retry.
- Continuation: the player makes the first move.
- Owner: Landing.
Page 8 of 19
4. User Personas
Page 9 of 19
لاعبة/لاعب الشطرنج — the chess player
Product context. This is the only accepted active human actor in turbo-project. They arrive at a dark, instrument-grade chess console, most likely on a desktop where the board occupies the left two-thirds of a 12-column grid and the instrument rail stacks on the right, or on a 375px phone where the board comes first at full width minus 24px gutters. They are adults who play chess seriously: they know the rules, they care about notation, and they judge a chess interface by whether it respects the game.
Primary goal. Play a complete, real chess match — from the starting position, through alternating legal moves, to a concluded result — on a board that feels like measured hardware.
Distinct accepted responsibilities.
- Deciding to enter play from the public entry surface and starting a fresh match.
- Selecting a piece and choosing among its legal destinations, using the teal dots and origin ring as the only affordance.
- Alternating turns with themselves across both sides of the board, since the accepted product is a single-device match.
- Reading the match as data: the turn indicator, the ruled move list, the clock bezel, the evaluation gauge, and the captured material rail.
- Recognizing the conclusion of the match and starting a fresh one.
Relevant inputs and decisions.
- Which piece to move, and to which legal square.
- Whether to trust the displayed legal-move affordances or re-read the board.
- When to start a new match after a result.
Interactions with other accepted participants. The only other actor is the application itself, which validates legality, advances the turn, records the move, sweeps the evaluation needle, updates the clock, and declares the result. There is no opponent account, no chat, and no other human participant in the current scope; the player plays both sides.
Observable success. The player completes a match and sees a displayed result; every move they made appears as a ruled row in the move list; the clock, evaluation gauge, and captured material tracked the match throughout; and nothing they needed to read was ever cropped or clipped at 375px, 768px, or 1280px.
What makes this role's work different. The player's work is not configuration, administration, or content management — it is the continuous, alternating act of moving pieces under the rules of chess while reading an instrument panel. Every accepted capability in this product exists to serve that single loop.
Page 10 of 19
5. Core User Flows
Flow A — Enter the console and start a match
- The player opens turbo-project and lands on Landing.
- The player reads the hero instrument plate: the headline شطرنج set in Barlow Condensed, the supporting line بمعيار آلة دقيقة in Saira muted, and the board rendered as the hero object with its champagne rim.
- The player reads the framing of what the console offers: a full, playable chess match on a precision board.
- The player activates ابدأ المباراة, cut into the 320px hero bezel dial as an amber block with black text.
- Observable result: the Chess Game surface opens with a fresh match — board in the starting position, empty move list, empty captured rail, evaluation needle centered, clock at starting values, turn indicator on the first side to move.
- Failure/recovery: if the Chess Game surface cannot be reached, the entry action reports the failure in place and remains available; the Landing content stays intact and the player retries.
- Next step: the player makes the first move (Flow B).
Flow B — Play a match move by move
- The player is on Chess Game with a fresh match and the turn indicator showing the side to move.
- The player selects a piece on the board.
- Observable result: the origin square carries a 1px teal ring and each legal destination square carries a 6px teal dot. No hover lift, no shadow, no glow.
- The player selects a legal destination square.
- Observable result: the piece slides 180ms with cubic-bezier(0.2,0,0,1) into the target square; the turn indicator moves to the other side; a new ruled row appears in the move list with its 3-character tabular index and the correct amber or teal side mark; the evaluation needle sweeps to its new value on the -6 to +6 scale; the last-move overlay appears at 45% opacity teal on the from/to squares with the arrow drawn in 220ms; if a capture occurred, a ruled chip appears in the captured material rail.
- Failure/recovery: if the player selects an illegal destination, the move is refused, the piece returns to its origin square, the turn does not advance, no row is added to the move list, and the needle does not move. The player selects a different piece or a different legal destination and continues from the unchanged state.
- The player repeats steps 2–6, alternating sides, until the match concludes.
- Continuation: the clock bezel's two 2px champagne arcs deplete clockwise around the player names with tabular numerals inside the ring, ticking with a hard 80ms step and no easing, for the duration of the match.
Page 11 of 19
Flow C — Follow the match as an instrument reading
- The player is mid-match on Chess Game.
- The player reads the turn indicator to confirm which side is to move.
- The player reads the ruled move list — one move per hairline row, 3-character tabular index, alternating amber/teal marks — to reconstruct the game. On mobile, the list scrolls as a live ticker.
- The player reads the evaluation gauge — a horizontal 4px ruled scale from -6 to +6 with a champagne needle — to see the measured balance.
- The player reads the captured material rail — small ruled chips in bone and slate — to see material balance.
- The player reads the clock bezel to see remaining time per side.
- Observable result: the player has a complete, current picture of the match without leaving the board.
- Next step: the player returns to Flow B and makes the next move.
Flow D — Conclude the match and start a fresh one
- The player is on Chess Game and the match reaches its concluding condition.
- Observable result: the result is displayed on the Chess Game surface and the board stops accepting moves.
- The player reads the result.
- The player activates the new-match control.
- Observable result: the board returns to the starting position, the move list empties, the captured rail empties, the evaluation needle returns to center, the clock returns to its starting values, and the turn indicator returns to the first side to move.
- Failure/recovery: if the fresh match cannot be initialized, the control reports the failure in place and remains available for retry; the concluded result stays readable.
- Continuation: the player begins Flow B again.
Page 12 of 19
Flow E — Play on a phone
- The player opens turbo-project at 375px width.
- Observable result: the board renders first at 100% width minus 24px gutters, single column; the ruled move ticker scrolls horizontally below it; controls follow.
- The player plays Flow B on the board.
- Observable result: the move ticker scrolls as a live ticker; every item becomes fully readable as it passes; with
prefers-reduced-motion the ticker stops and shows whole items in a horizontally scrollable row.
- Observable result: no headline, label, clock numeral, or board square is cropped or clipped; all readable text and needed content stay whole inside the viewport and their container.
- Continuation: the player continues Flow B and Flow D.
Page 13 of 19
6. Visuals, Colors and Theme
Muse and headline. The muse is MARQ by Garmin — a luxury instrument aesthetic. The headline direction is Precision instrument chess: a titanium tournament console. Chess is a precision instrument sport: 64 squares, ruled notation, counted clocks, needle-exact evaluation. The MARQ language turns the board into measured hardware — the clock becomes a bezel, the move list becomes a ruled data column, the evaluation bar becomes a gauge. The register is focused, competitive, quietly luxurious, and zero cartoon. Because the request is Arabic-language, the visual system carries Arabic UI copy with equal craft.
Palette (dark mode).
| Role | Hex | Use |
|---|
| Background | #0E1013 | Titanium dark ground; carries ~70% of the page |
| Surface | #1A1D21 | Raised graphite panels |
| Hairline | #2A2E33 | 1px panel and row rules |
| Text | #EDE8DF | Body text on #0E1013 (contrast ~15:1) |
| Primary | #C9A227 | Warm champagne-amber; the single instrument accent — active turn indicator, clock hands, selected square ring, primary CTA |
| Accent | #2FA8A0 | Teal; secondary signal used only for data — evaluation gauge, legal-move dots, last-move arrow |
| Muted | #8A8578 | Muted labels only at 12px+, never for move notation |
| Board light | #C7BFAE | Warm bone squares |
| Board dark | #4A5158 | Slate squares |
| Last-move overlay | #2FA8A0 at 45% opacity | From/to square overlay |
Typography.
- Headings: Barlow Condensed 600/700; all-caps for labels and clock numerals; tight 0.02em tracking on display, wide 0.16em tracking on micro-labels; huge scale jump between the 96px hero word and 11px ruled metadata.
- Body: Saira.
- Scale: 1.25 modular. Mobile → desktop: 44/34/24/16/13 → 96/56/32/17/13.
- Clock numerals: tabular, 40px mobile → 72px desktop.
- Move list: 13px with tabular figures.
- Arabic copy: set in Saira at 1.7 line-height.
Shape language. Instrument geometry: circles, bezels, and ruled rows. Circular gauge frames; 2px hairline rings around the clock and evaluation dial; chamfered 6px radii on panels; square board cells with a 1px inner hairline. No pills, no blobs, no soft 20px card radii — every curve is either a perfect circle or a chamfer.
Layout. Full-bleed dark console. Desktop: 12-column grid; the board occupies columns 1–7 at 1:1 with the clock bezel overlapping its top-right corner; columns 8–12 hold a stacked instrument rail (turn indicator, evaluation gauge, ruled move list, captured material). Mobile 375px: single column; board first at 100% width minus 24px gutters, then a horizontally scrolling ruled move ticker, then controls. Section transitions are horizontal hairlines with an 8px amber tick, like a dial scale. All content stays inside its container at 375 / 768 / 1280.
Imagery. No stock photography and no illustration. Imagery is material and instrumentation: a macro titanium-brushed texture band behind the hero word, topographic contour lines at 6% opacity as a background field, and the board itself rendered as the hero object with a soft studio top-left key light and a 1px champagne rim. Piece glyphs are custom-drawn line-and-fill silhouettes in bone and slate, never emoji.
Avoid. Blue/indigo SaaS palette (#2563EB, #4F46E5, #7C3AED) on white or near-white ground; rounded 20px+ glass cards, gradient blobs, hover-lift card grids; Inter, Roboto, Poppins, or system-ui for headings or body; chess piece emoji or clip-art glyphs; neon cyan/magenta sci-fi glow and particle fields; playful bouncy easing, confetti on capture, cartoon mascots; photographic stock imagery of people or hands on pieces; cropping or clipping any readable text, clock numeral, or board square at 375px.
Page 14 of 19
7. Signature Design Concept
The board as a titanium instrument plate.
The public entry is not a centred SaaS hero. It is a dark titanium instrument plate. The left two-thirds carries the word شطرنج set in Barlow Condensed at clamp(64px, 12vw, 152px) in bone #EDE8DF, stacked over a second line بمعيار آلة دقيقة in 17px Saira muted #8A8578. The headline runs edge to edge and its baseline sits on a full-width 1px hairline with an 8px amber tick — the same dial-scale rule that separates every section of the console.
The right third holds a circular bezel dial, 320px, whose outer ring is a 2px champagne arc #C9A227 that animates as the seconds hand. Inside the dial face, the CTA ابدأ المباراة is cut in as an amber block with black text — the only primary action on the surface, and it reads as a machined part of the instrument rather than a button placed on top of it.
Behind everything: a brushed-titanium diagonal band and topographic contour lines at 6% opacity. The board itself appears as the hero object with a soft studio top-left key light and a 1px champagne rim, so the first thing the visitor understands is that this is a board, and the second is that it is measured hardware.
The concept recomposes only accepted content and controls: the product framing, the board, and the single entry action. It introduces no new behavior, page, or destination.
Page 15 of 19
8. Interaction Model & Motion Direction
Interaction Model: Animated
Motion Tempo: restrained
Hero Dimensionality: layered_2d
Landing Hero Motion Brief
- Focal subject. The circular 320px bezel dial on the right third, with the board rendered as the hero object behind the headline on the left two-thirds.
- Input → transformation → outcome thesis. The page loads → the 2px champagne arc on the bezel's outer ring sweeps as a seconds hand while the brushed-titanium band and contour field hold still behind the headline → the visitor reads the framing and activates ابدأ المباراة, which opens the Chess Game surface with a fresh match. The motion is the instrument coming alive, not an entrance animation.
- Motion vocabulary. Restrained and mechanical. Clock seconds tick with a hard 80ms step and no easing. Pieces slide 180ms with cubic-bezier(0.2,0,0,1). The evaluation gauge needle sweeps on each move. The last-move arrow draws in 220ms. No bounce, no particles, no idle animation on the board.
- Composed first frame. Dark titanium ground
#0E1013; the headline شطرنج in bone #EDE8DF running edge to edge with its baseline on a full-width 1px hairline and an 8px amber tick; the supporting line in muted Saira beneath it; the 320px bezel dial at the right with its champagne arc at rest at the top of its sweep and the amber CTA block cut into the dial face; the brushed-titanium diagonal band and 6% contour lines behind everything.
- Reduced-motion state. With
prefers-reduced-motion, all transitions collapse to instant state changes and the clock updates without sweep. The bezel arc holds a static position, the headline and CTA remain fully composed, and no readable text, numeral, or board square is cropped or clipped.
Page 16 of 19
9. Non-Functional Requirements
NFR-1 — Readability at every supported viewport. All readable text and needed content stay whole at 375px, 768px, and 1280px: headlines, wordmarks, labels, numbers, board squares, and controls stay entirely inside the viewport and their container, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element covers any part of them. Crops, bleeds, and off-edge placement are for decoration only — shapes, textures, rules, and background art. The one exception is moving content: the mobile move ticker may cross the container edge by design, and is judged by whether it actually moves and whether every item becomes fully readable as it passes. With prefers-reduced-motion it stops and shows whole items, wrapping into rows or sitting in a horizontally scrollable row (overflow-x: auto). Provenance: explicit creative direction; rationale: the user asked for a professional UI/UX and the direction forbids clipping readable content.
NFR-2 — Contrast. Body text #EDE8DF on #0E1013 holds a contrast ratio of approximately 15:1. Muted #8A8578 is used only at 12px+ labels and never for move notation. Provenance: explicit creative direction.
NFR-3 — Reduced motion. Under prefers-reduced-motion, all transitions collapse to instant state changes and the clock updates without sweep. Provenance: explicit creative direction.
NFR-4 — No account requirement. Both accepted destinations are reachable without an account; no authentication, registration, or account-management capability exists in the current scope. Provenance: required_inference from the accepted access contract (access_requirement: none on both surfaces) and the absence of any accepted durable actor-specific state.
NFR-5 — No third-party board or game provider. The board, rules enforcement, clock, move list, evaluation gauge, and captured material are first-party custom UI. Provenance: explicit delivery shape (custom_ui: true).
NFR-6 — Arabic-first interface copy. All interface copy is Arabic, set in Saira at 1.7 line-height, with headings in Barlow Condensed. Provenance: explicit (the request is Arabic-language) plus explicit creative direction.
NFR-7 — No stock photography or illustration. Imagery is material and instrumentation only: brushed-titanium texture, contour lines, and the board as the hero object. Piece glyphs are custom-drawn line-and-fill silhouettes, never emoji. Provenance: explicit creative direction.
NFR-8 — Forbidden palette. The generic indigo/blue-on-white SaaS template is forbidden for this project; #2563EB, #4F46E5, and #7C3AED on white or near-white ground must not be used. Provenance: explicit creative direction.
Page 17 of 19
10. Tech Stack
The authoritative user requirement thread specifies no technology. The following are coherent defaults for a browser-delivered, custom-UI chess console with a client-side rules engine and no server-side match persistence. All items are labeled as defaults.
- Frontend: React with TypeScript, built as a single-page application.
[Default — not specified by user]
- Styling: CSS with custom properties for the palette tokens in Section 6, plus a utility layer for the 12-column grid and the ruled instrument rows.
[Default — not specified by user]
- Chess rules engine: a client-side chess rules library (for example
chess.js) wrapped behind a first-party match module, so the application owns the match state, the move record, the clock, and the result. [Default — not specified by user]
- Board rendering: first-party React components rendering the 64 squares, the custom-drawn piece silhouettes, the selection ring, the legal-move dots, and the last-move overlay and arrow. No third-party board widget.
[Default — not specified by user]
- Fonts: Barlow Condensed and Saira, self-hosted.
[Default — not specified by user]
- Storage: none required for the current scope; the match lives in the playing session.
[Default — not specified by user]
- Backend: none required for the current scope. If a backend is later introduced for future-scope features, Python/FastAPI is the coherent default.
[Default — not specified by user]
- Packaging and deployment: Docker with docker-compose for local and single-host deployment. Kubernetes is not required by the current scope.
[Default — not specified by user]
Page 18 of 19
11. Assumptions and Constraints
Assumptions
- A-1. The accepted product is a single-device match in which one player plays both sides of the board in alternating turns. This follows from the accepted persona catalog containing exactly one active human actor and from the absence of any accepted opponent, matchmaking, or online-play requirement.
[Assumption — required_inference]
- A-2. A match is played in one sitting; no saved game, resume, rating, or personal history is required, because no accepted behavior requires durable actor-specific state to be privately owned or resumed.
[Assumption — required_inference]
- A-3. The clock is a display instrument for the match; the accepted requirement does not specify a time control, increment, or flag-fall rule, so no specific time control is asserted here.
[Assumption — not specified by user]
- A-4. The evaluation gauge displays a measured balance on the -6 to +6 scale as directed; the accepted requirement does not specify the evaluation source or depth, so no engine configuration is asserted here.
[Assumption — not specified by user]
- A-5. The Landing surface is the public entry boundary and the Chess Game surface is the playing space; both are application-owned custom pages reachable without an account, per the accepted page and access contract.
[Assumption — required_inference]
Constraints
- C-1. The palette, typography, shape language, layout, motion tempo, and imagery rules of Section 6 are binding for both surfaces.
- C-2. The generic indigo/blue-on-white SaaS template is forbidden for this project.
- C-3. No readable text, clock numeral, or board square may be cropped or clipped at 375px, 768px, or 1280px.
- C-4. No account, authentication, or account-management capability is part of the current scope.
- C-5. No online multiplayer, matchmaking, opponent accounts, chat, puzzles, lessons, opening database, engine-strength configuration, payment, or social features are part of the current scope.
Future requirements (not current scope, not in current pages or acceptance)
- F-1. Online play against a remote opponent, with matchmaking and opponent identity.
- F-2. Saved games, resume, and personal match history.
- F-3. Puzzles, lessons, and an opening database.
- F-4. Configurable engine strength and analysis depth.
- F-5. Configurable time controls and increment.
These are recorded as future horizons only. They must not appear in the current pages, requirements, or acceptance criteria.
Page 19 of 19
12. Glossary
- turbo-project — the project name for this chess console.
- لاعب الشطرنج — the chess player; the single accepted active human persona, who plays both sides of the board in alternating turns.
- Landing — the public entry surface that frames the chess console and offers the single entry action into play.
- Chess Game — the playing surface where a match is started, legal moves are executed, match state is tracked, and the match concludes with a displayed result.
- Match — the current game: its turn, its move sequence, its clock state, its evaluation, its captured material, and its result.
- Move — a legal transition of one piece from an origin square to a target square, recorded in the move list with its index and side mark.
- Turn — the side currently entitled to move, shown by the amber instrument indicator.
- Clock bezel — the two 2px champagne arcs that deplete clockwise around the player names, with tabular numerals inside the ring.
- Evaluation gauge — the horizontal 4px ruled scale from -6 to +6 with a champagne needle that sweeps on every move.
- Move list — the ruled instrument column recording every move on its own hairline row with a 3-character tabular index and alternating amber/teal marks; it becomes a horizontally scrolling ticker on mobile.
- Captured material rail — the ruled chips in bone and slate showing captured pieces.
- Last-move overlay — the 45% opacity teal overlay on the from/to squares plus the teal arrow drawn in 220ms.
- Dial-scale rule — a 1px hairline with 8px amber ticks at 64px intervals, used between sections instead of cards or spacing alone.
- Instrument rail — the stacked right-hand column on desktop holding the turn indicator, evaluation gauge, ruled move list, and captured material.
- Result — the concluded outcome of the match, displayed to the player when the match ends.
No comments yet. Be the first!