Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions .okf/design/landing-anatomy.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
type: design-principle
title: Landing anatomy is settled; register is the variable
description: Service/sales pages share one landing skeleton; design comparisons vary only the visual register on top of it
tags: [design, landing-page, redesign, v2]
timestamp: 2026-08-21T00:00:00Z
---

# Landing anatomy is settled; register is the variable

A design **system** is not a page **design**. Applying good tokens to article
anatomy produced a page Paul read as "a blog, not a presentation" (PR-2,
2026-08-21). Sales pages are designed as landing pages; the reusable system is
extracted from shipped pages afterwards — never the reverse.

## The settled skeleton (three independent sources converged)

Problem-naming hero (+ dual CTA + de-risk line + stat strip) → month-one card →
decision table (vs the alternatives) → free-audit-first timeline → case cards →
named verified testimonial (dark band) → closing CTA. Convergence: Paul's
Claude Design artifact `3dc819cf`, the 20.05 spec, and the 2026 external sweep
(`docs/projects/2608-site-design-system/10-19-research/10.01-design-register-research-2026-08-reference.md`).

## Rules

- Pilots/comparisons vary the **register** (palette, type, surface language)
on the shared skeleton — never anatomy and skin at once, or the comparison
measures nothing.
- Proof sits near decision points, not in a basement section; CTAs repeat at
multiple scroll points; forms ≤5 fields.
- Every number on the page passes [/content/claims-canon.md](/content/claims-canon.md)
BEFORE styling work starts; tenure derives from `site.Params.foundingYear`.

# Citations

- Research + candidate shortlist: `docs/projects/2608-site-design-system/10-19-research/10.01-design-register-research-2026-08-reference.md`
- Plan of record: `docs/projects/2608-site-design-system/20-29-strategy/20.06-clean-slate-v2-plan.md` §Flow revision
14 changes: 14 additions & 0 deletions .okf/log.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,20 @@ make it green: restructure same-day entries under one heading, and add
`timestamp` to the 23 concepts missing it (anchored to each file's last commit
time, which is verifiable - never invented).

## 2026-08-21 - anatomy settled, register under test: the pilots flow

Paul's PR-2 review ("looks like a blog, not a presentation") exposed that we
styled article anatomy instead of designing a landing page - a design system
is not a page design. His finished Claude Design artifact (`3dc819cf`)
independently produced the same landing skeleton as the 20.05 spec and the
external research sweep, so the anatomy question is closed and the register
(palette/type/surface) is the only variable worth piloting. New concept:
[landing-anatomy](design/landing-anatomy.md); research + 3-candidate shortlist:
`docs/projects/2608-site-design-system/10-19-research/10.01-*.md`. Flow is now
research -> 2-3 register pilots on /next/ (shared skeleton) -> lightning demo.
Claims gate before styling: the CD artifact carries pricing/audit-promise/
stay-stats NOT in canon - Paul approves or they come out.

## 2026-08-21 - PR-2 pilot: two CSS traps and a claims fix, from adversarial review

The styled D1 pilot shipped through author -> verifier -> fixes. Three durable
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
# Design-register research → pilot candidates (2026-08-21)

Directive (Paul, 2026-08-21): Claude Design + Stitch are collaborative
surfaces, not one-shot generators. Flow: **online research → top 2–3 design
systems → one pilot each on the `/next/` rail → lightning demo → decide
together.** This doc is the research leg and the candidate shortlist.

## The finding that reframes the work

Paul's finished Claude Design artifact (project `3dc819cf-084f-4dd6-b7aa-7275c2424e68`,
"Fractional CTO.dc.html") independently converged on the SAME landing anatomy
as our unstarted 20.05 spec: problem-naming hero, month-one card,
fractional-vs-full-time decision table, free-audit-first timeline, case cards,
named verified testimonial, repeated CTA. External research (below) converges
on it too.

**Conclusion: the anatomy is settled. The variable worth piloting is the
REGISTER** (palette + type + surface language). All pilots share one skeleton;
each wears a different skin. That makes the lightning demo a controlled
comparison instead of apples-to-oranges.

## Research notes (what the sweep supports)

