RPG Loyalty System — Creative Direction & Aesthetic References
Core Feel
Capture the joy of Neopets, RuneScape, and Pokémon Go. The platform should feel like a world you inhabit, not a system you optimize. The shop page is a location in a town. The profile is a character, not an account. Every surface should reinforce that the player exists inside a place, not on top of a dashboard.
Aesthetic References
UI Frame: Stranger Things Hellfire Club
The app/website looks like a DM’s binder or player scrapbook from the 1980s. Graph paper, hand-drawn maps, pencil sketches, notebook margins with doodles. This is the container that holds everything. Analog warmth, not digital polish.
Content: Final Fantasy + Classic D&D
Inside the binder frame, the visual language draws from Final Fantasy (class iconography, crystal/elemental motifs, level-up fanfare) and classic D&D (character sheets, stat blocks, dungeon maps as navigation elements).
Tonal Precedents
| Reference | What to capture |
|---|---|
| Neopets | A world that feels like a place. Profile as identity. Collecting, customizing, belonging. |
| RuneScape | Persistent progression. The grind feels rewarding because the world responds to it. |
| Pokémon Go | Real-world quests. Getting outside. Social encounters through game mechanics. |
| Final Fantasy | Class fantasy. Level-up satisfaction. Iconic visual language for roles and elements. |
| Classic D&D | Character sheets. Paper-and-pencil aesthetic. The experience of being a player at a table. |
| Stranger Things Hellfire Club | 80s analog texture. Binders, handwritten notes, club identity. Outsider community pride. |
Web Game Lineage
Adventure Quest (2002) & DragonFable (2006)
Both by Artix Entertainment. Browser-based Flash RPGs with the same core loop this system targets: character sheet as identity, persistent progression, daily quests, cosmetic gear, community events. Monetized through optional membership tiers (Guardian/DragonAmulet) that unlocked premium content without breaking the free experience. Direct structural ancestors to this project.
Key Design Principle
The character sheet IS the profile. Class, level, XP bar, inventory of earned items, quest log, event history — all presented as a living character sheet, not an account dashboard. This is the Neopets/RuneScape hook. The profile itself is the game.
Every other loyalty app has a dashboard. This one has a character sheet.
Fantasy Internet — infrastructure as fantasy artifact
Added 2026-04-14 from Panat’s “wizard shopping on eBay” / “Shopify meets RuneScape” framing.
The fantasy treatment isn’t scoped to the identity/profile layer. It extends to the mechanics of the web itself. The site doesn’t contain fantasy objects; the site IS a fantasy place, and the infrastructure of the web is rendered as fantasy infrastructure.
The principle
Search isn’t indexed retrieval — a gremlin ran to fetch your result. Loading isn’t a spinner — a wizard is casting. The cart isn’t session state — a goblin holds your satchel. The error message isn’t from a server — a wizard’s scrying bowl cracked. Every web-platform metaphor has a fantasy counterpart that does the same job, and the site consistently uses the fantasy version.
Visual dialect: 90s–early 2000s web
The existing aesthetic leans 1980s D&D binder (Hellfire Club). The fantasy-internet layer leans a distinct later dialect — the era when fantasy first showed up on the internet:
- Neopets, Habbo Hotel, RuneScape, MapleStory, Club Penguin, Adventure Quest, DragonFable
- Geocities / MySpace / Xanga sincerity — user-generated chaos as aesthetic
- Newgrounds / Homestar Runner / Strong Bad-era wit and charm
- Early Yahoo and Google before they went minimalist — directory structures, character in corporate copy
- Chunky buttons, saturated colors, kitschy gradients, animated GIFs, guestbook-era earnestness
This is the formative web memory of millennials. Using it isn’t retro cosplay — it’s design language a specific cohort is inherently fluent in.
The craft distinction: genuinely magical, not ironic
This is the most important rule and the easiest to violate.
Genuinely magical means the site sincerely inhabits the fantasy. The gremlin isn’t a joke about infrastructure; the site acts as if the gremlin is real. Copy is written from inside the world, not about it. Error states are in-character. Empty states are in-character. Loading copy is in-character. Nothing winks at the user. Nothing says “remember when websites were fun?” — it just is a website that’s fun, in the sincere register Neopets inhabited.
The failure mode: ironic retro cosplay. Pointing at the reference. Meme-fuel kitsch. Every competitor doing “retro internet” right now is doing this. It reads as cute but hollow. It breaks the spell.
Neopets wasn’t winking at you. It believed in Neopia. That is the tonal reference.
What this changes beyond visuals
- Copy and voice: every system message, error state, empty state, loading line, onboarding screen is written from inside the fantasy world by an NPC who lives there. Not a brand-voice guideline applied on top — the voice IS the world’s voice.
- Metaphor system: each web primitive (search, cart, checkout, error, 404, session expired, password reset, saving…) gets a consistent fantasy counterpart. Build the mapping once, apply everywhere.
- Onboarding and affordances: new users are arriving in a place, not creating an account. The signup form is a registration ledger an NPC is helping them fill out.
- The ambient pixel layer (see guild-1bit-aesthetic’s “wizard shopping on eBay” section) is the visual manifestation of this principle. The copy/voice/metaphor layer is the verbal manifestation. They need to match.
Phil Fish “Fez is a place” reference
Same move, different medium. Fez wasn’t a game with retro aesthetics; it was a place that happened to look like a retro game. The world believed in itself. That is the tonal target.
Risk to manage
Twee vs. trustworthy. Commerce requires trust. Whimsy that undermines confidence in “my order will arrive, my card will be charged correctly” kills the business. The fantasy treatment has to coexist with rigor — order confirmations must be unambiguous, money must be handled seriously, the wizard can be in-character but the receipt must be real. Heuristic: fantasy voice on everything the user can afford to smile at; clear plain language on anything they need to trust.