GymBoy Visual Style Guide

assetactive

GymBoy — Visual Style Guide (GBA RPG Aesthetic)

Complete visual identity directive for gymboy.coach. The entire design language is built on the Game Boy Advance RPG pixel art tradition — the "Golden Era" of 2D art. Every screen, component, icon, illustration, animation, and UI element must feel like it belongs in a GBA-era RPG. This is not a skin or a theme; it is the foundational design language for the entire product.

Core Visual Constraints

  • Resolution: All pixel art authored at native GBA-equivalent resolution (240x160 reference frames), scaled up using integer scaling only (4x, 5x, 6x).
  • Interpolation: Nearest Neighbor mandatory — no bilinear, bicubic, or smoothing.
  • Color space: 15-bit RGB constraint. Vibrant, saturated, warm. Roughly 16 colors per palette bank per sprite/component. Over-saturate slightly to match original GBA style.
  • Outlines: Colored outline technique — 1px at native resolution, dark saturated shade of adjacent fill color. Never pure black (#000000).
  • Grid: 8x8 pixel tile grid for world-building, backgrounds, and environmental art. Character sprites at 16x16, 16x32, or 32x32.

Color Palette

| Role | Color Family | Notes | |------|-------------|-------| | Primary brand | Bold red-orange | Energy, action, hero color | | Secondary | Deep teal / ocean blue | Rest, recovery, stat screens | | Accent / XP / Gold | Warm gold-yellow | Achievements, level-ups, highlights | | Health / Success | Lush green | Progress bars, completion states | | Backgrounds | Warm cream, soft tan, pale sky blue | Never pure white — slightly tinted and warm | | Text and outlines | Dark navy, deep maroon, dark forest | Context-dependent, matched to adjacent fill | | Error / Warning | Muted red, amber | Alert states, still within the palette | | Skin tones | Full range, 4-5 tones min | Avatar palette swaps, inclusive |

GymBoy-Specific Design Mapping

  • User Avatar → Hero Sprite: GBA-style sprite sheet with idle, walking, and action poses. Palette swapping for skin, outfit, and hair variations. Classic "breathing bounce" idle animation.
  • Workouts → Quests: Quest cards styled as GBA RPG menu items. Active workouts as quest log with GBA menu cursor checkboxes. Quest Complete animation on workout finish.
  • Exercises → Abilities / Skills: 16x16 icon sprites per exercise. GBA-style tabbed menus by type (Strength, Cardio, Flexibility).
  • Progress → RPG Stats: Character stat sheet layout. HP/MP-style gradient progress bars for Strength, Endurance, Flexibility, Consistency.
  • Achievements → Loot / Items: 16x16 and 32x32 inventory item sprites in a GBA RPG item grid. Locked achievements as silhouettes.
  • Navigation → Overworld Map: Pixel art landscape map with location nodes for Dashboard, Workouts, Progress, Profile, Settings. Avatar walks or hops between locations.
  • Onboarding → Tutorial Intro: NPC coach delivers text in classic GBA dialogue box with letter-by-letter typewriter reveal and portrait sprite.

Typography

Pixel fonts only throughout. Recommended: Silver, ChevyRay collection, or Press Start 2P for headers. No anti-aliasing. image-rendering: pixelated applied globally. Dialogue text uses letter-by-letter typewriter reveal.

Animation Principles

GBA-era philosophy: fewer frames, more impact. Idle: 2-4 frames. Action: keyframe impact with exaggerated squash-and-stretch (study Fire Emblem critical hits). UI transitions: hard cuts or 2-frame slides. Particle effects as 2x2 or 4x4 pixel squares.

HD-2D Enhancement Option

For premium/cinematic sections: keep GBA-fidelity sprites, add dynamic lighting with soft shadows and bloom, apply tilt-shift depth-of-field blur. Reference: Octopath Traveler, Sea of Stars.

Technical Requirements

  • Asset creation in Aseprite, exported as PNG with transparency
  • Master palette file committed to repo (Lospec GBA/JRPG reference)
  • CSS: image-rendering: pixelated; image-rendering: crisp-edges; on all pixel art
  • Pixel fonts: font-smooth: never; -webkit-font-smoothing: none;
  • Game interactions via Canvas API, PixiJS, or Phaser if needed (lightweight)

Non-Negotiable Rules

  1. All pixel art uses Nearest Neighbor scaling — no exceptions
  2. No pure black outlines — use dark contextual colors
  3. All assets authored at native low resolution, scaled by integer factors
  4. One master color palette file in repo — all assets pull from it
  5. Pixel fonts only — no anti-aliased system fonts
  6. Everything snaps to 8px base grid at native resolution
  7. Animations are short, punchy, keyframe-driven — no floaty CSS transitions
  8. Mood: warm, bright, energetic, optimistic — like stepping into a GBA RPG on a sunny day
  9. Performance non-negotiable — assets are tiny, site must be fast
  10. Every screen must feel like it belongs in the same GBA cartridge

Reference Games

Golden Sun (world maps, environmental art), Fire Emblem GBA (UI menus, portraits, animations), Zelda: Minish Cap (clean outlines, bright palette), Pokémon RSE (overworld navigation, palette swapping), FFTA (isometric tiles, job UI), Stardew Valley (modern GBA-style appeal), Sea of Stars (HD-2D lighting on pixel art).

Provenance: Extracted from npp-extracted/new 60@2026-03-18_020941 — GymBoy Visual Style Guide authored 2026-03-18. Full GBA RPG aesthetic directive covering resolution constraints, color palette, design mapping, typography, animation, HD-2D enhancement, technical pipeline, and asset checklist.