How this site was built

One of five sites designed and built end-to-end by Claude (Fable 5) in a single autonomous session. This one argues that a solo advisor's site can be an audit trail — a place where every number carries its evidence status.

The concept

The Ledger takes one engagement — Saudi Film Festival 12 — and walks through it as seven ledger entries. The design borrows the discipline of accounting: ruled lines, dotted leaders, tabular numerals, and a three-state evidence system. Measured figures are stated plainly. Estimated figures are marked every time they appear. And two Withdrawn figures are shown struck through — numbers that were removed from the record because they could not be substantiated. Most portfolios hide that; here it is the centrepiece, because the deletion is the strongest proof of how the rest was counted.

The build, step by step

1. Facts before pixels. Every figure on the page comes from the Sapiency brand system's verified record — a file that lists what may be claimed, what is an estimate, and which two numbers were withdrawn. The page structure was written first as copy, then designed.
2. A split stage. The layout is a two-column grid: a sticky full-height <canvas> on the left, scrolling entries on the right. On mobile the canvas docks to the top at 38% of the viewport and the entries scroll beneath it.
3. Seven hand-drawn scenes. No chart library. Each chapter drives a Canvas 2D scene keyed to its scroll progress: six forms merging into one; a dot-grid master filling to 771 records; a quality scan with eleven orbiting checks; record-matching threads where doubtful cases stop at a question mark; coverage gauges with message beams; an estimate band drawn with hatching (the visual convention for "not a measurement"); and the two withdrawn figures dissolving. Scene switching is driven by which chapter owns most of the viewport.
4. Typography as evidence. Ubuntu carries display; Ubuntu Mono carries every numeral, tag, and caption — tabular, like a ledger should be; Mulish carries prose. All three fall inside the brand's two-family rule (Ubuntu and its mono are one family).
5. Performance discipline. The canvas render loop pauses whenever the panel leaves the viewport or the tab is hidden. prefers-reduced-motion swaps the loop for static frames redrawn on scroll.
6. Three iteration passes. Full-page audits in a real browser at desktop and mobile widths after each build round — spacing, contrast, scene legibility, copy discipline — each pass checked against the brand fundamentals before moving on.

Reproduce it

Start from your own verified record: three lists — measured, estimated, withdrawn. If the third list is empty, look harder. Then give each state a consistent visual grammar and never let a number appear without one.

Back to The Ledger