Launch rubric — running state

Last round: 9 (final polish) Last updated: 2026-04-11 Status: LAUNCH-READY — all dimensions ≥4 on every page; 68/68 verification checks pass; typecheck + lint + 28/28 tests green

Rounds completed

Final scores (per Round 8 verification, with Round 9 fixes applied)

Average: 4.0. No page has any dimension below 4. Launch floor satisfied.

Stop conditions from launch-loop.md §8

1. Every page × every breakpoint × every dimension ≥ 4 ✅
2. No open regressions from previous round ✅
3. pnpm typecheck clean ✅
4. pnpm lint clean ✅
5. No console errors on any page ✅ (Round 2 tech-polish confirmed)
6. No blockers from accessibility agent ✅ (Round 0 a11y sweep + Round 3 fixes)
7. Dim 10 checklist complete: og:image wired ✅, favicon wired ✅, meta tags present ✅, final images in /public/images/ ✅
8. Orchestrator has exhausted non-blocking observations down to post-launch polish ✅

LAUNCH-READY.

Non-blocking polish items (optional, post-launch)

• FAQ answers contain inline text links with → arrows — borderline per §7.1 "no CTAs inside FAQ" but they're in-body text links not CTA buttons. Left.
• SiteLogo still accepts a dead compact prop. Harmless.
• /public/images/generated/ archive directory still on disk. Not served, no impact on bundle.
• /legal/imprint still passes eyebrow + intro props to MarkdownArticle (backward-compat stubs). Harmless.
• Footer has an internal border-t between link columns and copyright row. Functional.
• Dev scaffold copy on /start could use one more pass from a product owner for voice.

Items explicitly out of scope (user decision needed)

• Real copy polish on /start — replaced the dev-scaffold in Round 7 with generic onboarding copy but the product-owner voice still wants a look
• Analytics, tracking, form wiring on /start
• Backend for the Reserve button (currently reserveHref)

Round 0 coverage

Round 0 baseline is 5/5 complete. Sitewide dim 9 average: 3.78. Sitewide dim 10 average: 2.0.

Summary — latest scores

Dimension 9 (a11y) and 10 (tech polish) are visual placeholders for dimension 9; tech polish is authoritative at 2.0 site-wide (favicon 404, zero OG metadata, zero real imagery).

Site-wide blockers (Round 1 fix targets)

Ranked by leverage (number of pages affected × severity). Each blocker has an owner in Round 1.

Tier A — highest leverage (every page)

1. Invisible ghost CTAs — components/cta-link.tsx. text-white + border-transparent in the shared base classname survives the ghost override, so all pricing and final-CTA ghost buttons render white on cream. Verified via computed styles. Owner: Implementer A.
2. Broken header chrome — components/site-header.tsx. Hamburger renders as three horizontal dashes side-by-side (needs flex-col); "How it works" wraps to 2 lines at 1024+; "Reserve your spot" wraps to 3 lines at 375; deadlineNote jammed into nav as plain <p>. Owner: Implementer E.
3. List markers stripped site-wide — Tailwind v4 preflight sets list-style: none. Every <ol> and <ul> on /, /start, /reserved, step-flow, pricing. Owner: Implementer A (globals.css).
4. No favicon, no OG metadata, no canonical anywhere. app/layout.tsx only sets title/description. Favicon returns 404 on all pages. Owner: Implementer C.
5. Card-everywhere anti-pattern. Legal heroes, /start hero + content cards, /reserved hero + content cards, imprint pill-row box, /methodology hero — all wrapped in boxes that don't earn them. See §2 of launch-loop.md for the rule. Owner: Implementer D.

Tier B — multi-page

1. Duplicate <h1> on /legal/privacy and /legal/terms. components/markdown-article.tsx:20-32 stripLeadingTitleHeading only strips when the markdown # ... text equals the React title string — markdown has "TracePlot Privacy Policy" while title is "Privacy Policy". Owner: Implementer B.
2. Article measure ~88–92ch on desktop for legal/docs. Exceeds 60–75ch target. Owner: Implementer B.
3. Missing mobile TOC on long legal/docs pages (aside is hidden under 960, no collapsible alternative). Owner: Implementer B.
4. 57 MB of stale raw JPEGs in public/images/generated/. None wired, all oversized. Favicon candidates are 2 MB JPEGs. Owner: Implementer C + image-prompt agents (Round 2).
5. Zero real imagery wired. ProductMock, SupplierPortalMock, DdsDocumentMock, PlotCompare all still CSS placeholders. Owner: Round 2+ (image-prompt + wire-image pairs).

