How This Was Built.

Concept & Inspiration

LEDGER is the restrained end of the spectrum: an argument that "less but better" can carry an agency's claims on its own, with no imagery, no gradients, and almost no motion to hide behind. The reference point is the postwar International Typographic Style — Josef Müller-Brockmann's Grid Systems in Graphic Design, the Zurich school's use of a strict column grid to organize information without decoration, and the broader Swiss habit (Vignelli, Ruder, the Neue Grafik journal) of treating grid discipline itself as the aesthetic statement rather than a scaffold to be dressed up afterward.

The name "Ledger" gave the concept a second, more literal anchor: an accounting ledger is already a grid — ruled rows, numbered entries, tabular figures, a running folio count. Rather than build an abstract "Swiss template," every section on the page is modeled as a numbered entry in a book: a running header showing "current entry / total entries," a huge numeral acting as the folio mark, and horizontal rules between rows that read as ledger lines rather than decorative dividers. The one red accent is used the way a bookkeeper would use red ink: to mark a specific figure, never to decorate a whole page.

Typography & Grid System

Two typefaces, both self-hosted via @fontsource-variable so there are no third-party font requests: Big Shoulders Display, a condensed grotesque variable font, carries every numeral and headline set in uppercase — its narrow proportions let a two-digit folio number get genuinely huge (up to clamp(5rem, 22vw, 15rem) on the hero numeral) without ever forcing horizontal scroll. Inter Tight — a tightened-tracking variant of Inter, not the default cut — carries all body copy, labels, and tabular data. Both load through variable-font axis interpolation (font-variation-settings) rather than shipping multiple static weights, which keeps the font payload to two files.

The grid is 12 columns at desktop (>1024px), collapsing to a 4-column grid at tablet, and a single column below 640px. Rather than draw the grid as a decorative background layer, every rule you see is a real border-top or border-left on an actual content cell — the pillar cards are ruled apart with a vertical line between them at desktop, and the same three cards get a horizontal rule between them once they stack to one column at tablet/mobile. That means the grid can never visually desync from the content at a breakpoint the way an independent background-image grid can. Vertical rhythm follows an 8px baseline unit; type sizes and block spacing are set in multiples of that unit (or clamp() expressions between two multiples) so the page holds a consistent measure at any viewport width.

The Restrained Motion Approach

There are exactly two animated behaviors on the page, both one-shot and both progressive enhancement:

• Accent underlines beneath the hero tagline, the manifesto quote, and the contact call-to-action draw themselves via a single transform: scaleX() transition (never width, to stay off the layout thread), triggered once by an IntersectionObserver when the element first enters the viewport.
• Numerals count up from zero the first time their section scrolls into view — the three pillar numerals to "01," "02," "03," and the disciplines section's folio numeral to "06" — using requestAnimationFrame with a simple cubic ease-out, no animation library.

Both behaviors degrade safely. The server-rendered HTML already contains the correct final numeral text and the underline markup, so if JavaScript never runs, the page is still complete and correct — the animation is a bonus, not a dependency. prefers-reduced-motion: reduce is honored twice over: the CSS forces the underline's transform straight to its end state with no transition, and the boot script checks matchMedia before ever starting a requestAnimationFrame loop, so reduced-motion visitors get the final state immediately rather than a suppressed-but-still-running animation.

Honest Tradeoffs

1. Zero images raises the cost of every spacing decision. With no photography or illustration to fill visual gaps or hide seams, every baseline mismatch, every uneven column, every slightly-off numeral size is immediately visible — there's nothing else on the page to look at. That pushed more time than usual into the baseline math and into choosing borders-on-real-cells over a background-image grid overlay, which is more robust across breakpoints but slightly less "infinite ledger paper" in feel than a full-bleed ruled background would have been.

2. The count-up and underline-draw logic is hand-rolled, not library-driven. That keeps the JavaScript payload for the entire site under two kilobytes and matches the brand's own stated belief — "static-first, ship HTML, hydrate only what moves" — but it means the easing is a single fixed cubic curve rather than a tunable spring, and there's no shared timeline coordination between numerals if several enter the viewport at once. For a site whose entire premise is restraint, that felt like the right side of the tradeoff to be on.