# About Page — DeepDrft public site — Design Spec Status: **proposed — copy largely settled** (2026-06-17). Author: product-designer. Date: 2026-06-17. Implementer: staff-engineer (when approved). Surface: **public site only** (`DeepDrftPublic` / `DeepDrftPublic.Client`). > **Copy status (2026-06-17 review):** A, B, C, E, D-intro, F, G, H are **APPROVED** — Daniel's > verbatim words, set. **D (Process card bodies) is a fresh DRAFT** pending Daniel's pass (redrafted > per his "spice it up, no Octave One" direction). **Khabran's bio is still TODO.** Remaining open > items (Khabran's bio, final photos, image hosting path, hero title wording, "designed not > extracted" placement) are being resolved separately. Approved blocks ship as written; the one > remaining draft (D) does not ship without Daniel's pass. Cross-references: `Pages/Home.razor` + `Pages/Home.razor.css` (the visual language this page mirrors — inspected, not invented), `Controls/DeepDrftHero.razor` (hero type treatment), `DeepDrftShared.Client/Components/ParallaxImage.razor` (the full-bleed image idiom), `PLAN.md §12` (the concise phase entry). Plan only — no code edits made by this doc. --- ## 0. Goal and shape A real About page with three movements — **the People**, **the Process**, **the Product** — with ethos / pathos / logos woven through the prose rather than bolted on as a labelled block. It reads as a continuous editorial scroll in the **exact visual language of the Home page**, not a new look. The strategic intent (Daniel's framing, paraphrased): the site is *presentation and proof of effort* — evidence that real people in the Charleston scene are pushing classic club sounds forward. The About page is where that claim is made explicit. It is the page that earns the catalogue. Route: `/about`. Linked from the main menu (`DeepDrftMenu` / `Pages.cs` nav index) and a natural target for the Home page's existing copy about the collective. --- ## 1. The look — mapped to the Home page (inspected, not invented) The Home page (`Pages/Home.razor`) is built from a small, repeating set of section primitives. The About page reuses them verbatim so the two pages are visually continuous. Every class below is one the Home page already renders (scoped in `Home.razor.css`, mirrored in the global `deepdrft-styles.css`). **No new visual vocabulary is proposed** — the only genuinely new styling need is two member-bio cards (§4), and even those should be assembled from existing spacing/type tokens before any bespoke class is added. The Home primitives, in the order they appear there, and how each maps onto About: | Home primitive | Classes | Role on Home | Reuse on About | |---|---|---|---| | **Split hero** (50/50 grid) | `.hero`, `.hero-left`, `DeepDrftHero` | Title + NowPlaying panel | The About hero — left column carries the eyebrow + title + standfirst; right column carries the **duo hero portrait** (see §3) | | **Full-bleed parallax band** | `` | Duo photo under the hero | The duo shot or a hands-on-gear shot as the hero's full-width anchor | | **Section divider** | `.section-divider`, `.divider-line`, `.divider-tag` | "The Sound" rule between movements | One divider per movement boundary — `The People` / `The Process` / `The Product` are the three `.divider-tag`s | | **Two-column section** | `.section`, `.section-header-grid`, `.section-label`, `.section-title`, `.section-body` | "Music through Every Medium" (label+title left, prose right) | The default body rhythm for each movement — label + serif title on the left (md=4), prose on the right (md=8) | | **Dark feature band** | `.section-dark`, `.section-label-dark`, `.section-title-dark`, `.features-grid`, `.feature-card` | "Built for the Committed Listener" | **The Process** gear/method band — the dark ground suits the warehouse/rig material; the `feature-card` grid becomes the gear-stage cards (§5) | | **Split section** | `.section-split`, `.split-left`, `.split-right`, `.split-eyebrow`, `.split-title`, `.split-body` | "Where the Holy City Meets the Future" (prose left, parallax portrait right) | The **People** origin/meeting story (prose + a portrait) and the **Product** "on the street, in the swamp" turn | | **CTA banner** | `.cta-banner`, `.cta-headline`, `.cta-sub`, `.cta-actions`, `.btn-white`, `.btn-outline-white` | "Ready to Drift Deeper?" | Closing CTA into the catalogue / archive | | **Trailing parallax** | `` (`mixer.jpg`) | Closing image | A closing hands-on-gear band | **Type and palette** are inherited automatically — these classes already encode the Bodoni Moda / Cormorant / DM Sans stack and the light/dark palettes. `` inside `.section-title` / `.split-title` / `.cta-headline` is the established italic-serif emphasis device (Home uses it on *Every*, *Committed Listener*, *Meets the Future*, *Drift*). The About titles should use the same device on one word per title, not more. **Hero title treatment.** `DeepDrftHero` hard-codes "Deep / DRFT" — do **not** reuse the component verbatim for About (it carries the streaming CTA and the home masthead). Instead reuse its **CSS classes** (`.hero-eyebrow`, `.hero-title`, `.hero-subtitle`, `.hero-desc`) directly in the About hero markup so the type scale matches, with About's own words. (The `@AnimClass` fade-up-on-prerender trick in `DeepDrftHero` is worth copying for the eyebrow/title if Daniel wants the same entrance.) --- ## 2. Page structure and section order The scroll, top to bottom. Movements are bounded by `.section-divider` tags so the three-movement structure is legible without a heading that says "Movement One." ``` ┌─ HERO (split 50/50) ──────────────────────────────────────────┐ │ left: eyebrow "Charleston, South Carolina" │ │ title "Deep DRFT" or "Who We Are" │ │ standfirst (the ethos line, condensed) │ │ right: DUO HERO PORTRAIT [IMG SLOT A — likely hero] │ ├─ full-bleed parallax band [IMG SLOT B — duo or gear] ─────────┤ │ │ │ ── divider: "The People" ── │ │ SECTION (two-col): label "The Collective" + title; │ │ prose: how they met / shared synths / shared taste │ │ MEMBER BIO PAIR (two cards): [IMG SLOT C1 — Khabran] │ │ [IMG SLOT C2 — Daniel] │ │ each: portrait + name + role line + bio (drop-in slot) │ │ SPLIT section (origin/meeting story + portrait) — optional │ │ │ │ ── divider: "The Process" ── │ │ SECTION-DARK: label "How It's Made" + title; │ │ gear-stage cards (feature-grid): │ │ Sketch → Arrange → Studio → Live Rig │ │ full-bleed parallax band [IMG SLOT D — hands on gear] │ │ │ │ ── divider: "The Product" ── │ │ SECTION (two-col): label "The Output" + title; │ │ prose: the catalogue as evidence │ │ MEDIUM TRIPTYCH (optional reuse of Home's medium-card grid): │ │ CUTS / SESSIONS / MIXES — brief frame each │ │ SPLIT section: "...on the street, in the swamp" — live │ │ identity beyond the releases │ │ │ │ CTA banner: into the archive / catalogue │ │ trailing parallax [IMG SLOT E — gear/atmosphere] │ └────────────────────────────────────────────────────────────────┘ ``` **Why this order.** Ethos / pathos / logos are not three sections — they are three registers carried *through* the three movements: - **The People** carries the **pathos** — heart and soul, the metalhead-at-heart, music for strife and celebration, two people who met over synthesizers. - **The Process** carries the **logos** — the gear, the method, "science and math is just as important as beauty," the soul that is *designed, not extracted*. The dark band's analytical feel fits this register. - **The Product** carries the **ethos** — the claim and the proof: classics with a twist, the catalogue as evidence, the collective's place in the Charleston scene, and the live identity ("on the street, in the swamp"). The triad is woven, not labelled. No section is titled "Our Ethos." --- ## 3. The hero Mirror Home's `.hero` split. - **Left (`md=6`, `.hero-left`):** eyebrow + title + standfirst, using the `.hero-*` classes. - Eyebrow: `Charleston, South Carolina` (matches Home's hero eyebrow — anchors place immediately). - Title: a one-or-two-word masthead with the `` device. Candidate: **"Who We Are"** or simply **"The Collective"**. (Header — proposed, not copy.) - Standfirst: the condensed ethos line — see `[COPY A]` below. - **Right (`md=6`):** **IMG SLOT A — the duo hero portrait.** This is the **likely hero image**. A duo shot reads "two people, a collective" at first paint. Aspect: landscape or square works in the split column; if a strong landscape duo file exists, prefer it. (Home uses `dd-duo-hero.jpeg` / `dd-duo-hero-bw.jpeg` as a 2048×1365 landscape pair in the full-bleed band — About could either reuse that pair in the band and put a *different* duo shot in the hero column, or promote it.) Below the hero, a **full-bleed `` band** (IMG SLOT B) exactly as Home does under its hero. The bw/colour hover-crossfade pair (`Image1` + `Image2`) is the established idiom — supply both a bw and a colour file per slot where available (Home pairs `dd-duo-hero-bw` + `dd-duo-hero`). > `[COPY A — APPROVED — standfirst]` > Two people, many hats. We bring the heart and soul of Midwest deep house to Charleston — informed > by the founders of the style, and promising to push it forward. --- ## 4. The People **Divider tag:** `The People`. **Intro (two-column `.section`):** `.section-label` "The Collective" + `.section-title` with the origin/meeting hook; prose in the right column about how they met (exchanging synthesizers, realising they made and enjoyed similar music) and that both members wear every hat — music, sound design, arranging, producing, mixing, field recording, visual design, custom sound tools. > `[COPY B — APPROVED — People intro]` > We met trading synthesizers and found out we were seeking the same thing. Two of us, no fixed > roles — we both write, arrange, produce, mix, record in the field, build the visuals, and make the > tools when the tools don't exist yet. ### 4.1 Member bio pair Two bio cards, side by side (`MudGrid`, `xs=12 md=6`). **Each member's bio text is a drop-in slot** — Daniel supplies the prose per member; the spec reserves the slot and the layout. Per card: - **Portrait** — IMG SLOT C1 (Khabran), IMG SLOT C2 (Daniel). Portrait orientation (the existing `kp-shoulder-bw.jpeg` is 1365×2048 portrait — that aspect is the precedent). Bw or colour; recommend bw to match the editorial restraint of the rest of the site, with an optional colour-on-hover via the parallax/crossfade idiom if these become `ParallaxImage`s. - **Name** — `Khabran Peters`, `Daniel Harvey` (display serif, e.g. `.section-title` scale stepped down, or a dedicated `.bio-name` token if needed). - **Role line** — both are "everything," so the role line should state that rather than a single title. Candidate label: *Production · Sound Design · Live* (proposed UI label, not copy). - **Bio body** — `[BIO SLOT — Daniel supplies per member]`. > **Khabran's bio is an OPEN TODO** — Daniel will add it later (open question §8). Daniel's bio > material exists in the interview transcript and is drafted below for approval; **Khabran's card > renders its slot empty / with a placeholder until his text arrives.** Design the card so a missing > bio degrades gracefully (portrait + name + role line still compose; the body block simply absent) — > the same null-renders-nothing discipline `ReleaseDescription` uses. > `[COPY C — APPROVED — Daniel bio, Daniel's words verbatim; Khabran's TBD]` > Daniel started on drums at ten and embarked in electronic music at seventeen — synthesizers first. > A metalhead at from a young age, he spent ten years as an engineer living near Detroit filling the > nights with synthesized tones and rhythms, shaped most of all by modern underground Detroit techno. > Art & engineering cannot be separated: custom plugins, hardware recording & performance rigs, the > tools behind the tracks are just as important as the finished sound. To him the science and the > math matter as much as the beauty — tension and release, built deliberately. > **Typo flags (for Daniel's confirmation — text preserved verbatim above, not auto-corrected):** > (1) "embarked **in** electronic music" reads as a likely slip for "embarked **on**"; (2) "A > metalhead **at from** a young age" reads as a likely slip for "A metalhead **from** a young age." > Both left as Daniel wrote them — his to confirm or keep. ### 4.2 Optional split — the meeting / origin If the bio pair runs short, a `.section-split` (prose left, portrait right — IMG could reuse the duo shot or a second portrait) carries the meeting story and the pathos register: *underground art by real people, for real people, for strife and celebration.* Mark optional — fold into the intro prose if Daniel prefers a tighter People movement. --- ## 5. The Process **Divider tag:** `The Process`. Reuse Home's **dark band** (`.section-dark`). `.section-label-dark` "How It's Made" + `.section-title-dark` (e.g. *Digital, Analog, Whatever Moves*). The dark ground gives the gear/method material its own visual chapter and reads as the analytical (logos) register. **Gear-stage cards** — reuse the `.features-grid` / `.feature-card` structure (Home uses four cards; About uses the same count). These are not "features we offer" but **stages of the process**, each with a hand-rolled SVG icon in the existing `.feature-icon` slot: 1. **Sketch** — start on the Akai Force or MPC Live 3. 2. **Arrange** — into Ableton, or the whole thing in REAPER (heavy REAPER users). 3. **Studio** — an arsenal of synths and pedals; digital and analog, hard and soft, some custom-made. 4. **Live Rig** — a big spread of hardware played 100% live, DAWless, sometimes fully improvised. Built for the room / the warehouse. > `[COPY D — FOR APPROVAL — Process card bodies — REDRAFT per Daniel's "spice it up, no Octave One" note]` > 1. *Sketch — A loop starts on the Force or the MPC, hands on the pads. The idea has to survive > first contact before anything else gets built around it.* > 2. *Arrange — Sometimes into Ableton, sometimes start-to-finish in REAPER. The track gets shaped > wherever it wants to go — we follow the take, not the template.* > 3. *Studio — A deep bench of synths, drum machines, and pedals; digital and analog, hard and soft, > some of it built by hand. If the sound we need doesn't exist yet, we make the thing that makes it.* > 4. *Live Rig — No laptop, no safety net. A full spread of hardware patched together and played > 100% live — sequenced, twisted, and pushed in the moment. Built for the room, the warehouse, the > night that doesn't repeat.* > `[COPY D-intro — APPROVED — Process standfirst, optional]` > It doesn't matter how — digital or analog, hard or soft, bought or built — as long as it moves > the room. The soul in this music is designed, not extracted; assembled, not distilled. (The "designed, not extracted / assembled, not distilled / constructed, not grown" line is the sharpest statement of the logos register and the soul-is-engineered thesis. Recommend it land here, in the Process movement, rather than the hero — it's the *why behind the method*, and it pays off the dark band. Flag for Daniel: hero standfirst vs. Process — his call.) Below the dark band: a **full-bleed parallax** (IMG SLOT D — **hands-on-gear shot**, the literal proof-of-effort image). Home's trailing `mixer.jpg` / `mixer-bw.jpg` pair is the precedent. --- ## 6. The Product **Divider tag:** `The Product`. Two-column `.section`: `.section-label` "The Output" + `.section-title` (e.g. *Classics, with a Twist*); prose framing the catalogue as the evidence — what the site is *for*. > `[COPY E — APPROVED — Product intro]` > Everything ends up here, in the catalogue. It's proof people in Charleston are pushing the sound > of the club. ### 6.1 Medium triptych — CUTS / SESSIONS / MIXES on About — **RESOLVED: yes, cards** **RESOLVED (2026-06-17, per COPY F approval): use the cards.** The medium triptych reuses Home's `.medium-grid` / `.medium-card` grid, with a one-line frame of each medium, each linking to `/cuts`, `/sessions`, `/mixes`. The About page is where a newcomer reading top-to-bottom learns *what a "Session" is* vs. a "Mix," and the medium cards are the established device for it. Copy is one line per medium (a frame, not a re-pitch) so it reads as *definition*, not a second sales section. (Alternative considered and rejected: prose-only mention with no cards. Rejected because it loses the concrete payoff at the end of the Product movement and pushes the taxonomy explanation off the page.) > `[COPY F — APPROVED — medium one-liners]` > - CUTS — studio work, composed and finished. > - SESSIONS — live, caught once, never the same twice. > - MIXES — uninterrupted sets, start to finish. ### 6.2 The live turn — "on the street, in the swamp" Close the Product movement with a `.section-split` (or a second short band) carrying the live/public identity — the part of the collective that isn't a release at all. > `[COPY G — APPROVED — live identity]` > But that's just the releases. We're also out there — on the street, in the swamp, with a PA, a > generator, and a bunch of good vibes. --- ## 7. Closing CTA Reuse Home's `.cta-banner`. Headline with the `` device; one primary + one ghost action. - Primary (`.btn-white`): **Explore the Archive** → `/archive`. - Secondary (`.btn-outline-white`): **Hear a Cut** / **Start Streaming** — reuse `StreamNowButton`'s behaviour if a streaming CTA is wanted, or link to `/cuts`. (Home's CTA pairs "Explore the Archive" + a live-schedule button; About should point inward to the catalogue, the thing it just argued for.) > `[COPY H — APPROVED — CTA]` > Headline: "Hear the Proof" / sub: "The catalogue is the evidence. Start listening." Trailing full-bleed parallax (IMG SLOT E) to close, matching Home's structure. --- ## 8. Image slots — summary table 5 slots specced; 4–5 photos expected. **Daniel is still sorting final files — treat every slot as a TODO; do not block on them.** Each slot degrades to the existing fallback treatment (or a bw placeholder) until a file lands. | Slot | Section | Role | Orientation / aspect | bw+colour pair? | Likely file | |---|---|---|---|---|---| | **A** | Hero right column | **Likely HERO** — duo shot, "two people" at first paint | Landscape or square (fits `md=6`) | Optional (hover crossfade) | a duo shot; could promote `dd-duo-2.jpeg` | | **B** | Full-bleed band under hero | Atmosphere / duo anchor | Landscape ~2048×1365 (Home precedent) | **Yes** (Home pairs bw+colour) | `dd-duo-hero` pair (or a new duo/gear shot) | | **C1** | People — bio card | Khabran portrait | Portrait ~1365×2048 | Optional | Khabran portrait (TODO) | | **C2** | People — bio card | Daniel portrait | Portrait ~1365×2048 | Optional | Daniel portrait (TODO) | | **D** | Process — band under dark section | **Hands-on-gear** (proof of effort) | Landscape | Yes | a gear shot (or reuse `mixer` pair) | | **E** | Closing trailing band | Atmosphere close | Landscape | Yes | gear/atmosphere | If only 4 files arrive, the two safe drops are slot B (the hero column A already carries a duo shot) and slot E (the closing band is decorative). The two bio portraits (C1/C2) and one gear shot (D) are the load-bearing four. ### Image hosting — OPEN QUESTION for implementation **Where do these images physically live, and by what path are they served?** Two precedents exist in the repo and they differ: - **Static `wwwroot/img/`** — every Home page image (`dd-duo-hero.jpeg`, `mixer.jpg`, etc.) is a committed static asset under `DeepDrftPublic/wwwroot/img/`, referenced as `img/...`. Simplest; these are brand/marketing assets, not catalogue content. **This is the likely right home** for the About images by direct analogy to Home. - **Image vault / streaming endpoint** — release cover art and session hero images go through the FileDatabase Image vault and the unauthenticated image-streaming endpoint. That machinery is for *content* (covers, hero images tied to releases), not chrome. The About portraits are chrome. **Recommendation (flag, do not resolve):** put the About images in `wwwroot/img/` alongside the Home assets — they are marketing chrome with the exact lifecycle of the existing Home photos. Only reach for the vault if Daniel wants these editable from the CMS, which the brief gives no signal of. **This is staff-engineer's call at implementation; named here so it isn't discovered mid-build.** --- ## 9. Open questions (for Daniel) 1. **Khabran's bio.** Not yet supplied — the card renders its body slot empty/placeholder until it arrives. Daniel's bio is drafted from the transcript (`[COPY C]`); both are his to finalise. 2. **Final photos.** 4–5 files still being sorted; every image slot is a TODO. Spec is laid out so placement is ready when files arrive (§8). 3. **Image hosting path.** `wwwroot/img/` (recommended, Home-analogous) vs. the image vault. Flagged for staff-engineer; recommendation in §8. 4. **CUTS / SESSIONS / MIXES — explained on About?** **RESOLVED (2026-06-17): yes, via the one-line-per-medium `.medium-card` grid (§6.1), per COPY F approval.** 5. **Where does the "designed, not extracted" thesis land** — hero standfirst or the Process movement? Recommend Process (§5). *(Still open — Daniel resolving separately.)* 6. **Hero title wording** — "Who We Are" vs. "The Collective" vs. a Deep/DRFT masthead echo. Header is proposed; Daniel's call. *(Still open — Daniel resolving separately.)* 7. **Copy status (2026-06-17 review):** A, B, C, E, D-intro, F, G, H are **APPROVED** (Daniel's verbatim words). **D (Process card bodies) is a fresh DRAFT** pending Daniel's pass. **Khabran's bio is still TODO** (item 1). Two suggested typo-fixes in COPY C are flagged inline for Daniel's confirmation; his text is preserved verbatim. --- ## 10. Implementation notes (for staff-engineer, when approved) - **No new visual language.** Assemble from the Home primitives in §1. The only candidate new classes are the two bio-card pieces (`.bio-name`, `.bio-role`, `.bio-body` or similar) — and even those should first be tried with existing type tokens before adding scoped CSS to a new `About.razor.css`. - **Hero:** reuse the `.hero-*` classes directly (About's own words), **not** the `DeepDrftHero` component (it hard-codes the masthead + streaming CTA). - **Page-scoped CSS:** follow Home's pattern — `About.razor.css` scoped, mirrored into the global `deepdrft-styles.css` only for anything that must reach beyond the component (Home does this for the section primitives; the About page should *consume* those, not re-declare them). - **ParallaxImage:** supply `NaturalWidth`/`NaturalHeight` for every above-the-fold band to avoid the documented layout shift (component remarks); pass the bw+colour `Image1`/`Image2` pair where files allow. - **Nav:** register `/about` in `Pages.cs` (the centralised nav index) so it appears in `DeepDrftMenu`. - **Null-safe images/bios:** every image slot and Khabran's bio must degrade gracefully (fallback or absent block) — the page must compose correctly before any final file or Khabran's text lands. - **Out of scope:** no source/Razor written by this spec; this is design only.