← Back to Hub Lockwood Advisory
11 · Format Spec
Brand System · 11 · Lockwood Advisory · MMXXVI
The Web
Brief
Visual preview · spec 11
11 · Insight & Analysis · Format Spec

The Web Brief

Multi-source analysis turned into a one-screen entry point with depth on demand.

Live spec

When to use it

  • Stakeholder interviews turned into a navigable brief.
  • Day reports from a workshop or strategy session.
  • Interim insight pieces mid-engagement, sent to a client to land thinking.
  • Living research artefacts that update as new data lands.

When NOT to use it

  • Static one-page summaries · use the One-Pager (20).
  • Long-form narrative analyses · use the Word Document (12).
  • Public-facing storytelling · use the HTML Report (27).
  • Pitch documents · use the Proposal (14).

When this format is right

If the work needs to feel ALIVE · navigable, layered, web-native · and the recipient is a stakeholder who'll come back to it more than once, this is the format.

Canonical reference

Spatial WA Stakeholder Brief · deployed via Netlify · current reference for the navigable-brief pattern.

Tooling

Built as HTML / CSS, deployed to Netlify. No CMS required · the brief IS the file.

Architecture

  • Single index.html with all content embedded
  • Tab or section navigation for major threads
  • Glass-card overlay aesthetic on photo background
  • Mobile-responsive single-column fallback

Hosting

Each brief gets its own Netlify URL (e.g. spatialwa-stakeholder-brief.netlify.app). URLs persist for the engagement's life.

The DNA

The Web Brief inherits its visual DNA from the Operating Hub itself: navy + gold + cream palette, glass-morphic cards over photography, Cormorant Garamond + Tenor Sans typography, gold meta labels.

What makes it a Web Brief and not a hub: focused scope (one analysis, one engagement), no nav structure beyond the brief itself, designed to be read in one sitting.

The Anatomy

Cover screen · engagement title, big serif, glass card over photography. Lede paragraph framing the analysis.

Navigation row · horizontal tabs or jump links to major threads (e.g. Findings, Stakeholders, Themes, Next).

Content panels · each thread gets its own panel with cards, callouts, evidence pull-quotes.

Foot signature · Lockwood Advisory mark, date, version stamp.

Voice rules

  1. The work IS the voice. Don't introduce the analysis with throat-clearing.
  2. Pull-quote evidence. Stakeholder voices in their own words.
  3. Synthesise, don't summarise. The brief is the insight, not a list of what was said.
  4. Make the structure obvious. Tabs/sections tell the recipient where to look.

Production checklist

  1. All sections have content (no empty tabs)
  2. Each pull-quote is attributed
  3. Photography is high-res, license-clean
  4. Glass card contrast passes WCAG AA
  5. Netlify URL set and shareable
  6. Version stamp at footer matches release date
Prompt-ready brief · copy into any AI 
You are writing a Web Brief for Lockwood Advisory.

CONTEXT
A Web Brief is a multi-source analysis turned into a navigable HTML page. Used for stakeholder interview synthesis, day reports, or interim insight pieces. Deployed as a private Netlify URL the client returns to.

STRUCTURE
- Cover screen: engagement title, glass card over photography, framing lede paragraph.
- Navigation row: 3-5 major threads as tabs or jump links.
- Content panels: each thread = its own panel with cards, callouts, pull-quote evidence.
- Foot: Lockwood Advisory mark, date, version.

VOICE
- Synthesise, don't summarise.
- Stakeholder voices in their own words (attributed pull-quotes).
- The work IS the voice. No throat-clearing intro.
- Tabs/sections make structure obvious.

WHAT NOT TO DO
- Don't write a long executive summary at the top.
- Don't bury the headline finding behind methodology.
- Don't use generic stock photography. The image is part of the brief's DNA.

FORBIDDEN SYMBOLS (NEVER USE)
- No em dashes (—)
- No en dashes (–)
- No section symbol (§) — use plain numbers (01, 02) instead
- No curly quotes (“ ” ‘ ’) — use straight quotes (")
- No ellipsis character (…) — use three dots (...)
- Use middle dot . only as separator (the . shown here is U+00B7)

OUTPUT
Write the HTML content for a Web Brief with [n] threads on [topic], using the Lockwood Advisory brand voice and the structure above.

What this block does

Drop this into Claude, GPT, Gemini, or any LLM to produce a The Web Brief in the Lockwood Advisory format and voice without re-explaining each time.