# Design Brief v2 — E1 scope (Home + Episode page)

*Paste everything below the line into Claude Design. Supersedes DESIGN-BRIEF.md for
this first run — full site (Ask, Glossary, Artifacts) returns in later iterations.
Output bundle becomes `design_reference/` in the repo, treated as pixel-authoritative.*

---

Design a two-page learning site called **Wear Every Hat** (weareveryhat.com) — a video
course teaching working developers how one person ships real software using AI in every
role: designer, architect, coder, reviewer, ops. Episodes live on YouTube; the site is
the companion, one page per episode. Only Episode 1 exists right now, and the site must
look deliberate that way — a confident start, not an abandoned grid.

Audience: working developers, skeptical of AI hype. Tone: evidence over promises.
This must feel like a serious engineering artifact, not a course-platform template —
developer documentation with warmth: editorial type, generous whitespace, real content
density. Absolutely no generic SaaS-landing tropes: no floating 3D blobs, no fake
testimonials, no gradient buttons, no purple-on-black AI clichés.

**Identity.** The name means one person wearing every hat in a software company. Use a
restrained hat motif — line-drawn, field-guide / technical-manual charm, never
costume-party kitsch. No final logo exists yet: set the identity with a simple
line-drawn hat mark plus a typographic wordmark, and design as a system I can evolve.

**Style constraints (follow these, not adjectives):** an editorial serif for display
headings, a workhorse sans for UI and body, a real mono for code; strong typographic
hierarchy; color discipline — a near-neutral base with one accent used sparingly and
one functional highlight, defined as tokens; spacing on a consistent scale; visible
structure (rules, borders, numbered labels) over decoration.

**Theming:** design light-first — light is the canonical theme that will appear in
video screenshots. Deliver dark tokens from the same system as a secondary. Both
themes WCAG AA for body text and controls.

## Page 1 — Home

1. Hero: hat mark + wordmark, thesis line **"One person. Every hat."**,
   one short pitch paragraph ("A video course where one developer plays every role in
   a software company — and every claim comes with the spec and the diff."),
   primary CTA **Watch Episode 1** (links to YouTube), secondary link to the channel.
2. Featured episode card — the only episode: number (S1E1), title
   "Building the Site You're Looking At", duration, one-line summary
   ("We design, spec, build, and ship this exact website — home page, this episode
   page, live domain — with AI in every chair."), thumbnail area, watch + read links.
3. **Coming-soon strip** — replaces any roadmap/grid. One calm band: "More episodes
   coming soon" with a single email field ("Get notified when the next episode drops")
   and its success state. It should read as intentional pacing, not missing content.
4. Footer: YouTube, GitHub repo (the site's source is course material), contact.

## Page 2 — Episode page

Top to bottom:

1. Header: "Series 1 · Episode 1" label, title, published date, duration.
2. Large responsive 16:9 embedded YouTube player.
3. Long-form written lesson: headings, paragraphs, syntax-highlighted code blocks with
   language label + copy button, and three callout variants — Tip, Warning, and
   **Checkpoint** ("your project should look like this now" — give this one a
   distinct, slightly celebratory treatment).
4. Artifacts section: downloadable files shown as file rows with real filenames
   (e.g. `DESIGN-BRIEF-E1.md`, `TASK-01-scaffold.md`, `chapters.json`), file type
   and size.
5. Prev/next navigation: prev disabled, next in a "coming soon" state.

Reading column ~70–75ch. On mobile everything stacks; code blocks scroll, never wrap
away.

## Constraints & deliverables

- Every screen must hold up as a 1080p video screenshot: strong contrast, no
  hairline type below 16px, key moments legible at a glance.
- More page types come later (a course chatbot, a glossary, a cost dashboard) —
  design a token system demonstrated on these two pages, not a one-off layout.
- Deliver: color/type/spacing/radius tokens as concrete values for both themes; both
  pages desktop + mobile in the light theme (dark as a token appendix); component
  states (episode card, coming-soon strip + email success, code block, callouts,
  buttons/links hover-focus-active, disabled prev); favicon-sized hat mark.