- **Trust cues are the differentiator for skeptical B2B buyers**: third-party
review ratings, named quotes with real title/company, quantified outcomes,
case studies — placed above the fold and near decision points, not in a
basement section. Buyers protect their own career; sloppy design reads as
risk. (trajectorywebdesign, userevidence, windmillstrategy, bopdesign)
- **More information converts for complex/high-ticket B2B** — comparison
tables, FAQs, process transparency; CTAs repeat at multiple scroll points;
forms ≤5 fields. (genpage, unicornplatform, perspective)
- **2026 register split**: (a) *editorial text-first* — typography as the
interface, serif boldness, page-weight discipline; (b) *engineered
precision* — sharp geometry, 1px borders, stark neo-grotesque, "premium
brutalism". Both are anti-template signals; decoration is what reads
template. (designmonks, setproduct, fireart, brainy.ink)
- **Peer register (thoughtbot.com)**: spacious dark-first sans, quantified
proof ("1,000+ positive outcomes"), conversational CTAs ("Let's talk"),
generous whitespace = confidence. Validates restraint-over-decoration for
dev consultancies.

## Candidate registers (all share the settled anatomy)

| | A — Rescue Room (warm humanist) | B — Artifact Editorial | C — Engineered Precision |
|---|---|---|---|
| Source | Paul's finished CD artifact `3dc819cf` | D1, panel winner 4–1; Paul's CD pass in progress `8eb98dd6` | Research (2026 premium-brutalist) + D2's authority intent, re-skinned light |
| Surfaces | warm paper `#faf7f3`/`#f2ece4`, white cards, 16px radius, dark closing band `#14110f` | paper `#fbf9f8`, 0px corners, ruby hairlines | white/near-white, 1px structural borders, sharp geometry, generous white |
| Type | Poppins headings + system body | Source Serif 4 + Hanken Grotesk | stark neo-grotesque (e.g. Inter/Söhne-class) + mono accents |
| Says to a burned founder | "safe, human, we'll take care of you" | "senior, published, thoughtful" | "precise, engineered, nothing hidden" |
| Risk | rounded warmth can read generic-SaaS | can read blog/essay if anatomy slips (the PR-2 lesson) | can read cold/intimidating to non-technical buyers |
| Ruby #cc342d | primary CTA | hairlines + CTA | restrained accent only |

## Claims gate (BLOCKING before any pilot ships)

From the CD artifact, verified against `.okf/content/claims-canon.md`:
- ✓ canon: 4.8/5 Clutch (linked), avg client relationship 5 years, developer
experience 8+ avg, Bruno Wozniak/PubNative = the single real testimonial.
- ✗ NOT in canon — Paul must approve or they come out: **$5K–$15K/month**
pricing, **free code audit** + **five working days**, **30 days' notice**,
**"most clients stay 3+ years / some beyond 6"**.
- "18+" is derived from `site.Params.foundingYear` in templates, never frozen.

## Pilot mechanics

One stub per candidate on the rail: `/next/pilots/<register>/fractional-cto/`
(cascade noindex covers all of `/next/`), each with its own CSS bundle —
the rail's per-page CSS ownership makes a 3-way skin comparison ~free.
Lightning demo = side-by-side links + screenshots + 3-line verdicts per lens
(5-second trust, CTA clarity, mobile), then discussion; Claude Design and
Stitch remain the iteration surfaces for the chosen register.

Sources: sitebuilderreport/knapsackcreative/colorlib (consulting examples);
cleardigital/bopdesign/windmillstrategy/lowcode (B2B 2026 trends);
trajectorywebdesign/userevidence/hginsights (skeptical-buyer trust);
designmonks/setproduct/fireart/brainy.ink (typography + premium-brutalism);
genpage/unicornplatform/perspective/popupsmart (landing anatomy);
thoughtbot.com (peer register, fetched 2026-08-21).
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,24 @@ a non-indexed `/next/` path on production for live testing.
| Legacy | Frozen (defect fixes only). 780 button sites + 39 blacks DROPPED as work-done-twice. |
| Sub-agent models | sonnet/haiku; Fable reserved for main loop + critical judgment |

### Flow revision (Paul, 2026-08-21, after PR-2 review)

Two corrections superseded the single-winner competition:
1. **"Looks like a blog, not a presentation"** — the pilot applied D1 tokens to
article anatomy. A design *system* is not a page *design*; pages are
designed as landing pages, the system is extracted from shipped pages.
2. **Compare pilots, don't crown early** — new flow: online research → top 2–3
register candidates → **one pilot per candidate on `/next/`, all sharing one
landing anatomy** → lightning demo, decide together. Claude Design + Stitch
are the collaborative iteration surfaces throughout.

