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