Page intent
A War Dungeon top or mid-level category page is a curated editorial mini-homepage, not a product grid. It positions the category in the brand voice, surfaces curated discovery routes within the category, demonstrates depth of expertise, and converts the visitor into either a leaf-category browse or a featured-product cart. The brand explicitly rejects the “endless product grid” pattern for top and mid-level categories — only leaf categories render as grids (handled by the Shop Archive brief). This page is for the visitor who has narrowed intent to a category but is still browsing — they need editorial guidance, not a wall of SKUs.
Subject category (for the mockup)
Use Space Marines (under Warhammer → Warhammer 40,000 → Space Marines) as the subject mid-level category. Justification: representative volume (~80–120 SKUs across Combat Patrols / Single units / Books / Paints sub-categories), strong recognisable IP, broad audience span (newcomers through tournament players), straightforward sub-category breakdown that demonstrates the “mini-homepage of mini-homepages” hierarchy.
Mandatory structure (top to bottom)
- Pre-header announcement bar — same brand chrome as homepage / product page. Reuses the announcement-bar block.
- Global header — same brand chrome. Reuses the site-header block.
- Breadcrumbs — Home / Warhammer / Warhammer 40,000 / Space Marines.
- Category hero — single bold composition with category-specific photography (a curated diorama or painted display of representative miniatures from this category). Eyebrow (“M41 · The Imperium of Mankind”), display headline (the category name treated as brand statement — “Space Marines” — not “Browse Space Marines”), one-line positioning lede in saloon voice, two CTAs: “Shop Combat Patrols” (primary — sienna, leads to the strongest entry-point sub-category leaf) and “Build Your Marines Army” (secondary — links to Army Builder filtered to this category). NO rotating carousel.
- Category positioning paragraph — a single editorial paragraph in palatino body type, large scale (24–28px), one or two sentences explaining the category in the brand’s voice. Sits below the hero, no chrome around it, breathing space above and below. The brand commits to the category in writing here — newcomers learn what Space Marines are; tournament players read the brand respecting their depth.
- Sub-category billboards — 4 to 6 cards in a 2×3 or 3×2 grid, each a sub-category mini-pitch: Combat Patrols / Single units (Captains, Tactical Squads, Terminators…) / Codexes & Datasheets / Hobby Supplies (paints, tools specific to Space Marines schemes) / Cross-system content (Chaos Marines, optional — separate category). Each card has lit-diorama imagery dominant, sub-category name in modesto-condensed, 1-line positioning, “Browse” CTA. These ARE clickable to the leaf category surfaces.
- Featured products — 4 curated picks from this category in a row: cover image (on-white catalogue shot), title, star rating, price, loyalty roundel, “Quick view” CTA. Mixed across sub-categories (one Combat Patrol, one single unit kit, one codex, one paint set). NOT auto-populated by “most popular” — these are operator-curated picks that reflect the brand’s positioning on this category.
- “Start your Space Marines army” — curated starter path. 3-step graphic flow: (1) Choose your chapter / (2) Build your starter force / (3) Paint and field. Each step has a small line-art icon + 1-sentence guidance + link to the relevant resource (chapter guide / Army Builder / how-to guide). This is conversion-focused content: the visitor who is new to the category has a clear next move.
- How-To Guides for this category — 3 cards: cover image, difficulty badge, read/watch time, CTA. Each guide is category-relevant (e.g. “Edge highlighting Space Marines power armour”, “Magnetising weapon options”, “Painting Salamanders green-on-black”). Sourced from posts tagged with this category.
- Painting Showcase for this category — 6-tile masonry of customer painted miniatures from THIS category. Same masonry pattern as homepage Painting Showcase, but filtered to category tag. Includes “Submit your Space Marines painting” CTA.
- Cross-brand loyalty reminder — full-width band: “Earn here. Redeem anywhere.” Compact treatment — single row, not the full homepage panel.
- Related categories — 4 small cards for adjacent categories: Chaos Space Marines, Imperial Guard, Age of Sigmar Stormcast Eternals (a parallel “hero faction” in a different system), Painting & Hobby Supplies. Each card is a small image + name + brief positioning + CTA. Drives lateral discovery.
- Newsletter signup — single-row strip, “Join the Garrison”. Reuses the newsletter-signup block.
- Global footer — same brand chrome. Reuses the site-footer block.
Excluded from the category mini-homepage (belongs elsewhere)
- Endless product grid — leaf categories own this surface (see Shop Archive brief).
- Brand statement (hero “this is War Dungeon”) — homepage owns this; the category page assumes the visitor knows the brand.
- Choose Your Game grid — homepage owns this; the category page is already inside a game system.
- Tools landing teasers (Army Builder hero, Battle Simulator) — those have their own landing pages.
- Loyalty programme rules / cross-brand explainer — Loyalty programme page owns the detail.
- Detailed filter sidebar / sort controls — leaf category (Shop Archive) owns this.
Conversion principles
- The hero leads to a leaf category, not a SKU. Primary CTA goes to the strongest sub-category leaf (Combat Patrols for Space Marines). The visitor is still browsing intent; we route them into a narrower browse, not into a single product.
- Sub-category billboards are the focal discovery mechanism. They get the most visual weight after the hero. Each is a mini-positioning statement.
- Featured products earn their slot. Operator-curated (or merchandised), not auto-populated. The four picks tell the category’s story.
- Starter path converts newcomers. “Start your Space Marines army” is the only multi-step graphic content on the page. It’s load-bearing — newcomers leave with a clear next move.
- Content surfaces (how-tos, painting showcase) build trust. They demonstrate depth — the brand knows the category, not just sells it.
- Lateral discovery is offered, not pushed. Related categories sit at the bottom of the page; they’re a graceful exit for the visitor who has decided this category isn’t right.
Voice notes
Same Old-West saloon-shopkeeper register as the homepage and product page. The category positioning paragraph in particular needs to read as the brand committing to the category in writing — not generic ecommerce copy. Example fits: “Ten thousand years of war, every chapter you can name, and a hundred more you can’t. Marines are the front line of the Imperium — and the front line of most painters’ starting collections.” “From Salamanders to Raven Guard, from Combat Patrol to two-thousand-point army — we stock what you need, and we know how to paint it.” Lily owns the final.
Render direction
Locked methodology: Maximalist Industrial at the Frontier styleguide (SWD1). See canonical references MWD5 (homepage) and MWD9 (product page) for methodology. The brand’s 35-block reuse catalogue auto-supplies methodology-consistent chrome (announcement-bar, site-header, site-footer, gear-divider, product-card, etc.) — reuse where structural purpose matches. Author NEW for the category-specific blocks (category-hero, sub-category-billboard, starter-path, related-category-card) following the same methodology: dark cowboy inverted panels with bronze gear-pattern at 10%, 4px ridge bronze on cards, stamped brass roundels for trust signals, engraved gear divider strips between sections.
Desktop composition (locked brand rule, 2026-06-07)
War Dungeon is desktop-first. Mockups render at 1440px as the primary composition; mobile is graceful collapse via @media breakpoints, not the starting point. Mobile-first vertical stacking on a 1440px canvas wastes the desktop surface and reads as a long-scrolling mobile page rather than a confident brand surface.
Desktop composition rules
- Hero compositions are side-by-side image + content at desktop. Never image-above-content at 1440px. The diorama / lit imagery sits on one side (the visual half) and the eyebrow + headline + lede + CTA(s) stack on the other (the content half). Aspect of the image side should be roughly 1:1 or 4:5; content side carries comfortable padding and breathing room. Mobile (@max-width: 980px) collapses to stacked image-then-content.
- Pair complementary sections side-by-side at desktop where neither side competes for attention. For this category mini-homepage, candidate pairings:
- Starter path + How-To Guides — both are content trust signals; one is action-oriented (build your army), one is craft-oriented (learn to paint). They share a row at desktop, stacking on mobile. Section heads share the row.
- Painting Showcase masonry + Loyalty strip — UGC and reward, both supporting trust without competing. At desktop the masonry takes ~⅔ of the row, the loyalty strip takes ~⅓ stacked vertically inside its column. Mobile collapses to full-width stacked.
- Related categories + Newsletter signup — the two “graceful exit” sections at the foot. Side-by-side at desktop, stacked on mobile.
- Sections that own the page get full-width bands. Category-hero, sub-category-billboards (the 3×2 grid), featured-products. These are focal — they don’t pair off.
- Use the 1440px canvas deliberately. The Maximalist Industrial methodology already fills the surface with ornament density — adding vertical-band stacking on top of that wastes the canvas. Desktop reads should feel filled, not scrolled.
- Cards inside sections stay in 3-up or 4-up grids — that’s the right horizontal density at the card level. The composition rule is about which sections pair up at the page level, not card density inside a section.
- Vertical padding stays generous at desktop (60–120px between section pairs). The breathing room is part of the brand. The rule is about horizontal pairing, not about cramming sections together.
- Mobile collapse breakpoints are typically at 980px (most layouts collapse), 880px (deeper collapses), 640px (cards single-column). Below 480px the brand ornament stays (no mobile simplification) but the composition is fully stacked.
Conversion peak preserved: the clean-zone discipline carries through paired sections — if the category-hero CTA is the primary conversion peak, no other paired section’s chrome competes with it for eye-flow. Pair sections that are secondary to the hero’s call.
Technical constraints
- Page max-width 1440px.
- Base font size 20px (lived v1 baseline).
- No mobile simplification of brand ornament.
- Performance: hero diorama is the single largest image; sub-category billboard imagery uses responsive sizes with lazy-load.
- Featured-product Quick view triggers AJAX modal (no page reload).
- Sub-category billboards are clickable to their leaf-category surfaces — single-click navigation, no intermediate states.