Repository navigation
Graphics UI Style Guide
This style guide outlines the visual and audio standards for the game user interface. All UI assets adhere to a pixel art aesthetic based on a 64x64 grid unit to ensure visual consistency, proper scaling, and an immersive user experience across all game screens.
The interface color palette is derived from the Desert Shores environment palette, designed in collaboration with the map team. This warm, natural palette balances readability with thematic consistency.
- Sands & Stones (#F3E6C6 to #594733): Used for primary panel backgrounds, terrain frames, and container fills.
- Rocks & Earth (#8E6F54 to #404B34): Applied to heavy borders, structural frames, and grounded UI elements.
- Accents & Details (#D47A3A, #E9C46A, #A3C9C6, #9079AD): Reserved for interactive elements, highlights, item badges, and call-to-action buttons.
- Shadows & Depth (#2F241C to #0D0F12): Utilized for outlines, drop shadows, and high-contrast text backing.
All background containers and text boxes should be constructed using the standardized UI text box classes. Refer to the project wiki for implementation details and code examples: Text Boxes Documentation. Parchment & Scroll Framing: For narrative dialog, main menus, and pop-up windows, use the scroll framing template (Not finalised)
To maintain crisp visual alignment in pixel art rendering, the UI uses Pixeloid Sans. Ensure text is rendered without anti-aliasing artifacts and scaled in integer multiples.
- Primary Font: Pixeloid Sans (dafont.com)
- Font Scaling & Usage: Use uppercase pixel fonts for button labels and section titles; use regular pixel sans for descriptive text.
Buttons follow a carved wooden plank design with light sand/stone top borders and dark grounding outlines. All interactive buttons should provide distinct visual feedback for hover and pressed states.
- Primary Action Buttons: Wide wooden signs for main navigation (Play, Settings, Exit, Continue, Minigames).
- Icon & Utility Buttons: Square buttons with standardized icons (Home, Audio, Settings, Help, Heart, Close).
- State Variations: Text highlights transition from warm gold to soft yellow/white upon hover/focus.
In-game panels share one look: dark teal rounded boxes with a darker outline, white pixel text, and a brown border to mark the selected or highlighted element. Hotbar slots, the backpack, the item dictionary, the shop and the arrow wheel all reuse this box style so they read as one system. See Player HUD for how each is built.
The health bar is a wooden plank with a laurel-wreath player portrait and a row of red hearts (a lost heart shows as an empty outline). The gold counter sits below it: pixel-font amount followed by the gold coin.
Eight rounded slots along the bottom of the screen. The selected slot has a brown border; stackable items show a white x<count> label in the corner.
The full inventory grid, with an Item Details panel beside it for the selected item.
Three arrow icons in rounded boxes (standard, ice, fire). The tile being pointed at has the brown highlight border.
A grid of item slots on a dark teal panel. Undiscovered items show a ?; clicking a discovered item opens its details page.
A centred dark panel with one row per item (icon, name, quantity, price, Buy button) and a Close button at the bottom.
The Dock/taskbar icon: a pixel-art archer on a rounded-square background.
Audio elements enhance gameplay feedback and reinforce the desert atmosphere.
- Background Music (BGM): Ambient desert melodies featuring warm acoustics and light percussion. BGM loops seamlessly in the background without overwhelming UI interaction sounds.
- UI Sound Effects (SFX): Tactile wooden click sounds for button presses, subtle paper/scroll rustles when toggling panels, and distinct chime cues for successful actions.
Ensure UI SFX sits cleanly in the mid-high frequency range above BGM levels to maintain clear player feedback.