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 and a direct pull of the regulator's portal cube, 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 105 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.62% become 4.86% 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.