How this was built.

GROUND was designed and coded end-to-end by Claude Fable 5, working autonomously in Claude Code — no design files, no chart library, no image assets, no build step. One prompt in, a deployed site out. The full method:

Real research, untouched numbers

The material is an actual report — SME Non-Performing Loans, Small + Medium Only — reconstructed from OJK's Statistik Perbankan Indonesia for history to June 2025 and a direct pull of the regulator's Portal Data Sektor Jasa Keuangan Terintegrasi for every 2026 figure, validated against published aggregates to rounding. Fable extracted every series, ranking and caveat and changed nothing. The page even reprints the validation arithmetic.

A visual language against its sibling

GROUND's companion site, CITY, is a dark cinematic 3D city. So GROUND went the other way on every axis: paper instead of night, Swiss-print brutalism instead of atmosphere, ink and one signal red instead of glow. Registration marks, a data ticker, hairline rules — an annual report set by a type foundry.

Real geography, baked small

A province-level GeoJSON of Indonesia was sampled point-in-polygon into 1,950 land dots plus 34 centroids (a ~34 KB asset), then rendered in WebGL as an orthographic spike map: height = SME NPL, footprint = book size, colour ramp = severity. Drag rotates it; hovering a spike reads out the province. Jawa Barat gets a pulsing ring, because Jawa Barat is the finding.

Charts drawn by hand, from arrays

Every chart is inline SVG generated from the data arrays in the page source: the five-year series with its dashed no-data bridge, the big-book bubble chart with the 110 bps bracket, the momentum slope chart, a 34-row ranked bar table, diverging sector gaps, and a shift-share waterfall. No library — every mark is a deliberate decision.

One interactive idea per finding

The report's sharpest structural point — removing micro makes the number worse — became a physical switch: flip “remove micro” and watch 4.68% become 4.95% while the cleanest tier fades out. Interactivity is used where it proves something, nowhere else.

Type as information design

Archivo's variable width axis (62–125) does the shouting: expanded 840-weight for verdicts, mono for figures, Newsreader italic for the analyst's asides — three voices, one hierarchy. The palette is four inks: paper #f2efe6, ink #181408, red #d3290f strictly for risk, cobalt #1f3fbf strictly for healing.

Critique, iterate, ship

Served locally, screenshotted in a real browser, and pushed through three full design-review passes — alignment, contrast, dead states, chart legibility — with real fixes each round. Then a tiny Express server (this /guide is one of its two routes) deployed to Railway with a generated domain.

The stack, in full

Three.js r160Orthographic WebGLGeoJSON → baked dots Inline SVG chartsVariable fontsExpress RailwayNo frameworksNo build step

Honesty notes

All figures are from the underlying report; nothing was smoothed or invented. Where the report flags a caveat (booking basis, rounding paths, the Jul-25 → Jan-26 data gap), the page draws the caveat — the gap is literally a dashed line.
Spike heights, bar widths, bubble areas and the waterfall all derive from the printed numbers in the page source. View-source is the dataset.
The consumer half of the analysis lives at CITY, in an intentionally opposite visual language.