--- title: Essentials — Website Design Brief V1 project: Alan / Essentials mobile barber site version: 1.0 date: 2026-04-27 author: Built against jrvis-web-designer references (banned-patterns, signature-moments, layout-systems, motion-direction, state-of-the-art-2026) — applied to Alan's brand, NOT JRVS Atelier status: AWAITING NATHAN + ALAN APPROVAL → triggers Phase 4 build references: - copy-locked-v1.md - 03-mobile-barber/brand-kit/essentials-kit-number-system.html - 00-profile/profile.md - assets/asset-manifest.md - assets/pexels-shortlist.html --- # Essentials — Website Design Brief V1 A single-page editorial scroll. One signature moment. Seven sections, each a different shape. Built in Astro with GSAP + Lenis. Deployed to Cloudflare Pages. This brief is the source-of-truth. The build phase reads this file, picks no patterns not listed here, adds no sections not listed here, and writes no copy not in `copy-locked-v1.md`. --- ## 1. Thesis > **A barber that comes to you, built around five essentials — and a website that makes a barber visit feel like the start of a film, not a transaction.** The brand opportunity is that no Brisbane barber is operating at this register. Aesop / Le Labo / a small Bofill-coded design studio is the lane. The site has to land in the first three seconds: this is not a trade booking — this is a brand worth being seen with. --- ## 2. Signature moment — the hero Chosen first. Everything else hangs off it. This is the one moment a viewer screenshots. ### Name **The Cut.** ### What it does A 6-second cinematic open. No video, no AI footage, no stock. Pure code — SVG + CSS + GSAP. Fires on first paint. Auto-scrolls into the next section at completion. ### The 6-second timeline - **0.0s** — Black viewport. Single hairline (1px, brass `#B5894A`) appears at the left edge, vertical centre. - **0.0–1.5s** — The hairline draws horizontally across the entire viewport (left → right), at a Villeneuve pace. Drawing reads as a slow, deliberate cut. - **1.5–2.5s** — A scissor mark (SVG path, drawn in two strokes) appears at the centre where the line passed through. Path-draw animation, ~0.8s. The blades open to ~30°. - **2.5–3.5s** — The blades CLOSE. At the moment of closure, the brand line "Sharp cuts. House calls. Brisbane." mask-reveals from the cut line — the line acts as a slit through which the type emerges. - **3.5–5.0s** — Behind, a single still photograph (atmospheric, dark register — see asset manifest §A1) Ken-Burns drifts at 1.05× scale, slow. Type holds at full opacity. Sub-line ("For your office, your wedding, or a chair at home.") fades in below. - **5.0–6.0s** — Two CTAs render. Brass scroll cue appears at bottom centre. Page auto-scrolls to Section 02. ### The screenshot test A frozen frame at 3.0 seconds shows: hairline cut across viewport, scissor blades mid-close, brand line emerging from the cut, atmospheric photo Ken-Burns'd behind. That frame is the screenshot. ### The "what would be lost" test If the scissor cut is removed, the page becomes "another dark editorial site with type." The cut IS the brand metaphor. It earns its place. ### Banned-pattern check on signature moment - Not video-as-rectangle (it's full-bleed, code-driven) ✓ - Not staggered reveal cascade (one moment, then the page renders normally) ✓ - Not horizontal marquee phrase ticker ✓ - Not "considered cinematic" template (every keyframe is brand-specific — scissors, cut, mask) ✓ --- ## 3. Page structure — seven sections, each a different shape Per banned-patterns.md §1, no two sections share composition, ground, type placement, or motion behaviour. Below: each section's name, layout pattern (LS-cited), motion behaviour, ground. | # | Section | Layout pattern | Ground | Motion | |---|---|---|---|---| | 01 | **Hero** | Fullbleed centre-stage with auto-timeline | Atmospheric photo + scissor mark | Signature moment (one-time) | | 02 | **Corporate** | Asymmetric split: prose-left / pinned-card-stack-right | Solid `#0B0B0A` | Pinned scrub on cards, GSAP timeline | | 03 | **Five Pillars** | Vertical pinned snap — each pillar is one viewport | Rotating photo grounds (5 different) | ScrollTrigger snap, photo crossfade | | 04 | **Alan** | Tall portrait left / wide prose right (asymmetric 40/60) | Single full portrait, no overlay | Static. The only section without motion. | | 05 | **Single cuts** | Single-column, oversized type bleeds off both edges | Solid `#0B0B0A` | Type-bleed parallax on scroll | | 06 | **Kit** | Horizontal scroll-to-reveal track (SM-02), 6 atmospheric stills | Photo gallery as ground | Pinned + horizontal scrub | | 07 | **Contact** | Number-led opener (LS-15) — large numerals 01/02/03 mark form fields | Solid `#0B0B0A`, brass accents | Static. No reveal cascade. | ### Why this sequence - **01 Hero** earns attention with the cut. - **02 Corporate** monetises that attention immediately — the buyer with the budget sees their offer without scrolling further. - **03 Pillars** declares the brand once the commerce has been seen — qualifies the reader. - **04 Alan** earns trust — the human behind the brand. - **05 Single cuts** opens the second door for the IG-native individual. - **06 Kit** is proof, not pitch. - **07 Contact** closes. --- ## 4. Ground rhythm The sequence of grounds is what makes the page feel like seven different rooms, not one corridor. ``` 01 PHOTO + CUT (atmospheric, the most styled) 02 SOLID BLACK (sober, type-led) 03 PHOTO ROTATING (5 different photo grounds inside one section) 04 PORTRAIT (the only face on the entire site) 05 SOLID BLACK (sober, type-led — second sober beat) 06 PHOTO GALLERY (6 photos as horizontal track) 07 SOLID BLACK (closing, type-led) ``` Photo / Solid / Photo / Portrait / Solid / Gallery / Solid. Three solids, three photo treatments, one portrait. No two adjacent sections share a ground type. --- ## 5. Type composition ### Stack (FRESH — not Cormorant / Inter / JetBrains; not the Variations A-C placeholder serif) | Role | Face | Source | Why | |---|---|---|---| | Display serif | **Fraunces** (variable, SOFT 0–100, opsz 9–144, wght 100–900) | Google Fonts — free | Editorial weight without the Cormorant tell. Variable axes let us hit a soft, Bofill-coded register at large sizes and a clean, modern register at small. | | Body sans | **General Sans** (regular + medium) | Fontshare — free, OFL | Designed for editorial use. Not Inter. Not Manrope. Not the agency-default grotesque. | | Mono / micro | **Commit Mono** (regular) | Free, OFL | For metadata, kit labels, micro-caps. Not JetBrains. Not Geist Mono. | ### Composition rules - **Display 1** (hero brand line, single-cut headline): Fraunces SOFT 70, opsz 144, wght 350 — soft, editorial, expressive. - **Display 2** (section headlines): Fraunces SOFT 30, opsz 96, wght 400 — slightly tightened for headline use. - **Body**: General Sans 16px regular, line-height 1.6. - **Micro**: Commit Mono 11px, letter-spacing 0.18em, uppercase — for tags, meta labels, kit names. - **Hero brand line aligned centre.** All other section headlines aligned LEFT — the hero is the only centred type on the site. ### Bleed behaviour Section 05 (Single cuts) — display type sized at clamp(8rem, 18vw, 18rem), bleeds off both viewport edges. The reader's eye scans across, not down. This is the type-as-art moment. --- ## 6. Colour tokens Fresh palette. Not Atelier. Not the placeholder accent from Variations A-C. | Name | Hex | Role | Defence | |---|---|---|---| | Char | `#0B0B0A` | Background. Slightly warmer than pure black. | Pure `#000` reads as void. Char reads as ink. | | Bone | `#EDE6D6` | Primary text. Warm off-white, not gray. | Bone has temperature. Gray on black reads as mortuary. | | Ash | `#7A7268` | Secondary text, captions. Warm mid-gray. | Carries the same warmth as Bone, two values darker. | | Brass | `#B5894A` | Accent — the cut line, CTAs, hover states. | Desaturated brass, not cognac (Atelier-coded), not the placeholder beige `#c8b994`. Reads as scissors-as-tool, not jewellery. | | Blade | `#A8B0B6` | Cool-gray secondary accent. Lines, strokes, the geometric mark. | The "blade" register — cool against the warm Brass. Two-accent system. | | Line | `#1F1D1B` | Hairline borders. | One step above background, just visible. | ### Contrast ratios - Bone on Char: 14.8:1 ✓ AAA - Ash on Char: 5.2:1 ✓ AA large text - Brass on Char: 6.1:1 ✓ AA - Brass on Bone: 3.4:1 ✓ AA large only — used only at Display sizes for accents --- ## 7. Motion direction Per `motion-direction.md` — register is FILM not AD. Villeneuve / Burtynsky / Tarkovsky atmospheric reference, not Studio Freight kinetic. ### Per-section motion | Section | Motion behaviour | Purpose | |---|---|---| | 01 Hero | Signature moment — scissor cut + Ken-Burns + auto-scroll | The page's screenshot | | 02 Corporate | Pinned scrub on right cards as left prose holds | Reader controls pace, the section reveals as they scroll | | 03 Pillars | ScrollTrigger snap — each pillar locks the viewport for ~70vh of scroll, then snaps to the next | Each pillar gets its full beat, no scroll-through-too-fast | | 04 Alan | Static. No motion. The only motionless section. | Trust requires stillness. | | 05 Single cuts | Type-bleed horizontal parallax — the bleed type drifts ~30px on scroll | Subtle. Not a marquee. | | 06 Kit | Pinned + horizontal scrub on the track of 6 stills | Atmosphere accumulates as the reader scrolls | | 07 Contact | Static. Numerals appear at render. No reveal cascade. | The close is sober. | ### Lenis smooth-scroll across the entire site Default Lenis settings. Slight inertia, natural deceleration. NOT exaggerated buttery scroll — that's the Studio Freight tell. ### Banned-pattern check on motion - No reveal cascade on every element ✓ (only Section 03 + 06 use scroll-driven motion; the rest render static) - No rectangle video ✓ (no video at all) - No marquee phrase ticker ✓ - No same motion on every section ✓ (each section's motion behaviour differs) - No "cinematic" footage of cars/coast/sunsets ✓ (no footage at all) --- ## 8. Interaction behaviour | Interaction | Behaviour | |---|---| | Cursor | Default. No custom cursor. (Custom cursor is the print-collateral tell — it earns nothing on a one-pager.) | | Hover on CTA | Brass border solid → Brass fill, Bone text → Char text. 200ms ease-out. No scale. | | Hover on pillar (section 03) | Pillar number scales from 1.0 → 1.04, brass underline draws under the pillar name. 250ms. | | Focus state | Brass 2px outline, offset 2px. Visible always for keyboard nav. | | Scroll cue (hero) | Brass hairline 1px × 24px, vertical, centred bottom. Pulses every 1.5s at low amplitude. Fades on first scroll. | | Page transitions | None — single page. View Transitions API used only for the hero auto-scroll handoff. | | Mobile | All scroll-pinned sections fall back to vertical-stack at <720px. Signature moment still fires (scissor cut + mask reveal); the photo Ken-Burns becomes a static still on small screens. | --- ## 9. Placeholder copy slots All copy lives in `copy-locked-v1.md`. The build phase reads from there. No copy gets drafted in code. Slots: - Hero brand line + sub-line + 2 CTAs - Corporate headline + lede + 3 cards × (title + body) + 1 CTA - Pillars headline + sub + 5 × (name + line) - Alan headline + 2 paragraphs - Single cuts headline + body + 1 CTA - Kit caption (one line) - Contact headline + body + form (4 fields) + 2 CTAs --- ## 10. Technical notes ### Stack - **Astro 4+** (file-based routing, partial hydration, View Transitions) - **GSAP 3** + ScrollTrigger (free version covers all patterns above) - **Lenis** (smooth scroll) - **Vanilla CSS** (no Tailwind — too generic, ships utility-class noise; for a one-pager a hand-written CSS file is sharper) - **No JS framework.** Astro's island model is enough. No React, no Vue. - **Fonts** loaded via `@font-face` from self-hosted WOFF2 (no Google Fonts CDN — privacy + no FOIT). ### Performance budget - LCP <1.8s on 3G fast - Total JS payload (incl. GSAP + Lenis) <90KB gzipped - Hero photo: WebP, max 200KB, served at multiple sizes via `` srcset - All other images: WebP, max 120KB each - Zero render-blocking third-party scripts ### Accessibility - Reduced-motion: scissor cut still happens but in 0.4s instant transition; Ken-Burns disabled; Lenis disabled - Keyboard nav: tab order matches visual flow - All form inputs labelled, focus rings visible - Contrast ratios per Section 6 ### Hosting - **Cloudflare Pages** - Project name: `essentials` (separate from `essentials-website` which holds variations + copy direction) - URL: `https://essentials.pages.dev` initially → `essentials.com.au` once Alan locks the brand availability check (Track B prerequisite) --- ## 11. Reference studies Five reference sites — what we pull from each, NOT the aesthetic. | Site | Technique pulled | |---|---| | **exoape.com** | Single-canvas pacing — one continuous scroll, no page breaks, type-as-architecture | | **locomotive.ca** | Pinned scrub for stage swaps — cinematic timing on internal section transitions | | **studio-freight.com** | Lenis tuning, type-bleed at viewport edges (NOT the marquee — the bleed) | | **areadelectronica.com** | Photo Ken-Burns over dark, type-as-poster composition for hero | | **bakkenbaeck.com** | Asymmetric two-column splits with controlled negative space — Section 04 layout | NOT pulled: any Aesop or Le Labo site (we already inherit that brand register from the strategic brief — no need to copy structurally). No Awwwards-current — those reset every quarter and the patterns drift. --- ## 12. Banned-pattern audit Checked against `references/banned-patterns.md`. Each item: - **§1 Same-section-shape-twice:** ✓ Each of 7 sections uses a distinct composition (Section 3). - **§2 Hero + 4 stacked + CTA + footer:** ✓ Layout is asymmetric per-section, not stacked-blocks. - **§3 Thumbnail video inside content block:** ✓ No video. Anywhere. - **§4 Reveal cascade on every element:** ✓ Only Sections 03 and 06 use scroll-tied motion; rest render static. - **§5 Horizontal marquee phrase ticker:** ✓ Section 05 type bleed is parallax, not marquee. - **§6 Em-dash capability list:** ✓ No capabilities list. Three offers in Section 02 are framed as scenarios, not services. - **§7 Italic verb accents:** ✓ Italics used only in pillar definitions, intentionally. - **No emojis, no exclamation marks, no rounded cards, no gradients, no drop shadows:** ✓ All locked at 0. --- ## 13. Confidence score **8.5 / 10.** Risk areas: - The signature moment (scissor cut + mask reveal) requires careful animation timing. A bad cut beats no cut. Build phase needs ~1 day on the hero alone. - Section 04 portrait — placeholder Pexels man does NOT match Alan. Real photo of Alan is required before public launch. Brief includes asset manifest with placeholder picks for development; replace before share. - Pillars assumed to be Craft / Accountability / Recovery / Movement / Welcome. Alan locks. If he swaps two, copy file updates and rebuild is trivial. - Domain availability — `essentials.com.au` not yet checked. Build deploys to `essentials.pages.dev` in the meantime. --- ## 14. AI animation question — direct answer **For the website hero: no AI video.** Reasons: 1. AI video has uncanny artefacts that telegraph "AI" — kills the editorial register on a craft-led brand. 2. Code-driven SVG/CSS animation is sharper at any resolution, scrolls perfectly with GSAP, ships at zero file size. 3. Real footage > AI footage > stock footage for atmosphere — but we don't need any footage. The cut metaphor works in code. **For social content (separate from this site, future phase):** AI video is fine. Tools to use: - **Runway Gen-4** — best for cinematic 5-10s clips, paid (~$15/mo entry). - **Sora (OpenAI)** — top tier quality, paid. - **Kling AI** — strong free tier for short clips. - **Luma Dream Machine** — good for atmospheric drift / Ken-Burns simulation. - **Veo 3 (Google)** — newest, very high quality. **For brand film (a 60-90s atmospheric piece for IG / YouTube):** worth considering after the site ships. Can mix AI b-roll with real footage of Alan in chair. Phase 5. --- ## 15. Files this brief expects to exist | File | Status | Owner | |---|---|---| | `04-website/copy-locked-v1.md` | ✓ Locked 2026-04-27 | This session | | `04-website/DESIGN-BRIEF-V1.md` | ✓ This file | This session | | `04-website/assets/asset-manifest.md` | ✓ This session | This session | | `04-website/assets/pexels-shortlist.html` | ✓ This session | This session | | `04-website/site/` | Pending — Phase 4 build | Next session, after brief approval | | `04-website/site/public/photos/*.webp` | Pending — Phase 4 | After Pexels picks confirmed | | `04-website/site/public/fonts/*.woff2` | Pending — Phase 4 | Self-hosted Fraunces / General Sans / Commit Mono | --- ## 16. What I need from you and Alan before Phase 4 build | # | Question | Owner | |---|---|---| | 1 | Sign off on `copy-locked-v1.md` (or flag specific lines for v2) | Alan | | 2 | Confirm the Five Pillars (Craft / Accountability / Recovery / Movement / Welcome) — keep, swap, or replace any | Alan | | 3 | Confirm signature moment — SVG scissor cut + Ken-Burns drift + mask-reveal type — vs an alternate hero direction | Alan + Nathan | | 4 | Confirm Pexels shortlist picks (see `assets/pexels-shortlist.html`) — choose 1 hero photo, 1 portrait placeholder, 5 pillar grounds, 6 kit gallery shots | Alan + Nathan | | 5 | Brand availability check — `essentials.com.au` domain, `@essentials` IG/TT handles, AU trademark sweep | Nathan to action | | 6 | Contact form destination — which inbox does the form route to? | Nathan to confirm | | 7 | Real Alan photo shoot — does it happen before launch or after soft-launch with placeholder? | Nathan + Alan | | 8 | §5 conversational pass — required before any voice-shaping pass on copy lines. Does NOT block the build (placeholders are locked). | Nathan + Alan | --- ## 17. Phase sequencing ``` Phase 1 — Profile lock ✓ DONE (v1, awaiting Alan review) Phase 2 — Brand kit ✓ DONE (Kit Number system) Phase 3 — Business plan ✓ DONE (v1) Phase 3.5 — Copy direction ✓ DONE (locked v1) Phase 3.7 — DESIGN BRIEF ← THIS FILE Phase 4 — Build site Pending — gated on brief approval Phase 5 — Brand film + social Pending — post-launch ``` --- ## 18. Stop and review This brief stops here. The next prompt is "approved, build it" or "rework these sections." The build phase reads this file + the locked copy + the asset manifest, scaffolds Astro, lays out the seven sections, wires GSAP + Lenis, drops in placeholder photos, and deploys to `essentials.pages.dev`. No code gets written until this brief is signed. --- *V1 — 2026-04-27. Built against jrvis-web-designer references applied to Alan / Essentials brand. Awaiting Nathan + Alan review.*