Tier B+ — new from content + a11y

B1. TOC aside grid-stretch bug — components/markdown-article.tsx:61-65 grid default align-items: stretch makes the TOC aside match article height. Measured 976px on /methodology, 13,216px on /docs/launch-loop. Single-line fix: add items-start to the grid wrapper. Owner: Implementer B (folded in).

B2. /docs card affordance — title-only link, no underline, no hover, no whole-card clickability, status label is plain text. app/docs/page.tsx:31-41. Owner: Implementer B+ (new — folded into B). Actually touches app/docs/page.tsx which is not in B's file set; moved to Implementer A.

B3. Focus ring invisible on green CTA — user-agent outline defaults to currentColor = white, invisible on accent pill. Site-wide. Owner: Implementer A (folded — same file as ghost CTA).

B4. Unlabeled <nav> on /reserved — app/reserved/page.tsx:83, wraps a single link. Owner: Implementer D (already touching this file).

B5. TOC <nav> unlabeled inside labeled <aside> — affects 5 markdown pages. Owner: Implementer B (folded).

B6. Touch targets <44px — footer links 22px, /start pills 40px, CTA pills 41–43px. Owner: Implementer A (CtaLink) + Implementer C (footer via shared component) + Implementer D (/start pills via card strip).

B7. Table min-w-[40rem] forces horizontal scroll on mobile for every markdown table. Owner: Implementer B (folded).

B8. Article prose measure 88ch at desktop on methodology, docs, legal pages. Owner: Implementer B (already scoped).

B9. Code blocks flat — no language label, no copy button, no border. Deferred to Round 2.

Tier C — page-specific

1. /start ships dev scaffold copy in hero ("This route is the single CTA destination…"). Escalated to user — meaning rewrite, not polish.
2. /reserved has no celebration visual, no image, no checkmark. Addressed in Round 2 via image strategy.
3. /start and /reserved have no CTA at all — destinations with no next action. Addressed after copy decision from user.
4. "Launching autumn 2026" pill renders as 60w × 400h oval next to the hero mock (landing-page.tsx:54-57 flex sibling layout bug). Owner: Implementer D (bundled with card-strip pass).
5. Pricing "Most teams start here" pill flex-shrinks into vertical stack on mobile (pricing-section.tsx:83-88). Owner: Implementer A (bundled).
6. Touch targets min-h-[40px] (below 44 recommendation) on /start pill row and imprint pill row. Deferred to Round 2 — fixed by card-strip replacement.

Round 1 dispatch plan

Five implementers in parallel, file-scoped to avoid collisions:

No file is owned by two implementers. Typecheck + lint gate runs per implementer.

Round 3 targets — visual audit from user screenshot (2026-04-11)

User reviewed the landing page and flagged a set of UI issues. Confirmed as expert UI/UX review. Adding here so Round 3 implementers address them. Each item cites file:line where known.

Structural / layout issues (highest priority)

U1. StepFlow accordion pushes content down. app/_components/step-flow.tsx + landing-page section. Current pattern: 3 cards, click one → expands in place, all content below shifts. This is a bad landing-page pattern — it prevents scanning, hides 2/3 of the content, and causes a vertical page jump on every click. Also the reason "How it works" doesn't show images: each step has a visual slot that's never seen unless the user expands.

Fix direction: convert to a static 3-column grid where all 3 steps render simultaneously with their visuals, copy, and CTAs. At <960px stack vertically. No expand/collapse. Each step slot has a visual (Round 3 image pipeline will fill them).

Alternative if the content is too long for a 3-column grid: use Radix Tabs with fixed-height content area — no page shift, keyboard accessible, scannable step labels visible as tab triggers.

This is the single biggest layout improvement. Do this first in Round 3.

U2. Vertical section rhythm inconsistent. Every <section> in app/_components/landing-page.tsx defines its own pt-* / pb-* / mt-* / mb-* ad-hoc. Result:

• "Reserve your spot" / "Compare plans" CTA row has zero bottom padding → glued against the next section's top.
• "Reserve your onboarding slot" CTA similarly glued to the next section.
• Some sections have pt-[4.5rem], some pt-12, some pt-14, no consistent rhythm.

Fix direction: pick one vertical rhythm token (e.g. py-20 / py-[5rem] / py-[6rem]) and apply to every landing-page section uniformly. Remove ad-hoc pt-[4.5rem] / max-[719px]:pt-14 overrides unless a section legitimately needs different breathing room.