Research + shortlist (A Rescue Room warm-humanist / B Artifact Editorial /
C Engineered Precision) + the BLOCKING claims gate:
`../10-19-research/10.01-design-register-research-2026-08-reference.md`.
The anatomy is settled (Paul's Claude Design artifact `3dc819cf`, the 20.05
skeleton, and external research all converged on it); registers are the
variable under test.

## The two tracks

### Track A — design collaboration (no repo code; parallel with any PR)
Expand Down Expand Up @@ -131,11 +149,17 @@ same commit · browser-measured AA + seams on anything touching a rendered page.
| PR-0: 2.3 course eyebrow | ALL GATES DONE on PR #552: opus review (4 findings fixed), merge-base attribution (delta = exactly 2 course keys), Linux baselines screened 2-of-72, codex findings applied | merge #552; **OUTSTANDING: macOS desktop+mobile course/chapter baselines need recording on a NON-drifted Mac** — this machine proved 13-red on untouched master |
| Track A: direction 2 (stitch) | DONE — "Institutional Authority", screen `7cbde8e2e694438d82138be4d6f7f3f9`; canon flags in 20.07 |
| Track A: Claude Design | project created via DesignSync (`a5f25203-6dd9-45c6-a978-5842152d1389`), seeded with brief + both directions | Paul iterates there; then judging |
| Track A: judging board | VOTE RUN — **D1 wins 4–1** (tally + per-voter reasoning in 20.07); D1 = working winner, Paul's Claude Design pass can override; /next/ styling fully reversible | Paul confirms or overrides in project `a5f25203` |
| Track A: judging board | VOTE RUN — **D1 wins 4–1** (20.07) — then SUPERSEDED by the register-pilots flow (§Flow revision): no early crown, compare pilots instead | — |
| Register research + shortlist | DONE — `10-19-research/10.01`: anatomy settled, 3 register candidates (A Rescue Room / B Artifact Editorial / C Engineered Precision), claims gate listed | — |
| Paul's Claude Design artifacts | A finished (`3dc819cf`, full landing page — the anatomy blueprint); B in progress (`8eb98dd6`) | pilots port from these; B refreshes when Paul finishes |
| Pilot A (Rescue Room) | NOT STARTED | port CD artifact `3dc819cf` to `/next/pilots/rescue-room/fractional-cto/`; claims gate FIRST (pricing/audit-promise/stay-stats need Paul) |
| Pilot B (Artifact Editorial) | NOT STARTED — existing `/next/services/fractional-cto/` has the skin but article anatomy | rebuild on the shared landing skeleton |
| Pilot C (Engineered Precision) | NOT STARTED | tokens from 10.01 research; same skeleton |
| Lightning demo | BLOCKED on pilots | side-by-side links + screenshots + 3-line verdicts per lens; discussion; Paul picks |
| PR-1: v2 rail | **MERGED** #555 (`703fee12c`) — rail live: `/next/` noindexed staging, qtest holes closed (root layouts + v2 registry-derived keys), ADR-0006, mermaid source-aware. Screenshot job red = the documented 16-key #540 handoff only, verified key-by-key. | — |
| PR-2: styled pilot | **MERGED** #557 (`38f744805`) — full content ported (overview/faqs/tenure-derived stats), styled per D1, canon-exact Clutch proof line, browser-verified AA (button 5.13:1), −85.6% gzip CSS vs legacy page. Screenshot red = the same 16-key #540 handoff set, verified key-by-key. | compare links: `/next/services/fractional-cto/` vs `/services/fractional-cto/` |
| PR-3: flip | BLOCKED on Paul's live review of the pilot (+ his design-pass verdict) | flip = `type: next` on the real page + delete stub; checklist in ADR-0006 §5 |
| 20.05 service-page spec | NOT STARTED (hive specialists idle) | content model (month-one card, decision table, timeline) survives any design winner |
| PR-3: flip | BLOCKED on lightning-demo winner + Paul's live review | flip = `type: next` on the real page + delete stub; checklist in ADR-0006 §5 |
| 20.05 service-page spec | VALIDATED by convergence — Paul's CD artifact independently produced the same skeleton (10.01 §finding) | the shared pilot anatomy IS this spec; no separate doc needed |
| Homepage read gate | WAITING ≈2026-09-17 | first: confirm `e1fa5409d` deploy date |

**Standing rules for whoever picks this up:** WIP=1 on repo PRs; sub-agents on
Expand Down