How this was printed.

The brief: the same product as its sibling site (Countam — accounting software for Nigerian businesses) but a fundamentally different design language. Where the other concept is a dark WebGL nebula, this one is ink on paper: a general ledger art-directed like a broadsheet newspaper that fell in love with a Risograph.

The concept

Accounting is one of the oldest print technologies in the world — ledgers, receipts, rubber stamps, adding-machine tape. Instead of hiding that heritage behind SaaS gradients, this design leans all the way in: the page itself is ruled like ledger paper (a repeating 32px CSS gradient), a red margin line runs down every page, and the pricing section is literally a receipt that prints itself line-by-line when you scroll to it.

Print tricks in CSS

• Misregistration: the hero headline has blue and yellow copies offset behind the ink layer (two pseudo-elements reading attr(data-t)) — and they drift subtly with your cursor, like a print that never quite dried. That's the Countam brand palette doing the work of a whole art direction.
• The rubber stamp: "RECONCILED" slams in with an overshoot ease (cubic-bezier(.2,2.4,.4,.9)) and gets its worn texture from an SVG feTurbulence mask.
• Torn paper: receipt and tape edges are zigzag clip-path polygons.
• The barcode is a repeating linear gradient. Zero images on the whole site.

The adding machine

The site's pet: a piece of adding-machine tape pinned to the right edge that keeps printing Nigerian business life — jollof catering, diesel for the gen, ankara restock, PAYE filed — with a running total, one entry every couple of seconds. It slides away politely once you scroll past the hero so it never covers the content. Ambient proof that the books are being kept even while you're just reading.

Typography & color

• Archivo (variable width axis, pushed to 125%) for headlines — a grotesque with newspaper bones.
• Instrument Serif italic for editorial asides — the voice in the margin.
• IBM Plex Mono for everything a machine would have typed: receipts, folios, tickers.
• Countam blue #009CFF and yellow (warmed to #FFE93C) behave like riso spot inks on cream #F5EFE2; the red #E5482E is the auditor's pen.

The ledger as UI

The feature grid is an actual double-entry table: each module posts a debit (what it costs you today — "shoebox", "deadline fear") against a credit (what Countam returns — "order ✓", "filed early ✓"). The footer row: BALANCED ✓. Product truth, stated in the product's own native document format.

Ship it

One HTML file, styles and scripts inline, fonts from Google Fonts. Built autonomously by an AI agent (Claude Fable in Claude Code) that art-directed, wrote the copy, coded, screenshotted its own preview, caught its own bugs (an inline-button overlap, a tape/headline collision) across three review passes, then deployed to Netlify via the Netlify MCP connector.

Do it yourself

Pick a design language your product secretly already lives in (accounting = print), forbid yourself stock imagery, and make one element genuinely alive (here, the tape). Then make the agent look at its own work — screenshots, DOM measurements, mobile pass — at least three times before shipping. The review loop is where the taste happens.