# About Page — Visual Distinction Directions Status: **OPEN — awaiting Daniel's pick.** Author: product-designer. Date: 2026-06-17. Surface: public site only (`DeepDrftPublic.Client/Pages/About.razor` + `About.razor.css`). Companion to `about-page.md` (the approved structure + copy spec). **That content does not change** — the three movements (People / Process / Product), all COPY blocks, the image-slot plan, and the route are all signed off. This note is purely about the *visual treatment* of that content. --- ## The problem, stated precisely The built page doesn't just *feel* like Home — it is Home's grammar, reused in Home's order. About re-declares Home's section primitives verbatim (`About.razor.css` is explicit about this: the `.hero-*`, `.section`, `.section-divider`, `.section-dark`, `.section-split`, `.medium-*`, `.cta-*`, `.feature-*` classes are copied "verbatim from those sources"), and lays them down in the **same sequence** Home uses: ``` Home: hero-split → full-bleed band → divider → two-col section → dark band → split → CTA → trailing band About: hero-split → full-bleed band → divider → two-col section → dark band → split → CTA → trailing band ``` Same primitives, same rhythm, same order → reads as a Home clone with different words. The original spec *asked* for this ("built entirely in the Home page's visual language… No new visual vocabulary is proposed") — that decision is what now needs revisiting. The spec optimised for *continuity*; it overshot into *sameness*. **The guardrails (unchanged):** same palettes (Charleston in the Day / Lowcountry Summer Nights), same type families (Bodoni Moda / Cormorant / DM Sans), same voice, same gas-lamp/lava-lamp motif vocabulary, same bw↔colour `ParallaxImage` crossfade idiom. Distinction comes from **composition, rhythm, structure, and one signature device** — never from new colour, type, or anything that reads as a separate site. **First-principles framing.** Home's job is *arrival and orientation* — it fans out: "here are the mediums, here's what we offer, here's a taste." Its rhythm is a **grid of equal blocks** (3 medium cards, 4 feature cards, symmetric 50/50 splits). About's job is *argument and narrative* — a single sustained read, People → Process → Product, one claim earned over a scroll. A narrative wants a **different backbone than a grid**: a spine, a sequence, a sense of progression. That mismatch — grid rhythm forced onto a narrative — is the deepest reason it feels borrowed. Each direction below picks a different narrative backbone. --- ## What stays constant across all three directions So the divergence is legible and the brand holds: - **Palette tokens** — every `var(--deepdrft-*)` stays. No new colours. - **Type stack** — display serif for titles, mono for eyebrows/labels, body for prose. The `` italic-serif emphasis on one word per title stays. - **The bw↔colour `ParallaxImage` crossfade** — the brand's signature image behaviour. All three directions use it; they differ in *how images are framed and placed*, not whether they crossfade. - **The three divider tags** (The People / The Process / The Process) remain the movement boundaries — though two directions restyle the divider itself into the signature device. - **The dark band for Process** — the navy ground for the logos/analytical movement is a strong mapping and survives in all three (its internal layout may change). --- ## Direction 1 — "The Liner Notes" (numbered editorial spine) **The one-line idea:** About becomes a **numbered three-movement essay** — a record's liner notes, or a gatefold sleeve — with a persistent left margin carrying oversized movement numerals and running marginalia, while the content column runs asymmetrically to the right. ### The signature device A **left margin rail**, ~12–16% of viewport width, that runs the length of the page. It carries: - **Oversized Bodoni numerals** — `01` / `02` / `03` — one per movement, set in the display serif at `clamp(5rem, 10vw, 9rem)`, weight 300, in a low-opacity navy (or green for the active movement as it scrolls into view). These replace the centred `.section-divider` rule entirely. - **A thin vertical rule** running continuously down the margin (the `--deepdrft-border` hairline, vertical instead of Home's horizontal `.divider-line`) — a literal spine for the narrative. - **Mono marginalia** — short rotated/stacked captions beside images and quotes ("Charleston, SC", "Akai Force", "100% live"), the way a magazine annotates a photo. This is where image captions live, giving photos an editorial frame Home never has. The content column sits to the right of the rail and is **offset / asymmetric** — never the centred, balanced 4/8 grid Home uses. Prose hangs at a consistent left edge; pull-quotes (the sharp lines — "designed, not extracted; assembled, not distilled") break *left into the margin* at large serif scale. ### How it diverges from Home - Home has **no persistent vertical structure** — every section is a fresh full-width block. The continuous numbered spine is the single strongest "this is a different page" signal, visible at every scroll position. - Home's dividers are **horizontal centred rules**; here the divider *is* the vertical rail + numeral. - Home is **centred and symmetric**; this is **left-anchored and asymmetric**. ### How it stays in-theme - The numerals are Bodoni Moda — the exact display face Home's titles use. The marginalia is the same mono eyebrow style (`.hero-eyebrow` / `.section-label`), just rotated/repositioned. - The vertical rule is the same hairline token as `.divider-line`, reoriented. - Palette, prose styling, dark Process band, crossfade images: all untouched. ### Photography that serves it - **Portrait-orientation, editorially cropped, inset** (not full-bleed) — images sit *within* the content column with generous margin air, captioned in the rail. The restraint is the point: a few precisely-placed framed shots, not a wall of full-bleed bands. - The two **member portraits** (C1/C2) are the natural anchors — tall 1365×2048 bw shots, colour on hover via the crossfade, each captioned in the margin with name + role. - One **landscape gear shot** in the Process movement, but inset and captioned ("the live rig"), not a full-width band. - **Best supplied as:** tall portraits + a couple of detail/gear shots; bw primary, colour crossfade. Full-bleed shots are *not* what this direction wants — it's about framing and white space. ### Pros - Strongest, most unmistakable identity of the three. Reads instantly as "the story page." - The numbered-movement system makes the People/Process/Product structure *visible* without a heading that says "Movement One" — exactly the spec's stated goal (§2: "legible without a heading"). - Marginalia gives bespoke photos an editorial home and solves image captioning elegantly. - Most "magazine feature" of the set — flattering to a collective that wants to read as serious artists. ### Cons / cost - **Highest implementation cost.** A persistent margin rail with scroll-reactive numerals is genuinely new layout (CSS grid with a fixed rail column; optional `IntersectionObserver` for active-numeral highlight). Not a recombination of existing primitives. - Asymmetric margin rails are the **hardest to make responsive** — on mobile the rail must collapse (numerals inline above each movement, marginalia folds under images). Needs deliberate breakpoint design. - Risks feeling *too* distinct if executed heavy-handed — the guardrail is keeping it quiet. **Relative cost: HIGH.** New layout system + responsive collapse + optional scroll observer. --- ## Direction 2 — "The Contact Sheet" (full-bleed cinematic, photography-led) **The one-line idea:** Invert Home's text-first/image-as-accent balance. About becomes **photography-led** — full-bleed duotone images are the structural spine, and text is overlaid on or interleaved between them as captions and standfirsts. The collective shown, not just described. ### The signature device **Edge-to-edge full-bleed image bands as the primary structure**, each treated as a **duotone** (navy shadows → warm white highlights, derived from the existing palette tokens — *not* a new colour, a two-tone map of colours already in the system). Text lives in two registers: - **Overlaid** — movement titles set *over* a darkened full-bleed image (scrim gradient already exists as `.medium-scrim`), the way a film title card or album back-cover works. - **Interleaved tighter prose blocks** between image bands — narrower measure, more white space than Home's `.section`, so the rhythm is image / breath / image rather than Home's block / block / block. Home uses parallax bands as *punctuation between* text sections. This direction makes the **image bands the sentences** and text the punctuation — a full inversion of the figure/ground relationship. ### How it diverges from Home - Home is **text-dominant**, images are accents (one full-bleed band per major beat). This is **image-dominant** — the page is mostly photography, text earns its place between. - The **duotone treatment** is a consistent grade Home doesn't apply (Home shows straight bw + colour crossfade). Duotone gives About a unified cinematic skin while staying inside the palette. - Titles-over-image is a composition Home never uses (Home's titles always sit on a flat ground). ### How it stays in-theme - Duotone is built *from* `--deepdrft-navy` and `--deepdrft-white` — it's a grade of the existing palette, not a new one. (Crossfade-to-full-colour on hover can still pay off the bw↔colour idiom.) - The scrim, the type, the `` emphasis, the mono eyebrows — all reused. - The dark Process band becomes the *natural* mode here rather than an exception — the whole page leans darker and more cinematic, with the People/Product movements as the lighter relief. ### Photography that serves it - **This direction lives or dies on photo quality and quantity** — it's the most photo-hungry. Needs **strong full-bleed landscape shots**: the duo, the gear, the live/warehouse atmosphere, the street/swamp. - Wants **atmosphere and environment**, not just portraits — wide shots with negative space for text overlay (a title needs a dark quiet corner to sit in). - **Best supplied as:** 5–7 high-res landscape shots, ideally already shot with negative space for overlay; bw or colour (the build applies the duotone grade). Daniel's "NEW About-specific photos" are the enabler here — if the inventory is rich and cinematic, this direction has the highest ceiling. ### Pros - Most emotionally immediate — you *see* the people and the room, which is the entire pathos/ethos pitch ("real people in the Charleston scene"). Shows the proof rather than asserting it. - Strong distinct identity from a different lever (imagery) than Direction 1 (structure). - Moderate build — full-bleed bands and scrims already exist; the new work is the duotone grade and overlay-text compositions, not a new layout engine. ### Cons / cost - **Photo-dependent and therefore risky.** The one open item in the spec is *the photos aren't final yet*. A photography-led direction that ships before great photos arrive degrades worse than a text-led one — placeholders in a full-bleed-image page are very visible. Couples the page's success to an unresolved dependency. - Text-over-image hurts **readability and accessibility** if scrims/contrast aren't carefully tuned; the bio prose (especially Daniel's long bio) doesn't want to live over an image — needs flat-ground exceptions, which slightly dilutes the concept. - Duotone grade needs either pre-processed assets or a CSS/SVG filter pass — a small new technique. **Relative cost: MODERATE.** Reuses bands/scrims; new work is duotone grade + overlay compositions + contrast tuning. But carries schedule risk via the photo dependency. --- ## Direction 3 — "The Offset Ledger" (asymmetric rhythm + signature textural divider) **The one-line idea:** Keep Home's primitives largely intact, but **break the symmetry and re-pitch the rhythm**, plus introduce **one signature recurring motif** — a distinctive textural/waveform divider — that becomes About's fingerprint. The lightest-touch direction: distinct, but built from what's there. ### The signature device Two moves working together: 1. **Asymmetric column rhythm.** Home's two-col section is a balanced 4/8 with the title left, prose right, every time. About **alternates** the offset — title-left/prose-right, then prose-left/title- right — and pushes the ratios off-balance (3/9, 9/3) so no two movements share a footprint. The member bio pair goes from Home's even 6/6 grid to a **staggered/offset pair** (one card dropped vertically against the other), breaking the "grid of equal blocks" feel. 2. **A signature divider motif** replacing Home's plain `.divider-line`. Instead of a flat hairline rule between movements, About uses a **thin waveform/oscillation line** — a subtle SVG sine or a miniature static waveform stroke — as its movement divider. This ties directly to the site's existing lava-lamp/`WaveformVisualizer` identity (the waveform is *already* a core DeepDrft motif on the detail pages) and makes the divider unmistakably About-and-DeepDrft, not generic. The mono movement tag sits on this waveform rule instead of a straight line. ### How it diverges from Home - Home is **rigorously symmetric** (equal grids, balanced splits, centred rules). About becomes **deliberately off-balance** — the eye travels differently down the page even though the parts are familiar. - The **waveform divider** is a recurring signature Home doesn't have — a small motif that recurs three times and stamps the page. - The staggered bio pair reads as *editorial layout* rather than *card grid*. ### How it stays in-theme - It's the **most conservative** — same primitives, mostly re-proportioned. Lowest risk of reading as a different site. - The waveform motif isn't new vocabulary — it's *borrowed from elsewhere in the same product* (the visualizer), so it deepens brand coherence rather than diluting it. Strong argument: it makes About feel more DeepDrft, not less. - Palette, type, images, dark band: untouched. ### Photography that serves it - **Flexible — the least photo-demanding.** Works with the existing slot plan as-is (portrait bios, landscape gear/atmosphere bands). The bespoke photos slot straight in; the offset rhythm just frames them less symmetrically. - The staggered bio pair wants **two portraits of slightly different crop/scale** so the stagger reads as intentional composition, not misalignment. Portrait orientation, bw + colour crossfade as specced. - **Best supplied as:** exactly the spec's current §8 inventory — no new photographic demands. Safest against the open photo dependency. ### Pros - **Lowest implementation cost and lowest risk.** Largely re-proportioning existing primitives + one new divider motif. Ships closest to what's already built. - The waveform divider is a genuinely *clever, cheap* signature — high identity-per-unit-effort, and it reinforces the existing brand motif rather than inventing one. - Decouples from the photo dependency — works today with placeholders, improves when photos land. ### Cons / cost - **Weakest distinction of the three.** Asymmetry + a dived motif is subtle; a casual visitor might not consciously register "different page" the way they would with Direction 1's numeral spine or Direction 2's full-bleed imagery. Risk: solves the brief only partway. - Asymmetric ratios still need responsive care (offsets collapse to stacked on mobile, where the whole distinction partly evaporates — mobile sees a single column regardless). - The waveform divider is the one bit carrying most of the load; if it's too subtle it does little, if too loud it fights the editorial restraint. Narrow tuning window. **Relative cost: LOW.** Re-proportion existing primitives + one new SVG divider component. --- ## Comparison at a glance | | Direction 1 — Liner Notes | Direction 2 — Contact Sheet | Direction 3 — Offset Ledger | |---|---|---|---| | **Lever** | Structure (numbered spine) | Imagery (full-bleed duotone) | Rhythm + motif (asymmetry + waveform divider) | | **Distinction strength** | Highest | High | Lowest | | **Build cost** | High | Moderate | Low | | **Photo dependency** | Low (framed portraits) | **High** (cinematic full-bleed) | Lowest (uses current plan) | | **Brand-coherence risk** | Medium (most novel) | Medium (duotone is new grade) | Lowest (motif borrowed from product) | | **Best if Daniel wants…** | a serious "story page" | to *show* the collective | a safe, quick, clever win | --- ## Recommendation **Lead with Direction 1 (Liner Notes), with Direction 3's waveform divider folded in as its signature motif.** They are not mutually exclusive — the numbered editorial spine (D1) is the structural backbone, and the waveform-line divider (D3) is a natural, on-brand way to render the movement boundaries *within* that spine. Together they give About the strongest, most coherent identity: a numbered narrative with a DeepDrft-native (waveform) signature, built on the existing palette/type/image idioms. **Why D1 over D2 as the lead:** Direction 2 is the most exciting *if the photography is exceptional and ready* — but the spec's single remaining open item is precisely that the photos aren't final. Betting the page's identity on the unresolved dependency is the wrong risk. D1's identity comes from *structure*, which the build controls completely; great photos then make it better rather than being load-bearing for it to work at all. D1 also best serves the page's actual job — a sustained narrative argument — where D2's strength (immediate emotional imagery) is slightly at odds with the long-read bio prose. **Why not lead with D3 alone:** it's the safe pick and the cheapest, and it's a legitimate choice if Daniel wants minimal effort — but on its own it may under-deliver on "its own identity." Its best idea (the waveform divider) is better deployed *inside* D1 than as the whole answer. **The fallback ladder, by appetite:** - **Most ambitious / strongest identity:** D1 + D3's divider (the recommendation). - **If the new photos are genuinely cinematic and Daniel wants to lead with them:** D2. - **If the appetite is "make it distinct but cheap and low-risk, ship soon":** D3 alone. **Open question for Daniel (one):** how much build appetite does this have? D1 is real new layout work; D3 is an afternoon. That single answer picks the lane. Everything else (palette, type, copy, image slots) is already settled. --- ## Note on the current `About.razor.css` duplication Independent of which direction is chosen: the current build **re-declares Home's primitives verbatim** in `About.razor.css` (its own header comment says so). Whichever direction lands, this is the moment to decide whether those shared primitives should be **promoted to the global `deepdrft-styles.css`** (so About *consumes* them rather than copying — which §10 of the spec actually recommended) instead of maintaining two divergent copies. Flagging as a structural concern for staff-engineer to weigh during implementation — not a design call, but a cost the chosen direction inherits. (Surfaced for awareness; not in product-designer's remit to resolve.)