---
type: plan
project: leaguelaw
title: Design Conceptualizer — implementation spec for the League run (v0)
status: DRAFT for Rian's review — nothing client-facing built yet
created: 2026-08-24
inputs: design-direction.md · examples-shortlist.md · prototype.md · Rian's Slack notes (2026-08-21 + walkthrough message)
---

# Design Conceptualizer — League Law implementation (v0 spec)

**What this is:** the implementation check Adi asked for, mapping Rian's
"design conceptualizer" picture onto the League Law project, using the
Professor Media Group walkthrough as the format reference. It is the
check-in artifact: approve/adjust this before anything is built.

## 1. What the walkthrough actually is (dissected from the file)

`professormediagroup/public/walkthrough.html` — one self-contained HTML file,
~34 KB, ~1.2 KB of vanilla JS, no dependencies:

- **7 `section.screen` steps**, each with a `data-title`; the JS builds a
  numbered step nav + Back/Next footers and hash links (`#1`).
- Each step = a **kicker** ("Step 2 · the money shot"), a **plain-human H1**
  ("Where should I actually buy this?"), then **visual mock elements** —
  fake browser frames, cards, screens — and very few words (muted notes).
- So the format is: *few steps · one idea per screen · visuals over text ·
  click Next*. That's why it worked in 5 minutes.

**Transferable spec:** the format is domain-independent. For League it
carries a *direction ask* instead of a product explainer.

## 2. The League run — three components (Rian's picture, made concrete)

### A. Context loader (repeatable — "start the design conceptualization for League")

Everything the loader needs ALREADY EXISTS for League; the loader is a
read-list, in order:

1. `.logs/planning/design-direction.md` — the client's words, 4 hard criteria,
   the examples-gate ask (THE anchor).
2. `brief.md` — scope sold, boundaries, photography timing.
3. Scout `notes/league-law-thread.md` — the raw client emails.
4. Brand inputs — logo, colours (#EF6D3E · #46ADC8 · #423C37), the hexagon,
   fonts (Raleway/Open Sans); plus the brand-inputs checklist in `adi-note.md`
   (social/office/print, analytics device split when available).
5. `.logs/planning/examples-shortlist.md` — verified reference research
   (ideas to adapt, never copy).
6. Internal only: the replica measurements + section inventory
   (`prototype.md` appendix) and the website-type checklist (Adi's idea,
   v0 for "law firm website" to be drafted).

### B. Output spec (the thing Darren clicks through)

One walkthrough-format HTML page, id-auth gated, **≤ 5 steps, < 5 minutes,
few words** (Rian's calibration: 3 options max, short wording, involvement):

- **Step 1 — "What we heard from you."** Darren's four rules, mirrored back
  visually in one screen (involvement: his words drive the process).
- **Steps 2–4 — Option 1 / 2 / 3.** Three LOW-FI layout wireframes (the
  pencil style from day one — its proper job), each built from his criteria +
  our internal checklist, each with ONE line: "what you'd be choosing."
  Candidate trio for League (Adi's call as designer): contact-bar + triage
  grid (Armstrong-shape) · hive-cell triage grid (the brand-structural one) ·
  team-led triage. Mobile view included on each (sticky call/email bar).
- **Step 5 — "Your turn."** Pick one + say anything ("like A's top but less
  busy") + two tiny questions (which phone number leads; who signs off).
- **Appendix link (not a step):** our internal standards checklist — available
  if he's curious, never required reading.

### C. Feedback capture

- **v0 (now):** the page itself + Darren replies in the thread/on a call —
  zero new mechanics, fastest to ship.
- **v1 (Scout-shaped, Rian's long-term):** the three options as Scout
  materials in the existing League Law project (Darren is already lead);
  Scout's reactions/comments give anchored feedback ("comment on THIS spot")
  and roll up. This is the automation seam — the walkthrough is the stimulus,
  Scout is the capture.

## 3. Division of labour (Rian's closing point, applied)

Humans distill; automation runs:
- **Adi (art/judgment):** picks the three layout classes, draws/approves the
  wireframes, writes the one-liners, decides what gets mirrored in step 1.
- **Claude (system):** loads context, drafts the walkthrough page from the
  spec, checks every screen against the four criteria before anyone sees it,
  assembles the appendix from the checklist.
- **Rian (gate):** approves this spec + the final page before it goes to
  Darren; sets the timebox.

## 4. What gets reused from work already done

- Pencil wireframe style (day-1 build) → the option screens.
- Examples research → adapted ideas inside the options (Armstrong grid,
  sticky mobile bar, usa.gov phone-first bar), never shown as-is.
- Scout → v1 capture. Replica → internal proportions reference only.
- The walkthrough JS/format → copied from PMG (33 KB, no deps), reskinned
  neutral (not League-branded heavily — it's a conversation, not a mockup).

## 5. Open for Rian before build

1. Is the 5-step shape right, or fewer? 2. v0 (reply in thread) vs v1 (Scout)
for capture? 3. Do the two "bookend" reference sites still appear anywhere
(e.g. a small "for calibration" step), or drop to keep it tiny? 4. Timebox.