Theme · Game · Intermediate
Game Website
Game portal = a full-bleed cinematic hero, a dark fantasy palette, and tabbed content under a fixed navbar.
Tips
Keep the hero to one logotype and two CTAs. Put the price ladder below the fold, not beside the art.
See also
Build a cinematic dark-fantasy game portal.
STYLE
- Near-black base (#05070d) with deep blue-to-ember gradients
- Aged-gold accent (#e3bc7a) on CTAs, hairlines, prices, active states
- Serif display logotype, uppercase letter-spaced kickers, 2px corner radius
- Frosted panels at 4-8% white over dark, inset 1px hairline borders
- Ice blue (#6fb6ff) for secondary data only; never for primary actions
LAYOUT
- Utility bar: diamond mark, nav (Games / Shop / News / Community), "Sign in" + "Sign up" gold button
- Full-bleed hero: layered ridge silhouettes, ember sun glow, vignette, centered logotype stack
- World tab strip under the hero, first tab active with a gold underline
- Edition row: three tiers, middle one highlighted with a "Most popular" ribbon
- News row: three cards with gradient thumbs, dates, headlines
- Class rail: six pill chips, each with a colored dot
COMPONENTS
- Kicker "New expansion · Chapter III", logotype "EMBERFALL", spaced subtitle "Chronicles of Ash", one-line tagline
- "Buy now" (solid gold) and "Play the trial" (ghost gold) buttons
- Three edition cards: Standard $39 / Deluxe $59 / Collector's $89, two bullet perks and a buy button each
- Three news cards: patch notes, season launch, developer interview
- Six class chips with colored dots: Warden, Pyromancer, Shadowblade, Templar, Beastmaster, Runeseer
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui