← War Dungeon

War Dungeon — Form Field Reference Build Brief

BBWD30 Build Brief War Dungeon

Page intent

The War Dungeon Form-Field Reference page is a developer reference document, not a real visitor surface. It shows how every standard form input type renders with the brand’s typography, spacing, ridge-bronze borders, stamped-input-shadow, and focus / hover / error / disabled states. The audience is the Phase-2 developer wiring real forms (contact form, account forms, checkout fields, newsletter signup, etc.) — so they know what each input looks like in every state before they write a single template. This brief produces a no-harvest mockup (per the locked Mission Control decision from journal 721) — the page itself is reference; its panels are not catalogue blocks.

Subject content (for the mockup)

Render the page as a categorised specimen sheet of every standard form input, each shown across all interactive states (default, hover, focus, filled, error, disabled). Sections, in order: Text inputs (text, email, password, tel, url, number, search), Date & time inputs (date, time, month, week, datetime-local), Textarea (small, medium, large), Choice inputs (single select dropdown, multi-select dropdown, single checkbox, checkbox group, single radio, radio group), Range & sliders (single-value range, dual-handle range for price filters), File inputs (single file, multi file, drag-drop zone), Special inputs (colour picker styled to brand palette, hidden field documented for the developer), Submit & button row (primary stamped-shadow Send, secondary outline-only, tertiary text-link, destructive sienna-tinted, disabled state). Each specimen shows all 6 states stacked or rowed inside one panel.

Mandatory structure (top to bottom)

  1. Pre-header announcement bar — REUSE announcement-bar.
  2. Global header — REUSE site-header.
  3. Breadcrumbs — REUSE breadcrumbs. Home / Developer / Form Field Reference.
  4. Developer-reference page header — Compact dark cowboy band. Eyebrow (“Developer reference”), title in modesto-condensed display (“Form Field Reference”), lede in palatino-linotype body (“Every form input rendered in every state, with War Dungeon’s brand treatment. Use this when wiring real forms — contact, account, checkout, newsletter.”), stamped roundel with “v1 · 8 June 2026” version stamp. NEW block developer-ref-page-header — same shape as BBWD29’s, authored fresh (no harvest cross-page).
  5. Specimen section: Text inputs — Section head with bronze underline rule, then specimen panels. Each panel: stamped-roundel “input type” label LEFT, the rendered input shown across all 6 states (default / hover / focus / filled / error / disabled) stacked or rowed RIGHT, override note beneath (“Input borders use 2px ridge bronze; focus state adds 4px outer glow in sienna at 30% alpha”). NEW block form-field-specimen-panel — the layout primitive for every form-field specimen on this page.
  6. Section divider — REUSE gear-divider.
  7. Specimen section: Date & time inputs — Same panel pattern. Date picker shows brand-styled calendar dropdown.
  8. Section divider — REUSE gear-divider.
  9. Specimen section: Textarea — Three sizes (small 3-row, medium 6-row, large 12-row) across all states.
  10. Section divider — REUSE gear-divider.
  11. Specimen section: Choice inputs — Selects with brand-styled dropdown chrome; checkboxes + radios with brand-styled custom indicators (ridge bronze frame, sienna fill on checked, stamped check glyph).
  12. Section divider — REUSE gear-divider.
  13. Specimen section: Range & sliders — Single-value range + dual-handle range. Track shows ridge bronze, thumb shows stamped brass roundel.
  14. Section divider — REUSE gear-divider.
  15. Specimen section: File inputs — Standard file, multi-file, drag-drop zone (the drag-drop styled as a plated-frame dotted-bronze border with stamped-roundel upload glyph).
  16. Section divider — REUSE gear-divider.
  17. Specimen section: Special inputs — Colour picker preset to brand palette swatches; hidden field shown as a documented panel (“Hidden fields render zero pixels; included here for developer awareness of their presence in form payloads”).
  18. Section divider — REUSE gear-divider.
  19. Specimen section: Submit & buttons — Primary (sienna stamped-shadow Send), secondary (outline-only ridge bronze), tertiary (text-link), destructive (sienna outline with destructive intent indicator), disabled. All shown in default / hover / focus / pressed / disabled states.
  20. Notes for the developer — Closing panel on light rodeo: “Where form styles live”, “Honeypot + CSRF conventions”, “Inline validation patterns + error message placement”, “Accessibility notes (labels, aria, focus order)”. 4-paragraph reference note for the Phase-2 developer wiring real forms.
  21. Trust strip — REUSE trust-strip.
  22. Global footer — REUSE site-footer.

Block reuse intent

Reused: announcement-bar, site-header, breadcrumbs, gear-divider, stamped-roundel, plated-frame (for drag-drop zone framing), trust-strip, site-footer, plus primitives.

NEW blocks (2) — authored fresh for this mockup; NOT harvested into catalogue:

  • developer-ref-page-header — same shape as BBWD29’s. Authored fresh (no harvest).
  • form-field-specimen-panel — layout primitive carrying one form-field specimen: label + all-states render + override note. The page’s main authoring effort.

Content principles

  • All states visible at once. The page’s load-bearing decision: every input shown in every state without the developer having to hover or click. That’s what makes it a useful reference rather than an interactive demo.
  • Realistic placeholder content. Text inputs prefilled with believable WD-context values (“matthew@nerdworks.uk”, “Combat Patrol Order #1024”, “How long does delivery take?”). Selects show real WD options (Game: 40K / AoS / TOW). Helps the developer see brand voice + treatment together.
  • Override notes are factual. One sentence per specimen explaining what the brand changed from browser defaults. Focus state and error state especially — those are where the brand treatment is most visible.
  • Light atmospheric breather on the developer notes. Same legibility-wins rule as BBWD29.
  • No harvest. Catalogue stays at its current size.

Voice notes

Placeholder input values use the brand’s shopkeeper voice where they’re visitor-facing (“How long does delivery take?”, “Saddle me up for the newsletter”). Override notes are developer-facing plain voice. Section heads stay plain (“Text inputs”, “Date & time inputs”). Closing developer notes are plain throughout.

Render direction

Locked methodology: Maximalist Industrial at the Frontier styleguide (SWD1). The 99-block reuse catalogue supplies chrome verbatim. Author NEW under the same methodology: dark cowboy inverted page header with gear-pattern, gear-divider strips between specimen sections, stamped roundels for input labels, ridge-bronze borders on every input + 2px stamped-input-shadow, brass-stamped custom indicators for checkboxes / radios / range thumbs. Focus states use sienna at 30% alpha as the outer glow. Error states use a sienna 2px outline + sienna inline-error text. Disabled states reduce opacity to 45% and remove ridge depth.

Desktop composition (locked brand rule, 2026-06-07)

War Dungeon is desktop-first. Mockups render at 1440px first; mobile is graceful collapse. Specimen panels are two-column at desktop (label LEFT, all-states render RIGHT); stack at @980px. The all-states render uses a vertical stack at desktop for predictability (default at top, disabled at bottom) — not a 6-up row, because state labels need to sit next to each rendered state.

Technical constraints

  • Page max-width 1440px. Base font size 20px.
  • No interactivity (the rendered states are static visual specimens, not live inputs — focus / hover / error are shown via class-based state stand-ins so they all render visible simultaneously).
  • This page lives at /developer/form-field-reference in production (admin-only / login-gated; not indexed; not in primary nav).
  • Version stamp on the header is operator-editable (ACF field at Phase 2) so the developer knows which override revision they’re reading.
  • The specimens render the brand’s overridden styling; do not include “browser default vs brand override” side-by-side comparisons — the brand override is the spec.