The worked example for the new website workflow: the marketing site for Clipper, the app built in the new app workflow. The site has one job: turn a curious podcaster into a download.
A solo podcaster running a one-person show. They just saw a Clipper-made clip, or went looking for a faster way to make one, and they're curious for about a minute.
The painMaking a clip means scrubbing an hour of audio in a video editor and captioning by hand. So most episodes ship without one, and most episodes go unheard.
Why it needs to existClips are how podcasts get found, and nobody else is going to make them for a show of one. The site's job is to show Clipper doing the work, then send that podcaster to the App Store.
Post a clip five minutes after you publish.
Three points, each with its proofSearches for a way to clip a podcast, lands skeptical, reads the three points. Outcome: taps through convinced, or leaves knowing exactly what Clipper is.
Journey 3 · the return visitSaw it last week, comes back to check the fine print before downloading. Outcome: the FAQ answers it, taps through.
Direction before pixels. Three words to build toward: quick, legible, a little loud. Then references, each named for the one thing it lends.
A reference earns its tile by finishing the sentence "lends · ". One that can't gets cut.
Pages carry the journeys they serve. Every path ends at the store.
A page with no journey numbers is a page nobody asked for.
One section stack per page. Real first-draft headlines, no styling.
Sections carry names and journey numbers. Design styles these later; the words are already true.
Thin on purpose. The stack is decided once for every site we ship: Next.js on Vercel. This stage writes down the handful of choices that remain.
The only running part is the site itself. There is no database: the copy is the state, and it lives in the repo.
Signups go straight to a hosted list, so the list outlives any rebuild of the site.
One line per decision, the stack included. Written as the choices land, and again whenever the build later overrules one. A decision that needs its argument written out also gets a file in docs/adr/, and its line points to it.
The tokens, decided once. Every component reads from these; nothing hardcodes a color or a face.
color ├─ paper → #FFFFFF ├─ ink → #16181C ├─ caption → #F2C21F the accent; the product is captions └─ soft → #5D636E type ├─ headlines → Bricolage Grotesque 700 └─ body → Public Sans 400 / 600 space → 4 8 12 16 24 40 64 radius → 10px cards, pill buttons motif → the caption block: ink box, paper text, 3px radius
The motif comes from the product. Clipper makes captions, so the site speaks in caption blocks.
The wordmark is the word Clipper set in the headline face inside a caption block. There is no logo project.
The repeatable sections, built in code with real copy. These are the design deliverable; there is no handoff file.
| Component | Where it runs | Notes |
|---|---|---|
| hero | home | The one-liner in caption blocks, one button. |
| clip-demo | home · how it works | A real exported clip, muted, looping. |
| point-row | home | Three points, each with its proof. |
| cta-band | every page, last section | The one action, restated. |
| faq-item | faq | Question, short answer. No accordions. |
Each component names where it runs. A component no journey needs doesn't get built.
Every page standing on a preview URL, built from the Design components with the Sketch copy. Demo: the preview link, on a phone.
M2 · sharpenA pass per page: rhythm, spacing, motion, and the copy read aloud once.
M3 · wireSignups land on the list, analytics counts, every page has its title, description, and preview card.
M4 · launchThe checklist walked, then the DNS flip. Demo: the real URL.
A ticket, whole#7 · home · j1 · hero · done when: the one-liner and the button render on a phone
Walked on a phone by someone who didn't build it.
Launch when the column is green, then flip the DNS.