How Still was made

One of five sites built autonomously by Claude Fable 5 (Anthropic’s Claude, in Claude Code) to demonstrate AI web design — then chosen as the keeper and expanded into a complete thirteen-page studio site: work, case studies, services, studio, a journal of essays, and a contact page that’s a letter. Still one typeface, two colors, no images, no frameworks.

Concept

The brand line “anyone can be loud — we’d rather be heard” becomes the whole design system. Ivory paper, warm ink, a single burnished-gold accent, and acres of whitespace. The only spectacle is typographic: the site is set entirely in Fraunces, a variable font with four axes — optical size (9–144), weight (100–900), SOFT (0–100) and WONK (0–1) — and those axes do all the performing.

The breathing headline

The hero word “Heard.” is split into letters, and every letter’s weight follows your cursor: proximity swells it up to +420 weight units and +100 SOFT, with a slow idle sine “breath” when the cursor is away. Each value eases 10% per frame, so the type feels like it inhales:

const influence = Math.max(0, 1 - dist / 320);
l.targetWeight = 340 + 40*Math.sin(t*.8 + i*.9)  // idle breath
                     + influence * 420;           // cursor swell
l.w += (l.targetWeight - l.w) * 0.10;             // ease
el.style.setProperty('--w', l.w);
/* CSS: font-variation-settings: "wght" var(--w), "SOFT" var(--s) */

One family, every voice

• Display at opsz 144 — hairline contrast, sharp serifs. Labels at opsz 9 with .34em tracking — reads like engraved smallcaps. Body at opsz 12–14. Same font file, three completely different voices.
• Emphasis is never bold: it’s italic + SOFT 100 + WONK 1 — Fraunces’ “wonky” alternates — in gold. Services soften into that state on hover, easing font-variation-settings over 0.7s.
• Roman numerals, MMXXVI, hairline rules that draw themselves in gold on first view: colophon manners, not dashboard manners.

Rules the design obeys

• Two ink colors + one accent. The accent appears only where meaning lives.
• No borders thicker than 1px. No shadows. No images. Nothing moves unless the reader caused it (the idle breath is the one licensed exception).
• Reveals are slow (1.3s) and small (26px) — calm has a frame rate.
• prefers-reduced-motion stops the breathing and shows everything at rest.

From one page to a studio

The expansion promoted the page’s private habits into a shared system — assets/still.css and assets/still.js — then let every new page speak the same language:

• The map: home · /work/ with three told case studies and three “held in confidence” · /services/ · /studio/ · /journal/ with three essays · /contact/ · a 404 that just says Shh.
• Case studies as editorials: every case runs the same three chapters — the noise, the signal, the cut — with a brief card, one pull quote, and three serif numerals that count up on scroll (easing 1−(1−p)⁴, oldstyle-free tabular feel, no odometer gimmick).
• The pulse: the section divider site-wide is a 1px hairline with a single quiet waveform pulse in the middle — the brand’s “signal in the noise” drawn literally, as an SVG whose dash-offset draws in on first view.
• Diagrams with no images: Aureline’s film is a strip of sixty 1px ticks with four gold “held breaths”; Halden’s pipeline is five bordered stations where only the human ones are gold and italic. Data visualization at colophon volume.
• A letter, not a form: the contact page is prose with underlined blanks. Inputs inherit Fraunces, swell in weight on focus, grow with their content in ch units, and “Seal the letter” composes a mailto — nothing stored, nothing tracked.
• Page transitions for free: one CSS rule — @view-transition { navigation: auto } — gives the whole multi-page site a soft cross-fade in supporting browsers. Zero JavaScript.
• The reading thread: a 1px gold progress hairline fixed to the top edge — the only “app” affordance allowed in, because it’s also just a rule.

A note on candour, in the site’s own spirit: the studio is real and young; the three told case studies are illustrative portraits of its kinds of work, written to show how it thinks, not a client roster. The three “in confidence” rows are exactly what restraint looks like when you don’t have permission to name names — or names yet.

Deploy

npx wrangler pages project create tdc-still
npx wrangler pages deploy ./still --project-name=tdc-still

A static folder on Cloudflare Pages; this guide is guide/index.html in the same folder.

Process

The same autonomous loop as its four siblings: write → screenshot at several scroll depths plus mobile in headless Chromium → critique → refine, three times over. Pass two fixed the wrapping logo colliding with the nav on small screens and hid the “move your cursor” hint on touch devices, where there is no cursor to move.