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. After a shader site, a film-suite site, a physics site and a 3D world, this one argues the opposite: restraint is also a technique. 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.

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.