Design system — site 6 of 12
THE LEDGERLINE LOOK
Neo-brutalism tuned for fintech: acid lime, hot pink, true black, zero blur, zero apology. This page documents the palette, the type, and the three signature motion techniques that make the site feel like it settles in T+0.
01 — THE PALETTE
#D4F441 --lime
Primary accent. Hero backgrounds, CTA fills, highlights on dark.
#111111 --black
Structure. Every border, every shadow, every developer surface.
#FF3E7F --pink
Secondary accent. Highlight boxes, pricing section, punctuation.
#FFFFFF --white
Base. Breathing room between the loud blocks.
WHY NOT IVORY + ORANGE?
This site shares a structural language with Laimen-style neo-brutalism (hard borders, offset shadows, mono labels), but the color story is deliberately different. A Laimen-style brand runs warm — ivory, black, orange, gold, peach. Ledgerline runs electric: acid lime, hot pink, true black on white. Same bones, different voltage. Put the two side by side and they read as two brands that happen to shop at the same hardware store — never as one design system in two coats of paint.
02 — THE TYPE
Display
ARCHIVO BLACK
One weight, and it's the heaviest one. Archivo Black is a grotesque built for headlines that behave like freight. It fills space aggressively, kerns tight, and never whispers — which is exactly the register a company promising 99.995% uptime should speak in.
MONEY MOVES. YOUR LEDGER SHOULDN'T GUESS.
Body & UI
Archivo
The same family at working weights (400–800). Body copy stays legible and slightly condensed; UI labels go uppercase with 0.15–0.25em letterspacing for a mono-adjacent, terminal-flavored feel. One superfamily means the loud parts and the quiet parts are provably related.
Eyebrow labels look like this
03 — THE MOVES
KINETIC TYPOGRAPHY
Hero headline words spring in one at a time — scale, rotation, and vertical slide on a stiff spring (stiffness 420, damping 26). Payments infrastructure is about confidence under motion. Type that lands hard and settles fast says the same thing the uptime number does.
framer-motion staggerChildren
MARQUEE BANDS
Pure CSS translateX loops between sections, doubled content for a seamless wrap. They act as loud section dividers — the digital equivalent of hazard tape. A confident brand repeats itself on purpose.
CSS @keyframes, overflow: hidden
3D CARD STACK
Transaction cards live in a perspective: 1800px scene with preserve-3d, fanning out as you scroll via useScroll and useTransform. No WebGL, no Three.js — just CSS transforms doing what payment cards do best: stacking up.
preserve-3d + useScroll
HARD SHADOWS, THICK BORDERS
Every elevated element gets a 3px black border and a zero-blur offset shadow (4px to 8px). Nothing floats softly. Ledgers don't have opinions about ambiguity, and neither does this layout.
box-shadow: 6px 6px 0 0 #111
SEE IT ALL RUNNING ON THE HOMEPAGE
Back to the site