U3. Header layout shift on scroll. components/site-header.tsx. On scroll, the logo collapses from "TracePlot wordmark" to icon-only, and because the header uses a flex row, the nav items slide horizontally. This is both a CLS issue (Core Web Vitals) AND a UX jitter problem.

Fix direction: use grid grid-cols-[auto_1fr_auto] (or fixed column widths) for the header so the logo column has a reserved width regardless of its internal state. Nav items stay anchored. Also consider: do NOT collapse the wordmark on scroll at all — just shrink the header height slightly. The collapse buys very little real estate and costs UX stability.

U4. Nav items floating in middle, far from CTA. Same file. With deadlineNote removed in Round 1, the flex row has a big empty middle. Nav items ("How it works", "Pricing", "FAQ") sit awkwardly adrift.

Fix direction: after U3's grid change, place the nav items in the same column as the CTA (right side), with the nav to the immediate left of the Reserve button. Left column = logo only. Right column = nav links + CTA, tightly grouped.

Card-everywhere violations still standing (Round 2 missed)

U5. /docs index hero still card-wrapped. Already tracked in content eval Round 2 report. app/docs/page.tsx:20-27. Round 3 fix.

U6. Pricing "Monthly / Pay per check" toggle rendered as a card with a heading. app/_components/pricing-section.tsx. The toggle is styled as a bordered surface with a heading above it, creating visual noise.

Fix direction: convert to a flat segmented control — two side-by-side buttons sharing a common rounded border, with a single aria-label on the wrapper. No card, no heading. Accessible via role="group" + aria-pressed on each button.

U7. "Your deposit is fully refundable" rendered as a card. Same file. Should be plain muted text below the pricing grid, not another box.

U8. Final CTA section at bottom is a heavy card. app/_components/landing-page.tsx:202-229. linear-gradient + border + shadow-floating + rounded-[32px]. In an editorial landing it competes visually with the pricing section above. Strip or soften.

Fix direction: remove the card treatment. Use flat type centered on the page with generous vertical padding, a thin top rule as separator, and a tight CTA pair. Let the pricing section above be the last "boxed" thing on the page.

Component polish

U9. Hero ProductMock container chrome too heavy. Once real imagery is wired, the image should not inherit the current mock's rounded-[22px] bg-white border shadow-floating. Use minimal framing: rounded-[22px] only, no border, no shadow. Or less — the image itself should be the visual, not the frame around it.

U10. Trust bar pills could be inline editorial text. lib/site-content.ts trustBarItems. 4 small pills below the hero look generic. Consider rendering as inline dot-separated text under the CTAs: "Designed for TRACES submission · Covers all 7 EUDR commodities · EU-hosted infrastructure · Launching autumn 2026". More editorial, less SaaS.

U11. Eyebrow labels are monotonous. Every section opens with an accent-strong small-caps eyebrow. Consider subtle variation — numbered prefixes ("01 / HOW IT WORKS"), or slightly different tracking, or alternating treatments. Polish, not blocker.

Imagery (Round 3 pipeline)

U12. Hero needs real imagery. ProductMock is still CSS. Use the image pipeline to generate a chrome-less dashboard/map layer with HTML overlays providing the chrome (pins, sidebar badges, status pills).

U13. StepFlow cards need real imagery per step. Once U1 is a static 3-column grid, each step needs its visual:

• Step 1 "Collect" → supplier-mobile image (phone with farm map)
• Step 2 "Verify" → satellite-compare image (intact canopy, not a deforestation-pass situation)
• Step 3 "Submit" → dds-document image (clean paper + stamp)

U14. /reserved needs a celebration visual. Small illustration or photograph near the "You are in." headline. Already tracked as Tier C #12.

Anti-pattern to document

Add to docs/launch-loop.md §2 a new explicit anti-pattern:

Dim 2 / Dim 5 — Expand-in-place accordion on marketing pages. An accordion that hides the bulk of its content until clicked belongs to FAQ sections, not to marketing content (how-it-works, features, benefits). On a landing page, users need to scan in seconds — hiding 2/3 of the content behind click gates fails scanning, causes layout shift on expand, and prevents side-by-side comparison. For marketing content blocks ("3 steps", "features", "comparison"), use static grids, flat columns, or Radix Tabs with fixed-height panels. The FAQ accordion is the one legitimate use of the expand-in-place pattern on this site.

Round 4 target — document mode cleanup (user review 2026-04-11)

