War Dungeon — Design Brief

Register

War Dungeon’s visual register is Steampunk + Old-West / saloon — a weird-western / gaslamp-frontier hybrid. The brand commits fully to this register and never hedges toward generic Warhammer-store aesthetics (dark + neon, dramatic angles, “epic” hero compositions). Four operative principles:

1. Simple is the name of the game. Generous whitespace, larger base font size, comfortable vertical rhythm. No information-dense walls.
2. Industrial, not glassy. Every surface looks etched, plated, or pressed — never glossy, glowing, or gradient-lit. Line-only depth.
3. Earthy and atmospheric. Warm browns, dark woods, oxbloods, brass. No cool neutrals, no neon, no Material-3 saturated primaries.
4. Curated, not gridded. Top and mid-level category pages are mini-homepages with editorial content. Only leaf-level categories render as product grids.

Three evolutions

This brief drives three styleguides — SWD1 Frontier, SWD2 Gaslamp, SWD3 Apothecary — each producing its own homepage mockup off the same Build Brief. The evolutions share the palette + typography baseline below; only the named deltas vary.

• Frontier (SWD1) — v1 carry-over palette and type, untouched. Steampunk registers through illustration, etched ornament, and rivet borders. No new colour. The “is the current direction still right when executed properly” benchmark.
• Gaslamp (SWD2) — Frontier base plus brass (#B08D57) and copper (#A35F3A) accent metals on CTAs, dividers, rivets, and section ornaments. Steampunk now also registers chromatically.
• Apothecary (SWD3) — Polarity tilt: more liquourice / cowboy / caput dominance on large surfaces; rodeo reserved for cards, panels, and text-blocks. Body type may shift to IM Fell English or Cormorant Garamond for a textured candlelit feel. Display and CTA stay modesto-condensed. Riskiest evolution; most “interior.”

Palette (baseline v1 carry-over)

• rodeo #C5A688 — primary content background, warm tan
• rodeo--light #D8C3B1 — alt surface for cards and panels
• bronze #F4A479 — warm orange accent
• caput #613F34 — deep brown (caput mortuum); secondary darks, dividers, body text on light surfaces
• sienna #832D15 — oxblood; primary action / CTA / headline accent
• cowboy #2B1B1C — very dark warm; large dark surfaces, footer top half
• liquourice #1b1314 — near-black warm; header chrome, footer chrome, deepest darks
• black #000000, white #FFFFFF, white--dark #EDEDED — utility

Gaslamp adds: brass #B08D57 and copper #A35F3A. Used on CTAs, rivets, dividers, and section ornaments.

Apothecary tilts the polarity: liquourice / cowboy dominate large surfaces; rodeo and rodeo–light are reserved for cards, panels, text-blocks, and raised surfaces.

Typography

• Display / headings / CTAs: modesto-condensed — Adobe Originals condensed serif. Western saloon-poster aesthetic. Carry over from v1.
• Body / paragraph / form: palatino-linotype — classical book serif. Carry over from v1.
• Apothecary evolution may swap body to IM Fell English or Cormorant Garamond for a textured candlelit feel.
• Base font size: larger than the CamCom default (precedent: wardungeon.camcom.dev). The body type should feel readable as editorial prose, not utility ecommerce copy.
• Line heights: 1.5 base, 1.3–1.4 headings, 1.2 CTA.

Section rhythm

• Site max-width: 1440px (global setting; matches all CamCom brands).
• Gutter: 40px (v1 carry-over).
• Radius: 7px baseline (v1 carry-over). Per-mockup variation allowed where it serves the design.
• Comfortable-to-generous vertical rhythm between sections. The “simple” principle.

Surface accents

• Rivets on cards, panels, and section borders — small filled circles at corners and midpoints. The single most distinctive surface ornament.
• Engraved gear / chain section dividers between major content sections.
• Etched borders on hero composition frames, category billboards, and creator cards.
• Filigree bars as inline decoration in headings and pull quotes.

Material character

• Line-only depth. No blur. Every shadow is a hard-edged offset (printer-plate misregistration). Every “lift” is a hairline outline.
• Hairline cross-hatch shading on hover and focus states instead of soft glows.
• Aged paper / parchment texture in section backgrounds at very low opacity — foxing and hairline noise only.
• No gradients, no glow, no glassy reflections.

Density and whitespace

Comfortable to generous. Big vertical gaps between sections. Heroes breathe. Cards have internal padding that does not pack tight. The base font size is deliberately larger than CamCom default.

No mobile simplification. Rivets, gear dividers, and etched ornament stay on mobile. Imagery payload is the price of the look — performance stack (Object Cache Pro, WP Rocket, ShortPixel WebP) carries it.

Imagery

• Product surfaces — on-white catalogue shots. Supplier-provided, consistent, utility.
• Hero, category, lifestyle surfaces — lit dioramas. Painted minis on terrain, dramatic lighting, mood and atmosphere.
• Icons — engraved line-art with Steampunk gear/tool register. Added to the existing CamCom icon guide. Gears, cogs, lanterns, anvils, wrenches as decorative iconography.
• Overall photographic feel: warm-lit, slightly desaturated, earthy. Never cold white-box studio.

Voice

TBC — Lily to propose. Operating intent: Old-West saloon-shopkeeper register — earthy, knowledgeable, atmospheric. Knows the games inside-out, talks to players like equals, never markets at them. Not jokey; not corporate.

Logo

Operator-uploaded to camcom.dev’s media library. The brand has its own wordmark / mark — not the Nerdworks placeholder currently appearing on wardungeon.com.

Header and footer

Header inherits the universal Nerdworks-pattern global header from camcom-v2 — only colour and typography vary per brand. Includes a pre-header announcement bar (rotating campaigns + cross-brand loyalty reminders).

Footer is the cross-brand standard shape: four columns plus a newsletter strip plus a baseline utility strip. Columns: Shop (top-level product categories), Discover (Tools, Learn, Creators, Community), Help (Contact, Shipping, Returns, FAQ, Track Order), Brand & Loyalty (About, Sister Brands cross-redemption, Loyalty programme, Affiliate). Baseline strip carries payment icons, social icons, copyright, policies, and the “A Nerdworks Brand” badge.

Components

Standard: hero, product card, content card, carousel, modal, accordion, tabs, CTA button, testimonial, newsletter form, breadcrumb.

War Dungeon additions: creator card (avatar, name, game tags, content-stream link), how-to / tutorial card (cover image, difficulty, time, CTA), curated content block (the building unit for category mini-homepages — image, heading, body, CTA), category banner / billboard, tool teaser block (sim and builder previews on homepage and landings), loyalty cross-brand strip (sister-brand redemption), painting / UGC showcase tile.

Hero shape: single bold cinematic composition with one clear value proposition + CTA. Not a slick rotating multi-slide carousel — Steampunk fits a single bold composition. Filters on shop archive open in a modal sheet, not a sidebar; sidebars are not used anywhere in the brand.

Interactions

• AJAX add-to-cart (default in CamCom stack).
• Quick-view modal on product cards.
• Subtle scroll-reveal animations — never prominent or showy.
• Hover effects on cards: etched-outline accent + subtle image zoom (no soft glow or drop shadow).

Bans

• Cartoonish or playful
• Pastel
• Clean-Apple-minimal (Helvetica + plenty of white, no ornament)
• Material-3 default (saturated primaries, blob shapes, paper elevation)
• Generic-shopify (centred logo + boring product grid)
• Cool neutrals (grey, slate, cool black)
• Soft drop shadows, glassy reflections, neon glow, glow rings
• Loud animations and entrance effects