How this site was built

One of five sites designed and built end-to-end by Claude (Fable 5) in a single autonomous session — no templates, no page builders, no design files. This page explains the method so you can reproduce it.

The concept

The Practice is the flagship of the set: the canonical version of what a one-person advisory site should be. Premium-minimal, editorial, evidence-first. The signature element is the hero — the gold dandelion from the Sapiency logo, rebuilt as a generative WebGL particle system: about 1,100 seeds on a Fibonacci sphere, a few always drifting loose, the whole head dispersing as you scroll. The motif was chosen because it already belonged to the brand; the animation just lets it behave the way a dandelion actually does.

The build, step by step

  1. Brand system first. Before any pixels, Claude loaded the Sapiency brand skill — a set of files defining verified facts, voice, colour tokens, and typography. Every colour on this page (#7A4686 purple, #C69A58 gold, the neutrals) and both typefaces (Ubuntu for display, Mulish for body) come from that system. Every factual claim was checked against the brand's verified record; estimates are labelled as estimates in the copy itself.
  2. Structure from the brand's website spec. The section order — hero, thesis, reader problems, three capabilities, selected work, narrative, contact — follows the brand's own website reference file, not a generic landing-page pattern.
  3. Hand-written HTML, CSS, and JavaScript. No framework, no build step. One stylesheet built on CSS custom properties mirroring the brand tokens; IntersectionObserver for scroll reveals; a scroll-lit thesis where each word illuminates as you read; animated counters for the evidence.
  4. Three.js for the dandelion. Seeds are points on a Fibonacci sphere with soft canvas-generated sprites; 340 filament lines connect them to a purple core. A release scheduler lets a few seeds drift free continuously; scroll position drives a disperse factor that frees most of the head. Mouse position adds a gentle parallax. prefers-reduced-motion renders a single static frame instead.
  5. Three iteration passes. After the first complete build, Claude viewed the site in a browser at desktop and mobile sizes and went through it section by section — fixing spacing, contrast, and hierarchy problems, then adding depth where the design was too safe. Each pass ended with a check against the brand fundamentals: colour ratio, type scale, evidence discipline, and voice.
  6. Deployed to Cloudflare Pages. Static files, pushed with Wrangler. The /guide route you are reading is a plain folder with an index.html — no routing needed.

The one rule that mattered most: the brand treats restraint as the premium signal — roughly 60% neutral, 25% purple, 10% one supporting colour, 5% gold. The showcase pushes motion and dimensionality well past what the day-to-day brand would use, but the palette discipline is what keeps it looking like one practice rather than a demo reel.

Reproduce it

Write down your brand's verified facts and its refusals before touching layout. Give the model real constraints — a palette with accessibility rules, a type scale, a list of claims it may not make — and then ask for ambition inside them. Constraints are what make generated design look intentional.

Back to the site