STYLE GUIDE

Colors

Brand Accent — Purple

Primary action color. Used on primary buttons, shadows on white text, character card shadows, toggle on-state, KO block fill, overlay text. Never used as background behind white text unless a contrasting shadow offsets it.

Player 1 — Cyan

All P1 UI: grid border, selected cells, name shadow, HUD score/combo shadow. Never used on P2 elements.

Player 2 — Magenta

Mirrors P1 semantics exactly, shifted to magenta. Grid border, selected cells, name shadow. Never mixed with P1 colors on the same element.

Danger — Red

Error states, conflicts, and low-HP. The track of the health bar is always the danger red, revealed as health drops. Also used for the timer at <10s, wrong-move cell backgrounds, and the Leave/Surrender button.

Action Colors — Orange & Yellow

Orange is the VS AI / single-player signal color. It also appears on the HP bar at ~50% health, and in the heavy-hit screen flash. Yellow is the HP bar fill at full health, and the overlay subtitle text (always on dark or colored backgrounds).

Greyscale & Neutrals

Used for backgrounds, surfaces, borders, and body text. All neutral values have equal R/G/B channels — no color cast.

Typography

Typefaces

Type Scale with Text Shadow Offset Scale

Hard pixel text shadows (offset, no blur) are used throughout. Shadow offset grows with type size so it remains proportionally punchy at every scale. Shadows pair with the background context — purple shadows over white UI, colored shadows over dark/arena backgrounds.

Live Specimens

Buttons

All buttons use Roboto Mono, 700 weight. Press interaction: translate +2px/+2px with shadow shrink. Release: translate -1px/-2px with shadow grow. Shadow is a hard pixel offset (no blur) — the direction and color are the meaningful signals.

Primary — .btn

Primary Small — .btn.btn-sm

Secondary — .btn-secondary or .btn.btn-secondary

Alternate Primary — .btn.btn-alt

Destructive — .btn.btn-danger

Utility — .btn-utility

Button System — Weight × Intent

.btn-sm composes orthogonally with any intent modifier. e.g. .btn.btn-sm.btn-danger = small destructive button.

Sudoku Grid & Cell States

The grid renders over an arena background. Cell backgrounds use white at varying opacity so the arena art shows through on ghosted cells. Own grid uses 88% opacity white for clarity. Opponent empty cells use 25% — visibly ghosted to signal "not yours". Opponent filled cells match own-grid opacity (90%) to show progress legibly.

Grid Identity & Borders

Cell States Reference

Grid Borders & Box Dividers

Thin cell lines: 1px #D5D5D5. Thick 3×3 box dividers: 2px #888888. The outer border uses CSS custom properties (--_grid-outline-color, --_grid-outline-width) so that .is-me overrides both color and width on the same single border declaration — it fully replaces the neutral border rather than layering on top of it. Default: 2px grid-box-border. Own grid: 3px in the player's identity color. Right and bottom borders of cells adjacent to box lines are suppressed to prevent double-border artifacts.

Mobile Numpad

HUD & Gameplay UI

Health Bar System

The bar track is always danger red — the red is the "low HP" signal already baked in. The fill bar covers it: yellow at full, orange at ~50%, then pulsing yellow at low HP.

Full HUD

Game Overlay

Floating Score Pop

Appears near the cell where a correct number is entered. 13px, w800, accent purple. Floats up 36px and fades out over 0.75s.

Attack Flash

Full-screen inset box-shadow flashes on hit, keyed to attack type:
• Punch: rgba(240,0,19,0.22) — subtle red, 0.25s
• Heavy: rgba(255,139,22,0.32) → red — orange then red, 0.35s
• Self-hit: rgba(240,0,19,0.20) — 0.2s

Lobby & Screen Components

Lobby Text Hierarchy

Start Screen Labels

Character Card

Settings Panel

Screen & Form Components

Join Combo — .join-combo

Input and action button fused into a single bordered unit. Currently appears once on the start screen for room code entry. White outer border, purple box-shadow. The inner button acts as a secondary action (white bg, accent text) with no border-radius.

Standalone Input

Proposed for future forms (player name entry, search, etc.). Not currently used standalone in the game. Focus ring uses accent-light at 3px spread — soft glow rather than hard pixel, since this is a white-bg form context not an arena overlay.

Inline Messages — Error & Success

Inline feedback text beneath form elements. Rendered in-place using visibility: hidden / visibility: visible — never display: none — so layout does not shift when they appear.

Glass Card — .lobby-share

Semi-transparent frosted panel used for the private room invite code. Sits over the arena background. Used sparingly — only when content needs grouping against a complex background.

Lobby Promo — visibility-based feedback

Quick Play share row. The feedback text ("Copied to clipboard") always occupies its line height via visibility: hidden/visible — this prevents the button from jumping down when feedback appears.

Carousel — .track-carousel

Used for track selection in settings and arena selection in lobbies. Chevron buttons are utility style with 44×44px minimum touch target. Title is center-fixed width with overflow ellipsis.

Difficulty Selector — .sp-diff-btn

Row of small secondary buttons where inactive options are dimmed to 55% opacity. The selected button restores to full opacity — no other visual indicator needed.

Lobby Hint — pulsing status text

Used for "Waiting for opponent…" and similar transient states. Pulse draws attention without urgency.

Combo Counter

Lives in the HUD sub-row alongside the score. Reserves its line height even when empty so the score doesn't shift when a combo appears.

Match-End Screen Elements

Start Screen Divider

Text Color & Shadow Pairing Logic

The game renders UI over complex, colorful arena backgrounds. All readable text therefore uses white or high-chroma colors with hard pixel shadows that ensure contrast regardless of what's behind.

The Mid-Dark Rule

When white text appears with a player-color shadow, use the mid-dark variant (p1-mid-dark, p2-mid-dark), not the primary color. The primary cyan and magenta are too bright for a shadow — they'd feel garish. The mid-dark is dark enough to read as a grounding shadow while still being clearly player-colored.

Proposed Components

These components do not yet exist in the game but are consistent with the design language and likely needed as the game adds features. Specs are proposals — refine before shipping.

Badge / Tag

Small pill labels for surfacing state, novelty, or counts. Uses --radius-pill. Variants keyed to semantic meaning, not visual preference.

Toast Notification

Ephemeral feedback that appears over gameplay or between screens. Bottom-anchored, auto-dismisses. Uses a left accent border rather than full background color to keep it readable over any arena. Would need a JS show/hide with a slide-up + fade animation.

Modal / Confirmation Dialog

Blocks interaction for destructive confirmations (e.g., "Surrender — are you sure?"). Backdrop at 65% black. Panel on white surface. Actions use the existing button system — confirm uses .btn-danger, cancel uses .btn-secondary.

Tooltip

Contextual info on hover. Useful for explaining game mechanics (e.g., what "combo" means, difficulty differences). Uses the same dark panel as the settings menu, with a hard pixel shadow in accent to stay on-brand.

Dropdown / Select

Styled <select> for settings that have more than 2–3 options (e.g., language, region, control scheme). Uses custom chevron SVG via background-image to replace the native arrow.

Loading States — Skeleton & Spinner

For async waits: character portrait loading, matchmaking, network reconnect. Skeleton uses a shimmer gradient. Spinner uses accent color on top of grey track.