# TASK: Scaffold the Wear Every Hat Next.js app > Stand up the Next.js + TypeScript + Tailwind foundation with the design-token system, light/dark theming, base layout, and a successful Vercel deploy — replacing the current 404. ## Context The repo (`1000Problems/weareveryhat`) is already connected to Vercel with the domain `www.weareveryhat.com` live, but it contains only design docs — every URL 404s. This task creates the application shell that all later tasks (content engine, home page) build on. Scope follows `DESIGN-Prompt.md` (Design Brief v2, E1 scope), which supersedes the broader DESIGN.md v0.1 for this first run: two pages eventually, light-first theming, no chatbot yet. ## Requirements 1. Next.js (App Router) + TypeScript + Tailwind CSS app at the repo root. `npm run build` passes with zero errors; pushing to `main` produces a working Vercel deployment (no framework config changes needed in the Vercel dashboard beyond auto-detection). 2. Design tokens as CSS custom properties in `app/globals.css`: color, spacing scale, radius, and type scale — defined for **both** light and dark themes. Light is canonical/default; dark derives from the same token names (`[data-theme="dark"]`). Placeholder values below; if a Claude Design bundle lands in `design_reference/`, its values are pixel-authoritative and replace them. 3. Three font roles wired via `next/font`: an editorial serif for display headings (e.g. Fraunces or Source Serif 4), a workhorse sans for UI/body (e.g. Inter), a real mono for code (e.g. JetBrains Mono). Exposed as CSS variables (`--font-display`, `--font-sans`, `--font-mono`) referenced by tokens, not hardcoded per-component. 4. Base layout in `app/layout.tsx`: header with a simple line-drawn hat mark placeholder (inline SVG component `components/HatMark.tsx`) + "Wear Every Hat" wordmark linking home, and a theme toggle; footer with YouTube, GitHub repo, and contact links (hrefs can be `#` placeholders marked `// TODO`). Both keyboard-accessible with visible focus states. 5. Theme behavior: default follows `prefers-color-scheme`, toggle overrides and persists (localStorage), no flash-of-wrong-theme on load (inline script in `` before hydration). Both themes meet WCAG AA for body text and controls. 6. A temporary home page at `app/page.tsx`: hat mark, wordmark, the thesis line "One person. Every hat.", and one line "Site under construction — Episode 1 coming soon." Styled with tokens only. (Replaced by TASK-03.) ## Implementation Notes - Create at repo root: `package.json`, `next.config.mjs`, `tsconfig.json`, `app/layout.tsx`, `app/page.tsx`, `app/globals.css`, `components/HatMark.tsx`, `components/ThemeToggle.tsx`, `components/SiteHeader.tsx`, `components/SiteFooter.tsx`. - Update `.gitignore` for Next.js (`.next/`, `node_modules/`, etc.) — append, don't remove existing entries. - Placeholder tokens (replace when `design_reference/` bundle arrives): ```css :root { --color-bg: #FAFAF7; /* near-neutral base, light-first */ --color-surface: #FFFFFF; --color-text: #1A1A18; --color-text-muted: #57574F; --color-accent: #1FA9A0; /* single accent, used sparingly */ --color-highlight: #E8B33C; /* functional highlight (checkpoints, CTAs) */ --color-border: #E3E3DC; --radius-sm: 4px; --radius-md: 8px; --space-unit: 4px; /* scale: 4/8/12/16/24/32/48/64 */ } [data-theme="dark"] { --color-bg: #16161A; --color-surface: #1E1E24; --color-text: #EDEDE8; --color-text-muted: #A3A39B; --color-border: #2E2E36; /* accent/highlight adjusted only if AA contrast requires */ } ``` - Style discipline per the brief: no gradients on buttons, no purple-on-black, visible structure (rules, borders) over decoration. - The hat mark is a placeholder: simple single-stroke line-drawn hat (field-guide style), `currentColor` stroke, works at favicon size. Also wire it as the favicon via `app/icon.tsx` or `app/icon.svg`. - Keep components small and readable — this codebase is read on camera. ## Do Not Change - `DESIGN.md` — design source of truth, human-edited only - `DESIGN-Prompt.md` — design brief, human-edited only - `design_reference/` (entire folder) — pixel-authoritative design assets - `logo.png` — brand asset - `.claude/` — local tool settings - Vercel/GitHub settings — the deploy pipeline is already configured; do not add `vercel.json` unless the build fails without it - Do NOT install a UI component library (no shadcn, no MUI) — hand-rolled components are the curriculum ## Acceptance Criteria - [ ] `npm run build` passes with zero errors and zero type errors - [ ] Deployed site at www.weareveryhat.com renders the construction page (no more 404) - [ ] Theme toggle switches themes, persists across reload, and no wrong-theme flash on hard refresh - [ ] With OS dark mode on and no stored preference, site loads dark - [ ] All text meets WCAG AA contrast in both themes (spot-check with devtools) - [ ] `git diff` shows changes ONLY in files listed under Implementation Notes (plus lockfile) ## Verification 1. `npm run build` — must pass clean 2. `npm run dev` — check /: layout, toggle behavior, focus states via keyboard tab-through 3. Toggle theme, hard-reload, confirm persistence and no flash 4. `git status` / `git diff` — confirm no protected files touched 5. Push to `main`, confirm Vercel deploy goes green and the domain serves the page