landing: redesign the fold around evidence instead of instructions - #44
Merged
Conversation
The old landing was a left-aligned document on pure white with the HTTP memo as its hero. Held next to the pages that do this well (portradar, zerolang, subtitlegenerator) it read as unstyled rather than restrained. An earlier attempt at fixing that by subtraction - removing the accent word, the subhead, the motion, the shadows - made it worse, because austerity is not the same thing as professionalism. Those pages are heavily designed; they just don't spend the budget on slop vocabulary. So this is additive: - A tinted page (#F4F5F6) with a dot texture, so white surfaces have something to sit on. Single biggest contributor to "looks designed". - Centred composition, and a real nav with one solid action. - Display type up to 66px carrying the claim, all black. No accent- coloured word: that is the most templated move in this category, and none of the reference pages do it. - A short subhead that states the mechanic. Researched lengths from the pages worth copying: Vercel 5-word headline, Linear 8 + 13, Resend 8 + 12. This lands at 8 + 13. The old lede was 45 words. - Evidence above the fold. A real drop in an iframe (/p/ztx4J9P/raw, which does not bump view_count so the homepage doesn't inflate that drop's counter), plus the marks of the agents the CLI already detects. - The prompt slab loses its fake traffic lights, and its duplicate copy button. One affordance, no window chrome. The HTTP memo is retired from this page and replaced by the real thing: a trimmed but literal GET /api/onboard response. The old block rendered to:/from:/re: as if they were HTTP headers. They are RFC 5322 email headers - so the component built to signal protocol-seriousness was showing invented ones, which the engineers most worth impressing would notice. The endpoint returns 13.4 KB across 21 sections; showing it beats drawing it. Copy is rewritten throughout to drop insider language. "Mints a new version" and "slug stays put" are phrases nobody outside this repo says. New file src/views/logos.ts holds the brand marks, inlined so the page makes no third-party request. Only the four whose identity was verified against the source SVG <title> are included: Claude, Cursor, OpenAI (for Codex), Cline - all from simple-icons 16.28.0, CC0-1.0. Aider and Devin are not in that set, and the "amp" slug there is Google AMP rather than Sourcegraph's Amp, so those three are named in prose instead. A wrong logo reads worse than no logo and these are other companies' marks. Scope: landing only. /verify and /p/:slug still use pageHead() and httpMemo() from chrome.ts, and every new rule is scoped to body.landing or to a class only this page emits, so those two pages are byte-identical. Verified: typecheck clean; wrangler dev returns 200 with all five marks rendered and no old-chrome markup; /verify, the viewer and /style.css still 200; true 360px and 768px viewports (rendered inside sized iframes, because headless Chrome clamps its own window to 500px) show no page-level horizontal overflow. This bends DESIGN.md §1, §3, §5.2, §6 and §7 - see the block comment in styles.ts. The doc needs amending if this direction is accepted; not touched here so it doesn't get rewritten for a design that may not ship. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
🚀 Cloudflare previewURL: https://51e1ea11-htmlbin.utkarsh2012.workers.dev Built from commit
|
The previous pass measured length against Vercel/Linear/Resend and cut jargon. That is a line edit. It never asked who the reader is, what job they are hiring this for, or whether the fold competes. Scored against the four questions a fold has to answer, it came out: what is it - fine what problem - never stated why different - buried below the fold what do I do next - no verb anywhere on the page Fixes, in order of weight: - Headline states the job instead of the mechanic. "Your agent writes HTML. You get a URL." describes what happens; a reader who does not already feel the pain has no reason to care. "Send your agent's work as a link, not a file." names the job, and "not a file" carries the pain without being a complaint. Grounded in what the heaviest user said unprompted: reading markdown files is the thing they stopped doing. - The subhead stops spending its 13 words on auth friction. Nobody is blocked on auth; that is a risk reducer, not a differentiator, and it was sitting in the highest-value slot on the page. It now carries the actual differentiator (a URL that survives revision) plus two claims that were true and unstated: free, and no signup. There is no billing code in this repo, so free is accurate. - A real call to action. The page had none: the only action was a small copy pill in the code box chrome. Copying the prompt IS the conversion event that starts the device-code flow, so it gets a button with a verb, and the label tracks the active tab so it stays true. The in-chrome pill is removed, so there is still exactly one copy affordance. Microcopy underneath carries the risk reducer that used to be the subhead. - Capability headings are now one grammatical shape. They ran as a noun phrase, an imperative, a bare noun and a declarative, which reads unconsidered in a list people scan. - "drops" is gone from the marketing surface. It is our word; a first-time visitor does not have it yet. The API, skill and docs keep the product vocabulary. Verified: typecheck clean, wrangler dev serves all five changes. Known accuracy problem, not fixed here: the nav and footer say "open source" but this repo has no LICENSE file (the CLI repo is MIT). That claim is currently wrong and needs a license chosen, which is not a copy decision. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Footer white strip was a real bug, not a spacing choice. .footer-merged carried margin-bottom:56px as the last child of a <main> with padding:0, so that margin collapsed through main and out of body — landing outside the body's background box. html still has the base stylesheet's white background, so it showed through as a 56px strip under the footer. Bottom spacing is now padding, which cannot collapse, plus min-height:100vh on body.landing so any future escaping margin can't expose white again. Verified by sampling pixels at the bottom of a 3600px render: rgb(244, 245,246) all the way down. Also: - The "open" link was 11.5px in the faintest ink on the page, floated to the far right by margin-left:auto, so it sat nowhere near the version it acts on and read as decoration. It now follows "· v1", says "open the live page", wears the accent with an underline, and actually opens in a new tab — which is what the ↗ was already promising. - "Get the CLI" deep-links to #install rather than the repo root. The button names an action, so it should land on the install command instead of a README to scan. Anchor verified present. - The gap between the works-with strip and the evidence block was ~114px (18px fine-print margin + 92px section padding), which pushed the embedded page most of a screen down. That block is a continuation of the fold rather than a new section, so it gets lsec-tight at 48px. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Redesign of
/only. Ready for a look in the morning — the preview URL is the thing to judge, not the diff.Why the previous attempt failed
I first tried making the page less AI-like by subtraction: removed the accent-coloured word, deleted the subhead, killed the motion, flattened the shadows, tightened the radii. Every change survives a slop checklist. The aggregate turned the page into an unstyled document.
The reference pages (portradar, zerolang, subtitlegenerator) are heavily designed. They just don't spend the budget on slop vocabulary. So this pass is additive.
What changed
#F4F5F6+ dot texture/api/onboardresponseCopy lengths are researched, not guessed. Vercel ships a 5-word headline; Linear 8 + 13; Resend 8 + 12. This lands at 8 + 13.
The memo is retired here, and this is the reason. It rendered
to:,from:andre:as if they were HTTP headers. They are RFC 5322 email headers. The component built to signal protocol-seriousness was showing invented ones — which the engineers most worth impressing would notice./api/onboardreturns 13.4 KB across 21 real sections; showing it beats drawing it.Copy drops insider language. "Mints a new version" and "slug stays put" are phrases nobody outside this repo says.
Logos: four, not seven
New
src/views/logos.ts, inlined so the page makes no third-party request. Only marks whose identity I verified against the source SVG<title>are included — Claude, Cursor, OpenAI (for Codex), Cline, from simple-icons 16.28.0 (CC0-1.0).Excluded on purpose: Aider and Devin aren't in simple-icons, and the
ampslug there is Google AMP, not Sourcegraph's Amp. Those three are named in prose instead. A wrong logo reads worse than no logo, and these are other companies' trademarks.Scope
Landing only.
/verifyand/p/:slugstill usepageHead()andhttpMemo(); every new rule is scoped tobody.landingor to a class only this page emits, so those two pages are unchanged.Verification
wrangler dev→ 200, all five marks render, zero old-chrome markup/verify, the viewer, and/style.cssstill 200/p/:slug/raw, which does not bumpview_count, so the homepage won't inflate that drop's counterTwo things needing your call
radial-gradientand the evidence frame's bottom fade is alinear-gradient. Both are functional rather than decorative, but §3 rules out gradients outright, so they need an explicit carve-out.Known rough edges
ztx4J9P. If that drop is deleted the frame goes blank..prompt-markCSS instyles.tsis now dead for the landing but still referenced by nothing — safe to remove in a follow-up.🤖 Generated with Claude Code