LEDGER/01 — Tables With a Spine

Summary

A brutalist marketing page for an AI data-table generator ('Ledger/01'), anchored on one hard-edged 'audit-grade' invoice table. The whole page is built from a thick 3px/4px black hairline grid on off-white paper with a single acid-yellow accent: a sticky bordered nav, a grid-paper hero with a giant uppercase headline (the word 'spine.' set in a black box on an acid highlight) and a 3-up stat strip, a black scrolling marquee, the showcase invoice table (black inverted header row, status-badge cells, tabular-numeral money column right-aligned, a bold black total footer), a dark 'schema' band of 3 enforced-rule cards plus an acid-bordered prompt.txt block, a 3-up pricing grid with one acid 'most picked' plan, a full-bleed acid CTA, and a footer. Everything is squared-off (no border radius) with hard offset drop-shadows (box-shadow x/y 0 black, sometimes doubled with acid) and JetBrains Mono labels over an Archivo black display face.

Style

A neo-brutalist / swiss-grid aesthetic on warm off-white 'paper' (#f4f1ea) with near-black 'ink' (#0a0a0a) and a single electric acid-yellow accent (#e8ff00). Nothing is rounded: every surface is a rectangle outlined in a thick black rule (3px on most elements, 4px on the main table and section dividers, 2px on small badges) and lifted with a HARD offset shadow (box-shadow with 0 blur, e.g. 6px 6px 0 ink, 4px 4px for small, 10px 10px for large, and a doubled 6px/12px ink+acid for the hero prompt block). The look is loud and structural: the grid IS the design. Type is a two-family system, Archivo (a heavy grotesk, weights up to 900) for huge uppercase black display headlines set very tight (tracking -0.02 to -0.03em, leading 0.86-0.92) and JetBrains Mono for every label, button, table cell, badge and body line, always uppercase and tracked-out (letter-spacing 0.1-0.2em). Money and dates use tabular-nums so columns line up to the pixel. Accent usage is disciplined: acid-yellow appears as the highlight behind a headline word, the 'most picked' plan card, one stat cell, the active status badge, the marquee separators, the total-row sum, the prompt-block chrome, and the final CTA band, never as fill noise. Two faint background textures: a 28px black hairline grid (.grid-bg) on the hero and pricing sections, and full black-fill bands (nav-marquee, schema, CTA) for rhythm. Text selection is acid-on-ink.

Layout & Structure

A single-column full-bleed marketing page (no max-width on sections; an inner mx-auto max-w-[1180px] px-5 md:px-8 container centers content) stacked top to bottom: a sticky bordered nav -> a grid-paper hero (eyebrow badge + giant 3-line headline + mono subhead + 2 CTAs + a 3-cell stat strip) -> a black scrolling marquee -> the anchor 'The Table' section (section header with chips + the brutalist invoice table card + a caption) -> a dark 'Schema' band (3 enforced-rule cards in a bordered grid + an acid-framed prompt.txt block) -> a 'Pricing' grid-paper section (3 plan cards, the middle one featured in acid) -> a full-bleed acid CTA -> a footer. Sections are separated by a 4px black bottom border. Everything aligns to the thick-rule grid.

Sticky bordered nav

Grid-paper hero

Black scrolling marquee

The Table (anchor showcase)

Schema dark band

Pricing grid + acid CTA + footer

Special Notes

Stack: Tailwind via CDN with a custom theme (colors paper #f4f1ea, ink #0a0a0a, acid #e8ff00; fontFamily mono = 'JetBrains Mono', grotesk = 'Archivo'), Google Fonts 'Archivo' (400/600/700/800/900) + 'JetBrains Mono' (400/500/700/800), and Phosphor icons via Iconify iconify-icon (icons used: ph:grid-four-fill, ph:rows-fill, ph:number-square-one-fill, ph:text-aa-fill, ph:check-bold, ph:x-bold). Custom CSS utilities: .shadow-hard (6px 6px 0 ink), .shadow-hard-sm (4px 4px), .shadow-hard-lg (10px 10px), .shadow-hard-acid (6px 6px ink + 12px 12px acid); .grid-bg (28px hairline graph-paper grid in rgba(10,10,10,0.06)); .tnum (font-variant-numeric tabular-nums); .marquee-track (translateX 0 to -50% over 22s linear infinite) with a @keyframes marquee; .cell-hover:hover { background: #e8ff00 } for table rows; ::selection { background #e8ff00; color #0a0a0a }; html { scroll-behavior: smooth }. Layout tokens: every section is full-bleed with a 4px black bottom border and an inner mx-auto max-w-[1180px] px-5 md:px-8 container; sticky nav is h-16, z-50. Key techniques to preserve: (1) NO border radius anywhere, thick 2/3/4px solid black rules as the only structure; (2) hard ZERO-blur offset shadows (never soft/blurred) layered black-then-acid on the prompt block; (3) a strict two-type system, Archivo black for giant uppercase tracking-tight display + JetBrains Mono uppercase tracked-out for all labels/cells; (4) tabular-nums on every money/date so the table columns align decimal over decimal; (5) the invoice table is a real <table> (thead bg-ink inverted, 3px ink cell borders, right-aligned .tnum money column, a bold bg-ink tfoot total with the sum in acid) wrapped in overflow-x-auto with min-w-[640px] so it scrolls horizontally on narrow screens rather than reflowing; (6) acid-yellow #e8ff00 is rationed to highlight moments only (headline word box, featured plan, one stat cell, active 'Paid' badge, marquee slashes, total sum, prompt chrome, CTA band).