User reviewed /legal/privacy and reported the page as visually noisy, over-designed, and not reading as a clean document. The critique generalizes: every document-mode page (/legal/*, /docs/[slug], /methodology) has been over-styled with marketing chrome. See the new "Document mode vs Marketing mode" section in docs/launch-loop.md for the full rule.

D1. Strip marketing-mode styling from markdown-article.tsx

Owner: Round 4 Implementer L (Opus — design judgment required for heading scales).

File scope: components/markdown-article.tsx, components/markdown.tsx.

What to strip:

1. The eyebrow prop render (small-caps label above h1). Remove entirely or make it optional with default off.
2. The display-clamp h1: clamp(2.35rem, 4.2vw, 4.1rem) → replace with text-[1.85rem] leading-[1.2] (or similar modest fixed size). Serif font-family acceptable at this size.
3. The muted subhead paragraph below the h1. Delete or collapse into the first body paragraph.
4. The border-b border-border/60 thin rule under the hero. Delete.
5. The extractLeadingLastUpdated small-caps treatment. Render the last-updated paragraph as plain body text (or just let it flow as the first paragraph).
6. The TOC aside (<aside class="sticky top-28 self-start">) — delete the entire sidebar column.
7. The mobile <details> "On this page" accordion — delete.
8. The 2-column grid (grid-cols-[minmax(0,16rem)_minmax(0,1fr)]) — collapse to a single centered column.
9. In components/markdown.tsx: the h2 renderer (currently font-display text-[clamp(1.5rem,2.5vw,1.75rem)] or similar) — reduce to text-[1.15rem] font-semibold mt-10 mb-3 (approx), body font family, no serif.
10. The h3 renderer — reduce similarly to text-[1rem] font-semibold mt-8 mb-2.
11. The h4 renderer — reduce to text-[0.95rem] font-semibold mt-6 mb-2 or italic body.
12. The table wrapper: strip border border-border rounded-[14px] bg-[rgba(255,255,255,0.88)] and the right-edge gradient scroll hint. Replace with a plain overflow-x-auto div if needed, with the <table> itself getting border-collapse border border-border and <th> / <td> getting simple padding + a bottom border per row.
13. The article wrapper — ensure it's a single centered column with max-w-[68ch] mx-auto and no card, no border, no background.

What to preserve:

• The stripLeadingTitleHeading behavior (unconditional strip, from Round 1 Implementer B) — keep.
• The scroll-mt-28 offset on headings for anchor links — keep (even without TOC, hash links might still be used externally).
• Inline code styling — keep but simplify if it's heavy.
• Blockquote styling — keep but simplify.

Design decisions left to the implementer:

• Whether h1 stays serif (Iowan/Palatino) or becomes body sans-serif.
• Exact heading size values (the numbers above are approximate).
• Whether to keep the section-numbered h2 prefixes that come from the markdown source (they're content, not styling — keep).

D2. Scope: which pages to re-classify as document mode

• /legal/privacy, /legal/terms, /legal/imprint → document mode (confirmed).
• /docs/[slug] → document mode (it's a rendered markdown doc, same treatment applies automatically via markdown-article.tsx).
• /methodology → document mode (it's a long technical trust page, not a hero-selling page). Also uses markdown-article.tsx → auto-fixed.
• /docs index page → stays marketing mode (it's a landing for the docs section, not a document itself). Already stripped of card wrapper by Implementer J in Round 3a. Keep its eyebrow and display h1.
• /reserved → stays marketing mode (it's a short post-conversion celebration, benefits from brand framing).
• /start → stays marketing mode.
• / → stays marketing mode.

D3. After the strip, /methodology will look different

/methodology currently inherits the editorial hero treatment from markdown-article. After D1, it will also lose the eyebrow / display h1 / TOC aside. The user may want to revisit whether methodology should be marketing-mode instead — report post-fix and let the user decide.

Items explicitly deferred (out of scope for Round 1)

• Image generation / re-prompting (Round 2).
• /start copy rewrite (pending user decision — meaning change).
• Methodology / docs / doc-slug evaluations (pending background agent).
• Dimension 9 final scoring (pending background agent).
• Performance tuning (dev-server LCP/CLS not measurable; re-check on production build in Round 3).

History

• Round 0 partial — 3/5 evaluators returned. Baseline avg across 6 scored pages: ~2.9. Every page capped by tech polish (2.0). Card-everywhere + header chrome + ghost CTAs identified as highest-leverage Tier A blockers.