Gymboy Gba Rpg Visual Style Guide

assetactive

Gymboy Gba Rpg Visual Style Guide

Source: gymboy-gba-rpg-visual-style-guide.md (ingested 2026-03-28)

GymBoy Visual Style Guide — GBA RPG Aesthetic

Complete Overhaul Directive for gymboy.coach

Project Context

GymBoy is a fitness coaching app/site at gymboy.coach. The entire visual identity must be rebuilt from the ground up using the Game Boy Advance RPG pixel art style — 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. This is the foundational design language for the entire product.

1. Core Visual Constraints — Follow These Exactly

Resolution and Scaling

  • All pixel art assets must be authored at native GBA-equivalent resolution. Character sprites, icons, and tile assets should be created on small canvases (think 240x160 reference frames) and scaled up using integer scaling only.
  • Nearest Neighbor interpolation is mandatory. Never use bilinear, bicubic, or any smoothing algorithm. Every pixel must remain a crisp, hard-edged square when scaled.
  • Standard upscale factors: 4x, 5x, or 6x depending on the target display context.

Color Palette

  • Use the 15-bit RGB color space as a guiding constraint. This means colors should feel like they could exist on GBA hardware — vibrant, saturated, and warm.
  • Limit each sprite or UI component to roughly 16 colors per palette bank. This forces intentional color choices and keeps the aesthetic authentic.
  • Over-saturate slightly. The original GBA had no backlight, so artists pushed brightness and saturation. We keep that because it creates the signature pop and energy that fits a fitness brand perfectly.
  • Never use pure black (#000000) for outlines. Use very dark versions of the local color instead. A dark navy for blue elements, a deep burgundy for red elements, a dark forest green for green elements. This makes everything feel softer and more polished.
  • Reference palettes: Search Lospec.com for "GBA" and "JRPG" palettes. Build a master palette file for the project and commit it to the repo. Every contributor must pull colors from this file.

Grid and Tile System

  • All world-building, background, and environmental art must be constructed on an 8x8 pixel tile grid.
  • Character sprites should occupy 16x16, 16x32, or 32x32 blocks depending on the character's role and importance.
  • UI elements (buttons, cards, panels, inventory slots) should snap to the 8px grid at their native resolution before scaling.

Outlines

  • Use the colored outline technique, not flat black outlines. The outline color should be a darker, more saturated shade of the adjacent fill color.
  • Outlines should be 1 pixel wide at native resolution.
  • This applies to all sprites, icons, UI borders, and interactive elements.

2. GymBoy-Specific Design Mapping

Here is how every part of the gymboy.coach experience maps to GBA RPG conventions.

The User Avatar — The Hero Sprite

  • Every user gets a pixel art avatar rendered as a GBA-style hero sprite.
  • Create a base sprite sheet with idle, walking, and action poses.
  • Use palette swapping to generate variations. One base body type can produce dozens of unique-looking avatars just by swapping color palettes — skin tones, outfit colors, hair colors.
  • Idle animation: Use the classic GBA "breathing bounce" — a subtle 2-frame vertical shift that makes the character feel alive without requiring complex animation.
  • The avatar should appear on the dashboard, profile page, workout summary screens, and achievement popups.

Workouts as Quests

  • Each workout or training plan is presented as a Quest in the UI.
  • Quest cards should look like GBA RPG menu items — a small icon sprite on the left, pixelated text name, and a brief stat summary.
  • Active workouts display as a quest log with checkboxes styled as GBA menu cursors (the classic bouncing arrow or hand pointer).
  • Completing a workout triggers a Quest Complete animation — screen flash, XP bar fill, fanfare-style visual feedback. Build this as a reusable component.

Exercises as Abilities / Skills

  • Individual exercises within a workout are displayed as Abilities in a skill menu.
  • Each exercise gets a small 16x16 icon sprite — a dumbbell, a barbell, a running figure, a yoga pose, etc.
  • These icons must be pixel-perfect at native resolution and scaled up with Nearest Neighbor.
  • Group exercises by type using GBA-style tabbed menus (Strength, Cardio, Flexibility, etc.) with colored tab indicators.

Progress and Stats as RPG Stats

  • The user's fitness progress is displayed as an RPG character stat sheet.
  • Stats like Strength, Endurance, Flexibility, and Consistency are shown as leveling attributes with progress bars styled like GBA HP/MP bars.
  • Use the classic GBA gradient fill for progress bars — a bright highlight color on top fading to a deeper shade on the bottom, all within the bar's 2-3 pixel height at native resolution.
  • Level-ups trigger a visual celebration — sprite flash, particle burst, stat number increment animation.

Achievements as Loot / Items

  • All achievements, badges, and milestones are rendered as GBA-style inventory items.
  • Each achievement gets a 16x16 or 32x32 item sprite — a trophy, a medal, a potion, a rare weapon, a golden dumbbell, etc.
  • Display these in an inventory grid UI that looks exactly like a GBA RPG item menu.
  • Locked achievements appear as darkened/silhouetted versions of the sprite.

Navigation as an Overworld Map

  • The main navigation of the site or app should feel like navigating a GBA overworld map.
  • Key sections (Dashboard, Workouts, Progress, Profile, Settings) are represented as locations on a pixel art map.
  • The user's avatar sprite walks between locations when navigating. If full walking animation is too heavy for web, use a simple hop or teleport animation between nodes.
  • The map background should be a lush, detailed, painterly pixel art landscape — think Golden Sun's world map. Rolling green hills, a small town, a mountain in the distance, a gym building as the central hub.

Onboarding as a Tutorial / Intro Sequence

  • New user onboarding should feel like the opening sequence of a GBA RPG.
  • A pixel art NPC (a coach character, a gym sage, a training partner) delivers onboarding text in a classic GBA text box — bordered panel at the bottom of the screen, text appearing letter by letter with a soft click sound.
  • The NPC has a portrait sprite (a larger, more detailed bust image) displayed alongside the text box, exactly like Fire Emblem or Golden Sun dialogue.
  • Onboarding steps are presented as the first quest in the user's journey.

Notifications and Feedback

  • Toast notifications and feedback messages appear in GBA-style dialogue boxes.
  • Error states use a red-tinted panel. Success states use a green-tinted panel. Info states use a blue-tinted panel. All with the colored outline rule applied.
  • Button hover states should trigger a subtle 1-pixel shift or a brightness increase on the button sprite, mimicking GBA menu cursor selection.

3. Typography

  • Use a pixel font throughout the entire application. No system fonts. No sans-serif fallbacks visible to the user.
  • Recommended fonts: Silver, ChevyRay's pixel font collection, or Press Start 2P for headers.
  • Body text must remain legible at small sizes. Test at native GBA resolution before scaling.
  • Text rendering must use no anti-aliasing. Pixel fonts must be rendered crisply at integer scale factors. If using CSS, apply image-rendering: pixelated or equivalent, and ensure font sizes align to the scaling grid.
  • Dialogue text (onboarding, tooltips, descriptions) should use the letter-by-letter typewriter reveal animation as a standard pattern.

4. Animation Principles

  • Follow GBA-era animation philosophy: fewer frames, more impact.
  • Idle animations: 2-4 frames. Subtle breathing, blinking, or shifting weight.
  • Action animations (completing a set, finishing a workout, earning an achievement): Focus on keyframe impact. A few frames with exaggerated squash-and-stretch and motion blur are better than 20 frames of smooth but lifeless movement. Study Fire Emblem critical hit animations for reference.
  • UI transitions: Use hard cuts or 2-frame slides. No CSS ease-in-out curves. Movement should feel snappy and digital, not smooth and organic.
  • Particle effects for celebrations (confetti, sparkles, XP numbers floating up) should be pixel-based — small 2x2 or 4x4 pixel squares, not smooth circles.

5. Background and Environmental Art

  • All background art should be painterly and detailed in the GBA tradition. This means rich environmental scenes with visible pixel texture, not flat solid colors.
  • Backgrounds are built from 8x8 tiles but should feel organic and hand-crafted, not repetitive.
  • Use parallax scrolling where applicable (scrolling pages, hero sections) to create depth. At minimum two layers — a foreground element layer and a background sky/landscape layer moving at different speeds.
  • Color temperature: Lean warm. Greens should be lush and golden-tinged. Blues should be bright and clear. The overall mood should feel like a sunny GBA overworld — optimistic, energetic, inviting.

6. The HD-2D Option (Modern Retro Enhancement)

For sections of the site that need to feel premium or cinematic (landing page hero, workout completion celebration, promotional pages), apply the HD-2D treatment:

  • Keep all sprites and pixel art at GBA fidelity.
  • Place them in a scene with dynamic lighting — sprites cast soft shadows, light sources create bloom and glow effects.
  • Apply tilt-shift blur — the center of the scene stays sharp, the top and bottom edges get a subtle depth-of-field blur.
  • This can be achieved with CSS filters, WebGL shaders, or canvas-based rendering depending on the tech stack.
  • Reference: Octopath Traveler, Sea of Stars.

7. Technical Implementation Requirements

Asset Pipeline

| Step | Tool | Notes | |---|---|---| | Sprite and icon creation | Aseprite | Export as PNG with transparency. No compression artifacts. | | Palette management | Lospec palette files or Aseprite palette format | One master palette committed to the repo. All assets reference it. | | Animation export | Aseprite sprite sheet export | Export as horizontal strip or JSON+PNG atlas. | | Upscaling for web | CSS image-rendering: pixelated or image-rendering: crisp-edges | Applied globally to all pixel art img elements and canvas contexts. | | Font rendering | Bitmap font or @font-face pixel font with no anti-aliasing | Test at every supported viewport size. | | Game-like interactions | Canvas API, PixiJS, or Phaser (if needed for map/avatar movement) | Keep it lightweight. These assets are tiny — performance should be flawless on any device. |

CSS / Rendering Rules (Apply Globally)

/* Apply to all pixel art images, canvases, and sprite containers */
.pixel-art {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

/* Pixel fonts must not be smoothed */
.pixel-text {
  font-smooth: never;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  text-rendering: optimizeSpeed;
}

Performance Note

GBA-style assets are extraordinarily lightweight. A full sprite sheet is often under 50KB. The entire visual asset library for this project should be trivially small compared to modern web assets. There is no excuse for performance issues. The site should load fast and run at 60fps on any device, including low-end phones.

8. Color Palette Starter Reference

Build the GymBoy master palette around these color families. Exact hex values should be finalized in Aseprite and committed as a palette file.

| Role | Color Family | Notes | |---|---|---| | Primary brand | Bold red-orange | Energy, action, fitness intensity. The hero color. | | Secondary | Deep teal or ocean blue | Rest, recovery, stat screens, calm UI states. | | Accent / XP / Gold | Warm gold-yellow | Achievements, level-ups, highlights, important callouts. | | Health / Success | Lush green | Progress bars, completion states, positive feedback. | | Backgrounds | Warm cream, soft tan, pale sky blue | Never pure white backgrounds. Slightly tinted and warm. | | Text and outlines | Dark navy, deep maroon, dark forest | Context-dependent. Match outline darkness to adjacent fill hue. | | Error / Warning | Muted red, amber | Alert states. Still pixel-styled, still within the palette. | | Skin tones | Full range, 4-5 tones minimum | For avatar palette swaps. Must be inclusive and natural-looking within the GBA color space. |

9. Asset Checklist — What Needs to Be Created

This is the minimum set of pixel art assets required for the overhaul.

  • [ ] Hero avatar base sprite sheet — Idle (2-4 frames), Walk cycle (4 frames per direction), Action/Celebrate pose (3-4 frames). At least 3 body type variants.
  • [ ] Palette swap sets — Minimum 10 skin tone palettes, 10 outfit color palettes, 10 hair color palettes.
  • [ ] Coach/NPC sprite — For onboarding and tips. Portrait bust (48x48 or 64x64 native) and small overworld sprite (16x32).
  • [ ] Exercise icon set — 16x16 native. At least 30 icons covering major exercise categories (push, pull, squat, hinge, carry, run, stretch, etc.).
  • [ ] Achievement/item icon set — 16x16 and 32x32 native. At least 20 unique achievement sprites.
  • [ ] UI panel/window chrome — GBA-style bordered panels for cards, modals, tooltips, dialogue boxes. Built as 9-slice tileable borders.
  • [ ] Button sprites — Normal, hover, pressed, disabled states. Multiple color variants.
  • [ ] Progress bar sprites — HP/MP bar style. Multiple colors for different stat types.
  • [ ] Menu cursor — The bouncing arrow or hand pointer. 2-frame animation.
  • [ ] Overworld map — Full illustrated pixel art map for main navigation. At least 5 location nodes.
  • [ ] Background tiles — Gym interior, outdoor training ground, rest area. Each built from 8x8 tiles.
  • [ ] Particle effects — Sparkle, confetti, XP number popup, level-up flash. Small sprite sheets.
  • [ ] Logo — GymBoy wordmark rendered in pixel art style. Must work at small sizes and large hero placement.
  • [ ] Favicon — 16x16 native pixel art favicon.
  • [ ] Open Graph / social preview image — A "Character Select" style composition for link previews.

10. Reference Games — Study These

| Game | What to Study | |---|---| | Golden Sun | World map detail, pre-rendered-to-sprite technique, lush environmental art, magic effects | | Fire Emblem (GBA entries) | UI menu design, character portraits, critical hit animation impact, stat screen layout | | The Legend of Zelda: The Minish Cap | Clean outlines, bright primary palette, cozy and inviting world feel, rounded and friendly design language | | Pokémon Ruby/Sapphire/Emerald | Overworld navigation, sprite palette swapping for NPC variety, battle UI layout | | Final Fantasy Tactics Advance | Isometric tile grid (if any section needs that angle), job/class system UI | | Stardew Valley (modern reference) | How GBA-style art translates to a modern indie product with mass appeal | | Sea of Stars (modern reference) | HD-2D lighting on pixel art, how to make retro art feel premium |

11. Summary of Non-Negotiable Rules

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

This document is the single source of truth for the GymBoy visual overhaul. Every design decision, every asset created, every line of CSS must be checked against these rules. If something does not feel like it could have shipped on a Game Boy Advance in 2003, it does not ship in GymBoy.