Design Philosophy: Gothic Dark
The brief for VvW's visual design was simple: gothic, readable, fast. Gothic dark fantasy is the genre; readability is non-negotiable for a game you play in short sessions; and fast means no 2MB image headers slowing down first load.
We made an early decision to go text-based with rich CSS rather than pixel art sprites. This choice was practical and deliberate. Text scales to any screen without blurring. CSS animations cost nothing compared to sprite sheets. And modern CSS is genuinely expressive — the entire VvW interface is built on CSS custom properties, no JavaScript required for theming.
Color System & CSS Variables
The entire color palette lives in one file: static/css/variables.css. Every component references these variables — nothing is hardcoded. This means a complete theme swap requires changing ~30 lines.
--color-surface: #111118; /* Card surfaces */
--color-border: #1e1e28; /* Subtle borders */
--color-gold: #c8a84b; /* The VvW gold — headings, accents */
--color-text: #e8e6e0; /* Primary text */
--color-text-muted: #9a9898; /* Secondary text */
--color-text-faint: #5c5c6e; /* Labels, metadata */
--color-danger: #e85d5d; /* Errors, warnings */
Dark-only: we deliberately chose not to implement a light mode. Browser MMO players overwhelmingly play in the evening or at night. A light theme would fight the gothic aesthetic. One well-executed dark theme beats two mediocre ones.
Typography: Cinzel + Crimson Pro
Headers use Cinzel — a roman-inspired display font with sharp serifs that reads as "ancient and authoritative." At small sizes with letter-spacing of 0.1em, it becomes the VvW brand voice. Game names, section headers, NPC names, ability names — all Cinzel.
Body text uses Crimson Pro — a humanist serif that's warm and readable at 16px. For a game with significant lore text and item descriptions, a body font that doesn't cause eye strain matters. Crimson Pro's italic variant is particularly good for in-game quotes and dialogue.
Rarity Color System
Item rarity follows a recognizable convention borrowed from decades of RPG tradition, with our own color values tuned for the dark background:
Legendary items use the VvW gold — the same gold as the site's accent color. This creates a visual through-line: the most valuable things in the game share the brand's most prominent color. Legendary hero cards pulse with a gold glow animation (CSS keyframes, no JavaScript).
The Emoji Icon Library
One of our best low-cost decisions: using Unicode emoji as icons throughout the interface. No icon font to load, no SVG sprite sheet to maintain. for attack, for defense, for HP, for ability power, for gold.
The downside is platform rendering inconsistency — emoji look slightly different on Windows vs Mac vs Android. We accept this tradeoff. The zero-bundle-cost benefit vastly outweighs minor rendering differences for a browser RPG audience.
Component Library Overview
Every UI element comes from a shared component library in static/css/components/:
| Component | Usage |
|---|---|
| buttons.css | Primary, ghost, danger button variants with hover states |
| cards.css | Art cards for blog, stat cards for character page, item cards |
| badges.css | Category pills, rarity badges, status indicators |
| layout.css | Sidebar, game grid, responsive breakpoints, hamburger mobile menu |
Future UI Plans
Several UI improvements are planned for the next development cycle:
- Animated combat log — real-time battle results with damage numbers fading in/out using CSS animations, no JavaScript framework needed
- Real-time notification bell — already scaffolded, polling /api/v1/notifications/unread-count every 30 seconds
- WebSocket migration — replacing polling with Socket.IO for chat, live leaderboard updates, and clan war status
- Accessibility pass — full keyboard navigation audit, ARIA labels on all interactive elements, contrast ratio check against WCAG 2.1 AA
Every UI decision asks: "Does this make the game easier to understand or the world easier to inhabit?" Beauty for its own sake ships last. Clarity ships first.
Experience the Design
The best way to evaluate VvW's UI is to play it. Create a free account and see the gothic dark interface in action.
Play Free →