The field guide · /guide
How this site
was built.
This site was designed and built end to end by Claude (Fable 5) working inside Claude Code, from a single prompt, with no mockups and no design files. This page is the recipe, so you can do the same for your own site.
01Start with a concept, not components
The single biggest difference between a generic AI page and a designed one is a point of view. Before writing any code, Claude read the business's real positioning docs and committed to one idea: "the reweaving". The company helps chaotic busywork become deliberately redesigned work, so the site opens on a field of loose, frayed threads that slowly weave themselves into a calm braid. Every other choice (palette, type, pacing) serves that one metaphor.
It also committed to explicit anti-references: no purple SaaS gradients, no course-funnel look, no consulting blandness, no neon AI hype. Knowing what you refuse to look like is half the design.
02Respect the brand's palette
Every color here is inherited unchanged from the production workredesigned.co token system: pale mint paper, charcoal ink, a bright teal for fills and CTAs, and a deep teal "drench" for the dark moments. All of it is defined in the OKLCH color space, which keeps perceived lightness honest and makes contrast auditable:
The whole page cross-fades between mint paper and the teal drench as you scroll between acts. That is done by flipping one data-theme attribute on <body> and letting CSS variables re-skin every component through a single transition. The fixed header uses mix-blend-mode: difference so it re-inverts itself over any background for free.
03Choose type with real character
Fraunces carries the display voice. It is a variable font with rare axes: optical size, SOFT (how round the terminals are) and WONK (whether letters sit slightly askew). The italic accent words animate those axes on scroll, so headlines literally soften and loosen as the argument turns human. Schibsted Grotesk handles body text and the small spaced labels. One hero word even gets a hand-drawn squiggle underline, an SVG path that draws itself in.
04Draw the hero by hand
The hero is not WebGL and not a library. It is a plain 2D <canvas> with about thirty threads drawn stroke by stroke, sixty times a second:
- Each thread is a polyline whose y position mixes a slow value-noise wander (the fray) with two gentle braided waves (the weave).
- A single progress value eases from fray to weave over the first few seconds, so the field settles like fabric being smoothed.
- The pointer bends nearby threads apart, like a hand passing through tall grass.
- A few dozen drifting pollen dots add warmth. Everything is stroked in the brand's teals on mint paper.
Performance care: device pixel ratio is clamped, the render loop pauses when the canvas leaves the viewport, and prefers-reduced-motion gets a single settled, quiet frame instead of a loop.
05Choreograph the scroll, but never take the wheel
GSAP ScrollTrigger runs the pacing on top of the browser's own native scrolling: a soft one-breath preloader, line-by-line headline reveals, a typographic hinge where the thesis settles in word by word, a timeline that draws itself, and counters that only count when seen. Early drafts used smooth-scroll hijacking and pinned sections; testing with a senior, time-poor audience in mind cut both. Motion decorates the reading, it never owns the scrollbar.
06Keep the craft honest
- Semantic HTML, skip link, visible focus states, labelled controls.
- Everything readable with JavaScript disabled; animation scaffolding only applies under an
html.jsclass. prefers-reduced-motionhonored with real alternatives, not broken layouts.- No frameworks and no build step: hand-written HTML, CSS, and JS, deployed as-is.
07Ship it
Deployment is the boring part, on purpose: a netlify.toml with publish = ".", a redirect so /guide serves this page, and one CLI command: netlify deploy --prod. Then three full iteration passes in a real browser, checking type scale at every breakpoint, contrast, motion timing, and the tails of every interaction, fixing what the fine-toothed comb finds.
The honest summary
The stack is deliberately small: static HTML and CSS, one hand-drawn canvas scene, GSAP for choreography, Google Fonts for type, Netlify for hosting. No frameworks, no WebGL, no build step. The differentiator isn't the tools. It's committing to one concept, respecting the brand you were handed, and then iterating like you mean it.