--- title: Essentials — Website Design Brief V3 (LOCKED FOR BUILD) project: Alan / Essentials mobile barber site version: 3.0 — final date: 2026-04-27 supersedes: DESIGN-BRIEF-V1.md, DESIGN-BRIEF-V2.md status: Pending one signoff. Phase 4 build fires on approval. references: - copy-locked-v1.md (UNCHANGED) - 03-mobile-barber/brand-kit/essentials-kit-number-system.html (LOCKED brand kit — ALL tokens pulled from here) - 00-profile/profile.md --- # Essentials — Website Design Brief V3 — final The site that makes a JP Morgan MD think it would be a privilege to have Alan cut his hair. V1 (cut animation + standard scroll) and V2 (cut becomes barber pole) are both retired. V3 throws out: - Every stock photo. Pexels shortlist is dead. - The barber pole. Too literal, too "barber," reads as kitsch above a certain price tier. - Any reference to barbershop interiors. Alan is mobile. The site does not show shops. - Any visual cue from the discount-grooming category — pole, striped chair, neon "OPEN," vintage clipper photography, scissors-and-comb still life. V3 commits to: - ONE image — Alan, treated as a private-bank founder portrait. Placeholder until real shoot. - ONE accent — the brand kit's Charge blue `#1F40FF`. Used like a Bloomberg ticker, never decoratively. - ZERO photography of anything that isn't Alan. - The positioning move: present Alan the way a private practice presents itself. Restraint, precision, instrument-grade typography. The site reads as if Alan is already booked out and the site is here to qualify enquiries — not to sell. The reference register is private equity prospectus / Bloomberg Terminal / Goldman Sachs internal communications / a Loro Piana monograph rendered in modernist type — NOT Old Money classical (no marble, no oxblood, no gilt) and NOT creative agency theatre (no scissor swooshes, no orbital cards, no Studio Freight kinetic). --- ## 1. Thesis > **Alan is the centerpiece. The page composes around him like a private bank composes itself around its founder. The work is to qualify the reader, not entertain them.** The site spends its entire visual budget on a single move: the portrait, treated with the precision of a financial instrument, surrounded by the five disciplines as celestial-coordinate readouts. Everything else (copy, motion, layout) recedes from this composition. --- ## 2. Signature moment — *The Centerpiece* One moment. Persistent. Not a 7-second timeline, not a barber-pole reveal — a composition that asserts itself on first paint and rewards careful scrolling. ### What it is Alan's portrait, pinned at the optical centre of the viewport, with five pillar labels arranged as a constellation around him. Each pillar is connected to the portrait by a 1px Charge blue hairline. Each connection point is marked with a Charge blue dot at coordinate-readout precision (mono, micro, like a Bloomberg field label). The composition is asymmetric — pillars are NOT at clock positions. They sit at coordinate intervals like points on a stellar atlas. Reading order is established by the staggered reveal sequence (top first, then clockwise descending), not by symmetric arrangement. ### How it fires - **0.0s** — Page loads. Bone-frame placeholder rectangle is visible centre-screen. Brand wordmark "ESSENTIALS" set in Big Shoulders Display 900 at clamp(180px, 28vw, 460px) sits ABOVE the portrait at low contrast (40% opacity). - **0.2–1.2s** — Brand wordmark assembles via GSAP SplitText. Each character drops in from below, 80ms stagger, opacity 0 → 100% with `power3.out`. Sequence completes at full opacity. - **1.2–1.6s** — A single Bone hairline draws from the left edge of the viewport across to the right edge, passing horizontally beneath the wordmark. 1px line, `power2.out`, 400ms. - **1.6–2.4s** — Portrait placeholder fades in from `opacity:0` to `opacity:1` while scaling from `scale(0.97)` to `scale(1.0)`. Subtle, weighted. - **2.4–4.5s** — Five pillar hairlines DRAW from portrait edge outward to their coordinate positions. Sequence: WELCOME (top, 12 o'clock), CRAFT (upper-right, 2 o'clock), MOVEMENT (lower-right, 5 o'clock), ACCOUNTABILITY (lower-left, 8 o'clock), RECOVERY (upper-left, 10 o'clock). Each line ~0.4s with 80ms stagger between starts. As each line completes, its label fades in (JetBrains Mono uppercase 11px, 0.18em letter-spacing, Bone) and a Charge blue 4px dot appears at the connection point. Beneath each label, a coordinate readout appears in JetBrains Mono 9px Chalk: `· 01 · X48 Y14` etc. Bloomberg field-label register. - **4.5s onward** — Composition holds. Page is interactive. User can scroll. ### The screenshot test Frozen frame at 4.5s shows: ESSENTIALS wordmark large at top in Bone, Bone hairline beneath, Alan portrait placeholder below (Bone rectangle, Charge blue 1px border, mono caption "ALAN · PORTRAIT TO BE COMMISSIONED" beneath), five labelled coordinate points orbiting the portrait at asymmetric intervals connected by hairlines, Charge blue dots marking each connection. The whole composition reads at first glance as a single architectural drawing or a financial dossier cover — NOT a barber site. ### Why this beats V1 and V2 - V1's cut earns one screenshot then resolves into a normal page — high-effort hero, low-effort everything-else. - V2's barber pole carries the brand metaphor structurally but reads as kitsch above $200/cut tier — the helical stripes lose to the Bloomberg-Terminal register at JP Morgan price points. - V3 puts the budget on the man. The portrait does the entire job. The constellation around him is the brand mechanic — five disciplines, displayed as instrument readings, not as wellness-clinic decoration. ### Banned-pattern check - One signature moment per page ✓ - Not a stacked hero + 4 content blocks ✓ — the centerpiece IS the page; sections below it are recesses, not stacks - Not orbital wellness-mandala (despite using "constellation") ✓ — asymmetric coordinates, mono labels, Bloomberg-field-label register - No video, no AI imagery, no stock ✓ - No rectangle video ✓ - No reveal cascade on every element ✓ — only the centerpiece sequence reveals; everything below renders static - No marquee, no kinetic ticker ✓ --- ## 3. Five sections (tightened from V2's seven) V3 cuts the standalone Kit Gallery section and the standalone Single-cuts section. The kit was a Pexels-driven section that has nowhere to go without stock. Single-cuts folds into the corporate section as a smaller secondary offer. Result: five sections, each with a clear job. | # | Section | Bg | Job | |---|---|---|---| | 01 | **The Centerpiece** | Ash `#050507` | Brand assertion. Portrait + constellation + wordmark. Carries Sections 1 & 2 of the locked copy (Hero + the existence of Alan). | | 02 | **The Disciplines** | Ash `#050507` (continuous with 01) | The five pillars stated in detail. Pinned portrait remains visible. Pillars elevate from constellation labels to full statements. | | 03 | **The Service** | Bone `#F2F1ED` reverse | Corporate offer (primary) + single-cuts (secondary as a footer-row inside this section). The commerce. Bone reverse signals "this is the booking conversation." | | 04 | **The Person** | Ash `#050507` | Alan story (Section 4 of locked copy). Portrait pins out, story prose dominates. | | 05 | **The Enquiry** | Bone `#F2F1ED` reverse | Contact form, treated like enquiring with chambers of a private practice. | Three Ash sections, two Bone sections. The reverse-bg on Sections 03 and 05 marks the two booking-adjacent surfaces — the reader's eye learns "Bone bg = the part where commerce happens." This is a brand-kit-native rhythm (the locked kit specifies both Ash-primary and Bone-reverse modes for different document classes). --- ## 4. The portrait — placeholder + treatment ### What's there NOW (placeholder, ships to staging) A 4:5 aspect Bone rectangle (`#F2F1ED`), centred. Border: 1px Charge blue `#1F40FF`. Inside the rectangle, a subtle architectural drafting pattern — diagonal hairlines at 45° in `rgba(31,64,255,0.06)`, 12px spacing — gives the placeholder its own integrity, signals "this is design-pending, not asset-missing." Beneath the rectangle, two-line caption: ``` ALAN PORTRAIT TO BE COMMISSIONED · BRISBANE · 2026 ``` Set in JetBrains Mono 11px uppercase 0.18em tracking, Chalk colour. The placeholder reads as a statement — "we are commissioning a portrait, not lifting a stock photo." ### What replaces it (real shoot) The brief carried in `assets/asset-manifest.md` updates to specify the photographer brief. Same composition, same dimensions, real Alan in the frame. **Photographer brief (single take):** - Plate: 4:5 vertical, mid-portrait (chest up), Alan looking just past the camera mid-distance. - Light: single soft side-light, sharp falloff, no fill. Shadows allowed deep. Background gradient from `#0F1014` to `#050507` — cinematic dark studio. - Wardrobe: dark wool blazer or black collared shirt, no logo, no texture. NO barber apron. NO holding tools. NO shop in background. - Treatment: registered as a black-and-white file with one Charge blue hairline added in post around the print frame (matches the brand kit's accent treatment). This is a Coutts-founder portrait register, not a barber-of-the-year photo. --- ## 5. The constellation — pillars as instrument readout ### Position Five pillar coordinate positions, anchored relative to the portrait centre. NOT clock positions. Numbered for reveal order. | # | Pillar | Position relative to portrait centre | Reveal order | |---|---|---|---| | 01 | WELCOME | Top, +0% x / -32% y | First | | 02 | CRAFT | Upper-right, +28% x / -18% y | Second | | 03 | MOVEMENT | Lower-right, +24% x / +22% y | Third | | 04 | ACCOUNTABILITY | Lower-left, -22% x / +24% y | Fourth | | 05 | RECOVERY | Upper-left, -26% x / -16% y | Fifth | Asymmetric. The pentagonal shape breaks symmetry intentionally — a perfect star reads as wellness, an asymmetric constellation reads as instrumental. ### Per-label specification Each label is a four-element unit: ``` [hairline from portrait edge to dot] [Charge blue 4px dot] [PILLAR NAME — JetBrains Mono uppercase 11px 0.18em Bone] [· 0N · X## Y## — JetBrains Mono 9px Chalk] ``` The Bloomberg-field-label register is essential. Without the coordinate readout below each label, the constellation reads as wellness. With it, the constellation reads as instrument. ### Behaviour in Section 02 (The Disciplines) User scrolls into Section 02. Portrait stays pinned. Pillar constellation transitions: each pillar's micro-label fades to 30% opacity, and a corresponding statement panel appears at one of the four corners of the viewport (cycling through, scroll-driven). The constellation itself doesn't move — the page elaborates on each pillar in sequence by occupying viewport corners with full statements. ``` WELCOME — Every demographic. Every chair. No exceptions. Statement panel anchors top-right while the WELCOME label in the constellation pulses at full Charge blue. Scroll → next pillar elaborates, panel cycles to next corner. ``` Five pillars, five scroll-snapped beats. Portrait remains the gravity well throughout. --- ## 6. Type stack — direct from locked brand kit Pulled from `essentials-kit-number-system.html`. No additions, no substitutions. | Role | Face | Source | Defence | |---|---|---|---| | **Display** | Big Shoulders Display, weight 900 | Google Fonts (OFL) | Compressed industrial. The brand wordmark, section headlines. Reads as financial print, not magazine fashion. | | **Sub-display** | Saira Condensed, weight 800 | Google Fonts (OFL) | Secondary headline / kit-number register. Used sparingly — section number markers only. | | **Body** | Inter Tight, weights 400/500/600 | Google Fonts (OFL) | The body face. Modern grotesque, calm, no eccentricities. Readable at 13-22px. | | **Mono / Micro** | JetBrains Mono, weight 400 | Google Fonts (OFL) | Field labels, coordinate readouts, kit metadata, form labels, the constellation labels themselves. The Bloomberg cue. | All four are OFL, free, self-hostable as WOFF2. No third-party CDN. ### Type composition rules - **Brand wordmark** (Big Shoulders 900 at clamp(180px, 28vw, 460px)) — appears once at the top of Section 01. Never repeats. - **Section headlines** (Big Shoulders 900 at clamp(48px, 8vw, 140px)) — one per section. Aligned LEFT in Bone sections, CENTRE in Ash sections. - **Body** (Inter Tight 400 at 16px / 1.6) — body slabs, max-width 560px. - **Micro mono** (JetBrains Mono 11px uppercase 0.18em) — every label, caption, coordinate, form field, kit-style metadata. Carries the Bloomberg register through the whole site. - **Italic** — only used in pillar definition lines. Never in body, never in headlines. --- ## 7. Palette — direct from locked brand kit | Token | Hex | Role | |---|---|---| | **Bone** | `#F2F1ED` | Primary type on Ash, primary bg on Bone-mode sections. | | **Ash** | `#050507` | Primary bg on dark sections. Slightly warmer than pure black. | | **Ash2** | `#0F1014` | Panel bg, card bg, portrait gradient background. | | **Charge** | `#1F40FF` | Accent. Used ONLY for: pillar dots, hairline borders on the portrait, coordinate-readout colour highlights, hover states, focus rings. Never as a fill, never as a gradient. | | **Chalk** | `#B6BAB8` | Secondary type (captions, coordinate readouts). | | **Rule** | `rgba(242,241,237,0.16)` | Hairline borders on Ash bg. | | **RuleD** | `rgba(5,5,7,0.16)` | Hairline borders on Bone bg. | Charge blue is the only chromatic colour on the entire site. Used like a Bloomberg accent — a 4px dot, a 1px line, a focus ring. Never a button fill. Never a gradient. The restraint is the cue. ### Contrast ratios - Bone on Ash: 17.2:1 ✓ AAA - Chalk on Ash: 9.8:1 ✓ AAA - Charge on Ash: 5.6:1 ✓ AA — used for hover/focus/dot, not body type - Ash on Bone: 17.2:1 ✓ AAA - Charge on Bone: 4.7:1 ✓ AA --- ## 8. Motion direction — restrained The site has TWO motion budgets. The signature moment (Section 01 centerpiece assembly) and the Section 02 constellation elaboration. Everything else renders static. | Section | Motion | |---|---| | 01 The Centerpiece | Wordmark assembly (SplitText), hairline draw, portrait fade-in, constellation hairlines + label reveal sequence (4.5s total) | | 02 The Disciplines | Pillar statement panels cycle into viewport corners as user scrolls; constellation labels pulse at Charge blue when active | | 03 The Service | Static. Section headline appears, three offer cards render, no choreography. | | 04 The Person | Static. Portrait releases pin and slides into upper-left. Story prose right-aligned. No animation. | | 05 The Enquiry | Static. Form renders, field-by-field appearance only on focus. | Lenis runs global smooth scroll. ScrollTrigger drives the Section 02 panel cycle. No reveal cascades. No marquee. No parallax beyond the portrait's pin-and-release. ### Reduced-motion behaviour - Wordmark assembly: instant, no stagger - Constellation: all labels render at once with the hairlines pre-drawn (no draw animation) - Section 02 panels: appear in their corners with no transition - Lenis disables, native scroll resumes - Portrait pin/release behaviour: still pins, but with no scaled transition The composition still works because it was designed to be a strong still frame. Motion is enrichment, not load-bearing. --- ## 9. Stack No changes from V2 recon. All needed plugins are bundled with GSAP (free for commercial since Webflow's 2024 acquisition). | Tool | Role | Source | Weight | |---|---|---|---| | Astro 4+ | Framework | astro.build | n/a | | GSAP 3.13+ | Animation core | gsap.com | ~24KB gz | | ScrollTrigger | Scroll-linked timelines | GSAP plugin | ~12KB gz | | SplitText | Wordmark assembly + reveal | GSAP plugin (free in v3.13) | ~8KB gz | | DrawSVG | Hairline draws | GSAP plugin | ~4KB gz | | Lenis | Smooth scroll | darkroomengineering/lenis | ~4KB gz | Total animation payload: ~52KB gz. Plus Astro shell + page CSS + page JS: ~14KB. Total budget under 70KB gz, well below the 90KB target. No new dependencies vs V2. No barber-pole hand-roll either — V3 has no pole. --- ## 10. Layout per section (concrete) ### Section 01 — The Centerpiece ``` ESSENTIALS [Big Shoulders 900, clamp 180-460px, Bone, centred] ───────────────────────────────────────── [Bone hairline, full viewport width] Sharp cuts. House calls. [Inter Tight 400, 18px, Bone, centred] Brisbane. [Vertical space] ┌─────────────┐ o ────│ │──── o │ │ │ PLACEHOLDER│ │ │ o ────│ │──── o │ │ └─────────────┘ ALAN · PORTRAIT TO BE COMMISSIONED · BRISBANE [JetBrains Mono 11px, Chalk, centred] o [BOOK FOR YOUR OFFICE] [BOOK A SINGLE CUT] [Two CTA buttons, Bone borders, lower viewport] · 01 · ESSENTIALS · 2026 [JetBrains Mono 10px, Chalk, lower-left, kit-style] ``` The portrait is dead-centre. The five constellation positions are marked by `o` Charge dots. The CTAs sit beneath the constellation at the bottom of the viewport. Every element is precisely positioned — no element floats, no element is decorative. Reads as the title page of a private dossier. ### Section 02 — The Disciplines ``` · 02 · THE FIVE DISCIPLINES [Section number marker, JetBrains Mono] [Portrait stays pinned at viewport centre, dimmed to 78% opacity] Statement panel cycles through corners as user scrolls: TOP-RIGHT corner — WELCOME Every demographic. Every chair. No exceptions. ──── · 01 · X48 Y14 Then scroll → BOTTOM-RIGHT — CRAFT, then BOTTOM-LEFT — MOVEMENT, then TOP-LEFT — ACCOUNTABILITY, then TOP-RIGHT again — RECOVERY. Each pillar gets one viewport beat. Five total. Portrait holds. ``` Each panel is ~280px wide, anchored 48px in from the corresponding viewport corner. As one panel exits, the corresponding constellation label dims back to 30% opacity. As the next panel enters, its constellation label pulses to 100% and Charge blue. ### Section 03 — The Service Bone bg, Ash type. Brand-kit-native reverse mode. ``` · 03 · THE SERVICE [Section marker] WE COME TO YOUR TEAM. [Big Shoulders, Ash, left-aligned] A barber on site, in your office, for the afternoon. Cuts for the people who keep your business moving — between meetings, before the flight, on a Friday before the long weekend. [Inter Tight body, max 560px] ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ · HALF DAY │ │ · RECURRING │ │ · EVENT │ │ │ │ │ │ │ │ AN │ │ QUARTERLY │ │ WEDDING OR │ │ AFTERNOON │ │ PROGRAMME │ │ LAUNCH │ │ │ │ │ │ │ │ Around eight│ │ Same room. │ │ Groom and │ │ cuts. Set up│ │ Same chair. │ │ groomsmen, │ │ in a meeting│ │ Same barber.│ │ the morning │ │ room. Packed│ │ Once a │ │ of. Or a cut│ │ up before │ │ quarter. │ │ bar at your │ │ five. │ │ │ │ event. │ │ │ │ │ │ │ │ ─────────── │ │ ─────────── │ │ ─────────── │ │ · 01 │ │ · 02 │ │ · 03 │ └─────────────┘ └─────────────┘ └─────────────┘ [ENQUIRE FOR YOUR OFFICE] [CTA, Charge blue border on Ash type] ──────────────────────────────────────────── [Subtle hairline divider] · OR · BY APPOINTMENT [Smaller secondary section header] If you're in the city, a hotel, or one of the quiet pockets of Brisbane that don't make it onto most maps — get in touch. House calls for individuals are limited. [BOOK A SINGLE CUT] [Smaller secondary CTA] ``` Three offer cards, RuleD hairlines, kit-numbered. Single-cuts folded in as a secondary section below the corporate offer. Both routes visible without leaving the page. ### Section 04 — The Person ``` · 04 · THE PERSON [Section marker, top-left] ┌─────────────┐ │ ALAN │ BUILT QUIETLY, [Big Shoulders 900] │ PORTRAIT │ OVER TIME. │ PENDING │ │ │ I came to barbering [Inter Tight body] └─────────────┘ because of the craft. The way a tool becomes an extension of a hand. The way a cut becomes a story you tell about yourself. I learned it the long way. Watching, asking, sitting in chairs all over the city. I bring all of that to every cut — whether you're sat in a boardroom, a hotel suite, or your own kitchen. The cut is the same. So is the conversation. ``` Portrait moves from centre to upper-left, dimmed to 65% opacity. Story prose anchors right-side, max-width 480px. Asymmetric two-column. ### Section 05 — The Enquiry Bone bg, Ash type. ``` · 05 · THE ENQUIRY [Section marker] GET IN TOUCH. [Big Shoulders, Ash, centred] For corporate bookings, weddings, or single cuts. We respond inside one working day. · 01 · NAME ──────────────────────────── [Hairline input field] · 02 · EMAIL ──────────────────────────── · 03 · NATURE OF ENQUIRY ◯ CORPORATE ◯ WEDDING / EVENT ◯ SINGLE CUT [Radio buttons, Charge blue ring on selected] · 04 · TELL US BRIEFLY ──────────────────────────── ──────────────────────────── ──────────────────────────── [SEND ENQUIRY] [Primary CTA, Ash on Bone] ─── OR ─── DM @essentials on Instagram [Secondary, JetBrains Mono] ``` Form fields styled as kit-numbered rows. No traditional input boxes — the input IS the hairline. Brutalist clarity. --- ## 11. What this site is NOT — explicit refusals - **No barber pole.** Anywhere. Banned. - **No barbershop interiors.** Alan is mobile. - **No shots of haircutting in progress.** Banned register. - **No striped chairs.** Banned register. - **No vintage clipper photography.** Banned register. - **No scissors or comb still life.** Banned register. - **No before-and-after photos.** Wrong category. - **No client smiling in a chair.** Wrong category. - **No "as featured in" press logos.** No inventory to claim. - **No testimonials section.** No inventory to claim. - **No service-area map.** Geography is implicit, not listed. - **No FAQ.** A private practice doesn't FAQ. - **No pricing.** Pricing is the post-enquiry conversation. - **No phone number.** Not until Alan opts in. - **No social proof block.** The portrait IS the social proof. - **No "discover," "explore," "learn more"** language. Direct CTAs only. - **No Pexels, Unsplash, Pixabay, or any stock photography.** Ever. - **No AI-generated imagery on the site.** Real or nothing. - **No barber emoji, scissor emoji, hair emoji.** No emoji. The site is designed to QUALIFY readers, not to convert them. A reader who needs more reassurance than the centerpiece provides is not the right reader. --- ## 12. AI animation question — final answer **Resolved in V2 — no change.** No AI video on the site. The signature moment is code (SVG + GSAP). The portrait is a real photo when Alan shoots it; until then it's a designed placeholder. AI imagery is reserved for SEPARATE social content if/when needed (Phase 5+). It does not appear on the website. --- ## 13. Files this brief expects | File | Status | |---|---| | `04-website/copy-locked-v1.md` | ✓ Locked | | `04-website/DESIGN-BRIEF-V1.md` | ARCHIVED — superseded | | `04-website/DESIGN-BRIEF-V2.md` | ARCHIVED — superseded | | `04-website/DESIGN-BRIEF-V3.md` | ✓ This file — final | | `04-website/assets/asset-manifest.md` | UPDATING — purging Pexels | | `04-website/assets/pexels-shortlist.html` | DEAD — kept on disk for reference, removed from review bundle | | `04-website/site/` | Pending — Phase 4 fires on signoff | --- ## 14. What I need from you to greenlight Phase 4 build Three things. That's it. | # | Question | |---|---| | 1 | **Sign off on V3 direction.** Centerpiece composition, portrait placeholder, constellation pillars, Bloomberg-register typography. Yes / no / kill. | | 2 | **Confirm the portrait placeholder treatment** — Bone rectangle with Charge blue 1px border + drafting-cross-hatch interior + JetBrains mono caption. (Or specify a different placeholder treatment.) | | 3 | **Decide the brand availability + domain.** `essentials.com.au` available? If yes, that's our launch URL. If no, fallback name needed before public soft-launch. (Build proceeds against `essentials.pages.dev` regardless.) | Everything else from V1/V2 (locked copy, contact destination, real photo shoot timing, §5 conversational pass) is downstream of build, not a prerequisite for build. --- ## 15. Phase 4 build plan — five days ``` Day 1 — Astro 4 scaffold. All five sections shell built. Brand-kit tokens wired as CSS custom properties. Type loaded (self-hosted WOFF2). Locked copy dropped into placeholders. Day 2 — Section 01 centerpiece. Portrait placeholder rendered. Constellation positioned. Wordmark assembly + hairline draw + constellation reveal sequence built and timed. Day 3 — Section 02 disciplines panel cycle. ScrollTrigger drives panel appearance per pillar. Constellation label pulse states. Pin behaviour for portrait through Sections 01-02. Day 4 — Sections 03, 04, 05 — service, person, enquiry. Bone-reverse styling. Form built with kit-number row treatment. Portrait release transition in Section 04. CTAs wired (mailto: until contact destination is set). Day 5 — Performance pass. Reduced-motion. Mobile breakpoints. Lighthouse 95+. Self-audit against banned-patterns. Deploy to essentials.pages.dev. Send live URL. ``` --- ## 16. Stop and review V3 is final. One more "yes" from you and it ships. Do not respond with a fourth direction. The only acceptable replies are: - "Yes, build it." - "Yes, build it but change [specific element]." - "No — kill the project." Anything else costs a day. --- *V3 — 2026-04-27. Built against locked Essentials brand kit. Supersedes V1 and V2. Final unless killed.*