01Client
Daybook
02Timeline
1 brief, shipped in slices
03Tech Stack
Next.js, React, TypeScript +4 more
04Live Site
Visit →00In Brief
What
A treasury-clarity product concept — consolidated cash across four entities, a scroll-driven "cash river" of one operating day, and runway maths that prints its own assumptions. Designed and built end-to-end as LAB-01, the studio’s first self-initiated concept.
What was hard
Concepts invite dishonesty — fake clients, invented traction, dark-UI sameness. Daybook had to prove range (a paper-ledger editorial world that looks nothing like GoSmartR) while staying honest on every surface: the LAB-01 label travels with it, and every figure is openly illustrative.
How
A scoped design system no global token can reach — warm paper, ink serif, banker’s green, gold reserved for decoration because it fails AA as text. One data module feeds the river, the vignettes and the screen-reader table; the hero figure is derived from the event stream, not typed in. The river’s renderer was chosen by measurement, SVG over canvas, with the numbers kept.
Result
Live at /lab/daybook inside the studio site: a pinned day-cycle visualisation scrubbed by scroll, reduced-motion and no-JS safe, console-clean, with build receipts printed on the page — a range proof in the exact vertical the Scale tier serves.
01The Challenge
Prove the studio works at the level its Scale tier sells to — funded fintech and B2B platforms — without a fintech client on the books yet. The template-mill answer is a fake portfolio piece; the honest answer is a concept that says so. Daybook also had to demonstrate range: GoSmartR’s own site is dark, indigo and Geist-led, so the concept needed a world of its own, built with the same rigour. The problem itself is lived, not invented: the founder operates four entities, and cash fragmented across companies, currencies and banks is invisible until month-end.
The Design
02The Approach
One page, executed to the bone. A scoped paper-ledger design system — Fraunces and Inter, ink on warm paper, banker’s green for money-in, gold strictly decorative after it failed AA as text — sealed off from the global token scope in both directions. The signature section is the cash river: one operating day, 00:00 to 23:59, scrubbed by scroll inside a pinned stage, where invoices land, payroll leaves and a treasury sweep crosses entities as ribbons that reshape with every event. The scene is a pure function of the day-minute, so scrubbing is reversible and reduced-motion users get the settled end-of-day composition. SVG beat canvas in a measured shootout and the losing renderer was deleted. Every surface — including this case entry — carries the LAB-01 concept label.
The Solution
The Cash River
A scroll-scrubbed day cycle: four entity ribbons gather into one consolidated position, recolouring by flow type as events fire — green in, ink out, a gold arc for the 16:30 inter-entity sweep. Deterministic geometry makes the scrub reversible and the reduced-motion fallback free.
A Sealed Design World
Every Daybook token lives under one scoped attribute — no indigo, no Geist, no studio motion tokens inside; no paper-ledger tokens reachable outside. The build is gated by greps in both directions, and the tokens file documents the contrast ledger, including why gold may never carry text.
Runway That Shows Its Working
The projection panel prints its own assumptions as receipt-style footnotes — trailing-average burn, committed-only inflows, no growth curve — and the page’s honesty section lists the build receipts: routes, components, type errors, and performance figures only once they are measured.
Next Project