Colours, typography, assets, and usage rules for Pixel Rugby.
| Context | Font | Notes |
|---|---|---|
| Game canvas & HUD | Press Start 2P | All text uppercase. Loaded from /assets/PressStart2P.ttf |
| Buttons & labels | Press Start 2P | 8 – 18 px depending on button size |
| Website pages | System font stack | Body 16 px, line-height 1.5 |
| Code/mono | SFMono-Regular, Consolas, monospace | For code snippets and hex values |
In-game buttons follow a pixel-art aesthetic with chunky borders and a stamped block extrusion (solid dark-green #1e5f2a filled at every offset from 1 to depth) instead of a translucent drop shadow — matching the title, carousel, and card extrusions. Selected (primary) buttons also breathe with a subtle ~1.2% scale pulse to draw the eye. Extrusion depth scales up in portrait so the stamped look reads at touch sizes.
| Type | Size (P / D) | Border | Radius | Extrusion | Use |
|---|---|---|---|---|---|
| Action button (selected) | 400×80 / 178×38 | 3 px gold #FFD700 | 5 px | 4 px (5 px portrait) solid #1e5f2a | Selected / primary action (Kick Off, Continue, Play Round X) |
| Action button | 400×80 / 178×38 | 3 px white #fff | 5 px | 4 px (5 px portrait) solid #1e5f2a | Unselected action |
| Footer text button | 142×48 / 90×28 | 2 px white #fff | 3 px | 3 px (4 px portrait) solid #1e5f2a | Small secondary actions (< Back, Shuffle) |
| Footer icon button | 64×48 / 38×28 | 2 px white #fff | 3 px | 3 px (4 px portrait) solid #1e5f2a | Icon-only footer / homescreen actions (info, controller, trophy, gear, hamburger, users, fast-forward, sun/rain, pools) |
| Destructive button | varies (icon + label paired) | 2 px white #fff | 3 px | 3 px solid #7a0000 | Red #cc0000 face. Warning glyph prefixed to the label via drawDeleteButton(). Delete All Data, Clear, Delete Career. |
Side padding: SAFE_X + (p ? 20 : 10). Bottom margin: p ? 16 : 15. Adjacent footer icons share a p ? 14 : 10 px gap so they read as a uniform strip.
All glyphs are authored on a 24×24 pixel grid and rendered as Path2D fills (solid white over the button face, or solid #fff over a red face for destructive variants). Adding a new icon means adding a new _X_ICON_SVG + _drawXIcon(cx, cy, size) pair next to the others in game.js.
| Icon | Constant | Used by |
|---|---|---|
| Settings (gear) | _SETTINGS_ICON_SVG | Title-screen footer (gear button); WC / 6N / 4N tournament screens (in-tournament settings menu), their team-select carousels, and their mode-intro screens — opens the main Settings modal (trimmed to Difficulty / Sounds / Language) |
| About (i) | _ABOUT_ICON_SVG | Title-screen footer (info button) |
| Tutorial (TV) | _TUTORIAL_ICON_SVG | Title-screen footer (controller / TV button) |
| Trophy | _HIGH_SCORES_ICON_SVG | Title-screen footer; arcade carousel "best score" pill ([trophy] <score>); team-select / mode-intro Records shortcut (replaces the old "Results" text button) |
| Hamburger | _MENU_ICON_SVG | Career table footer — opens the Career menu modal; league select carousel and league mode-intro screens (foreshadowing the wider in-career menu) |
| Pools (grid) | _POOLS_ICON_SVG | World Cup bracket footer — opens the all-pools view |
| Warning (! frame) | _WARNING_ICON_SVG | Prefixed to red destructive-button labels via drawDeleteButton() — Delete All Data, Clear, Delete Career |
| Users (My Team) | _USERS_ICON_SVG | Career table footer — opens the My Team customization modal. Also painted on every in-tournament screen (WC / 6N / 4N) left of the gear, opening the run-scoped tournament squad editor (same modal, in-memory edits that revert on exit) |
| Backspace (Clear) | _CLEAR_ICON_SVG | High Scores destructive Clear button (red face) |
| Fast-forward | _FORWARD_ICON_SVG | Match-intro footer — opens the Simulate-match confirm modal |
| Sun | _SUN_ICON_SVG | Match-intro weather toggle — clear conditions |
| Rain | _RAIN_ICON_SVG | Match-intro weather toggle — rainy conditions |
| Full Guide (book) | _FULL_GUIDE_ICON_SVG | About modal — link to /guide |
| Derby (crossed swords) | drawDerbyIcon() | Match-intro Derby banner |
Inside an icon button, the glyph is rendered at round(buttonH * 0.55) centered both axes.
Destructive or irreversible actions open a centered confirm overlay before committing. All confirm modals share the same chrome so the pattern is recognizable across modes.
| Property | Value |
|---|---|
| Backdrop | rgba(0,0,0,0.6) full-viewport fill |
| Panel | White card via drawPixelCard, radius:0, 2 px white border. Portrait VIEW_W − 60 × 180; desktop 300 × 140. |
| Title | Press Start 2P bold, 14 px portrait / 11 px desktop, #222 |
| Subline | 10 / 8 px #666 — short clarifier (e.g. "You will lose your progress.") |
| Buttons | Two side-by-side: destructive (default-state, red face for permanent wipes) on the left, primary Cancel on the right. 120×44 portrait / 90×30 desktop with a 12 / 8 px gap. |
| Keyboard | y / Enter / Space commits; any other key cancels. Modal absorbs all clicks/keys until dismissed. |
Examples: Exit Tournament (wcConfirmExit), Simulate Match? (simConfirmVisible), Clear High Scores (two-step: "Clear your <mode> history?" → "Are you sure? This cannot be undone." in red bold — applies to all tabs, not just World Cup).
The "Match of the Day," "Derby," and venue banners on the match-intro screen sit on a white face with a 3 px (2 px desktop) solid #1e5f2a diagonal extrusion — no soft outline, no drop shadow. Banner text and the gold star / sword icon are also rendered in dark green #1e5f2a so the banner reads as a clean stamped block on the pitch.
Every World Cup screen (pool view, all-pools, knockout bracket) renders the title bar via the drawWCHostBar(year, hostIdx) helper instead of drawBar. Composition: [host-flag] {YEAR} WORLD CUP centered, with the same stamped extrusion as a regular bar title. Flag height = round(fontSize × 1.15) portrait / −1 px on desktop so it visually matches the cap-height of the Press Start 2P glyphs; flag width preserves the standard 1.4:1 aspect. Falls back to a plain {YEAR} WORLD CUP bar when no host is set.
All career-mode modals (Career menu, History, Records, Rules, Sportsbook, My Team, Help, Club Info) use a uniform chrome:
Pixel Rugbyrgba(0, 0, 0, 0.6)#000 diagonal block shadow| Attribute | Value |
|---|---|
| Aesthetic | SNES / Tecmo Bowl / Retro Bowl era pixel-art sports game |
| Theme colour | #1e6e2e (PWA title bar) |
| Background colour | #2d8c3c (PWA splash) |
| Text style | All uppercase in-game |
| Pitch pattern | Alternating stripes — #2d8c3c / #268534 |
| Crowd & weather | Animated pixel crowd, dynamic weather effects |
Seven lengths are available. Normal is the default and renders a 3-row volume on top of the head. Short is a flat-top crop. Buzzcut shaves the same shape down to 20%-opacity stubble over the scalp. Long shares the same top silhouette as Normal, then layers a back cascade — sideburn extension + four taper rows down past the shoulder, ending in a single-pixel tail. Fade paints no solid base; instead it lays 80% → 80% → 70% → 40% → 20% opacity bands over skin pads on rows -1 through 3, so the hair tapers cleanly into the scalp (burst-fade / taper-fade silhouette). Scrum Cap renders a helmet-shaped silhouette — crown + forehead band + ear flap on the visible side + a thin 3-pixel chin strap pinching across the jaw onto the neck. Cap face auto-tinted in the team's home-jersey primary colour (team.colors[0]) by default; the chin strap paints in a darker version of the same colour via _darkenHex so it reads as a strap, not part of the cap. Resolution chain: per-player capColor wins, else team-level capColor, else home primary. Most teams in teams.json set team.capColor explicitly to a kit accent (e.g. France red, NZ red, Australia blue, Ireland red, Scotland purple, Wales green, Italy red). Bald swaps the hair pixels for scalp. Set per-player via team.players[i].hairStyle, or globally on My Team characters. Unnamed darker-skinned slots (tan / brown / dark) auto-default to Short (even slot indices) or Buzzcut with Very Dark #111 hair (odd slot indices) instead of Normal — except the fly-half slot (index 2), which auto-defaults to Fade so the playmaker reads as distinct in the squad row.
All game characters and objects are hand-drawn pixel art rendered on a canvas. Sprites use integer coordinates scaled by a factor to keep crisp edges at any size.
The base player is 10 pixels wide by 18 pixels tall, scaled by a factor of 1.8 in-game. Each player is composed of hair, head, jersey, shorts, an ankle-high sock band (defaults to the player's skin so legs read bare; override with socksColor for a colored sock), and boots.
| Part | Size (px) | Colour Source |
|---|---|---|
| Hair | 6 × 3 | Team hair config (dark, brown, blonde, red) |
| Head / Face | 5 × 3 | Skin tone palette |
| Eye | 1 × 1 | #000 |
| Jersey | 8 × 6 | team.colors[0] primary, team.colors[1] accent |
| Shorts | 6 × 2 | team.shortsColor or team.colors[1] |
| Legs | 6 × 2 | Skin tone palette |
| Boots | 6 × 1 | #222 |
Players cycle through 4 frames at 150 ms per frame (~6.6 fps). Arms and legs alternate stride positions.
Teams can have solid, striped, quartered, sash, pinstripes, halves, checkered, or collar jerseys using their primary and secondary colours.
The ball is 8 pixels wide by 5 pixels tall, scaled by 2.2. It has a white body, red side panels, dark outline, and a grey center seam.
#fff, Red panels #cc0000, Outline #555, Seam #999Crowd members are 8 × 9 pixels with animated arms that wave based on match excitement. About 85% wear home team colours.
#1e5f2a, diagonal offset) on buttons, cards, and bar titles — never translucent drop shadowsrgba drop shadows in-game — solid extrusions onlyMatch establishing-shot backdrops (the SKYLINES registry in game.js). Each ships a day and a night variant; the home team picks the style (TEAM_SKYLINE), with day/night chosen per match.
town Low-rise town (default / fallback)
city Mid-rise city skyline
coast Coastal / seaside
grassy-mountains Green mountain valley
metropolis Dense high-rise metropolis
snowy-mountains Snow-capped peaks
european Parisian boulevards (Haussmann)
megalopolis Huge skyline + suburbs + trees
college Brick collegiate town + tower
arid Desert city under a mountain range
asia Tokyo-style skyline + red tower
forest City in forested hills + river
trees Pixel-art forest treeline (no city)
A strip of LED-style sponsor boards runs along the top touchline, in front of the crowd. Every board is a consistent 4:1 rectangle (height = board width / 4); boards tile the view at ~120 px wide in portrait and ~88 px on desktop, so they read identically on any screen. All boards show the same sponsor at once and rotate together in a synchronized vertical hard-roll (LED-ring style). Slots alternate brand → slogan → brand → second slogan; a sponsor with no slogan just shows its wordmark/logo on every slot. A sponsor can also carry a logos array of full-bleed board images that cycle by slot, so a campaign can alternate art across the strip (one entry repeats everywhere). Career-only sponsors (Bank of Newland and Newland Air) appear solely in career/league matches; every other board shows in all modes. Text is Press Start 2P, uppercased; image logos are pixelated in-game to match the art.