deepdrft/product-notes/about-page-distinction.md

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 <em> 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 <em> 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.)