Ledgerline — fintech teal/mint startup landing page

Summary

A calm, premium fintech / neobank startup landing page on a deep teal canvas. Dark teal base (#0f3d3e) with a single bright mint accent (#4fd1c5) and cream off-white text (#eef5f0), Inter throughout with tight tracking and extra-bold display headings. Sticky blurred nav, a two-column hero (copy + a realistic product 'account dashboard' mock with a live balance, area-chart, transaction rows, and a tilted floating virtual-card chip), a centered trust/logo strip, a bento feature grid mixing copy cards with inline product mocks, a stats/traction band plus a pull-quote, a security & compliance section with a certification badge grid, a glowing centered CTA, and a 4-column footer. Subtle mint radial 'grain' glows and inset hairline rings give it depth without noise.

Style

Dark, premium, trustworthy fintech editorial. Deep teal canvas with a single mint accent and warm cream text reads as financial software (Brex/Mercury/Ramp lineage), calm and high-contrast, never neon or busy. Inter for everything (400-800) with very tight tracking on display headings (-0.045em) and extra-bold weights; tabular-nums on all money/figures. Depth comes from layered soft shadows, inset cream hairline 'rings', mint glow on primary buttons, and faint mint radial gradients ('grain') washed over hero/CTA/stats. Fully rounded pill buttons; small uppercase wide-tracked eyebrow/label text; mint used sparingly as the only saturated color so it always reads as the call to action.

Layout & Structure

Single-column long-form landing page, centered max-w-7xl (80rem) container with px-6 / lg:px-8 gutters, on a uniform deep-teal body. Top-down order: sticky blurred header nav; hero (asymmetric 2-col grid ~1.04fr / 1fr: copy left, product dashboard mock right with a tilted floating card chip); a centered trust/logo strip on a darker band; a bento feature section (2-wide + 1 + 1 + 2-wide cards, several with inline product mocks); a stats/traction band (2-col intro + a 2x2 hairline-divided stat grid) followed by a large pull-quote with avatar; a security & compliance section (copy + bulleted assurances on the left, a certifications badge grid card on the right); a glowing centered CTA section; and a 4-column footer with a bottom legal bar. Bands alternate teal-900 / teal-950 tints with hairline cream/10 borders for rhythm. Responsive: the hero and all multi-col grids collapse to one column, nav links and some trust logos / hero meta items hide below their breakpoints, and the floating card chip hides on mobile.

Sticky nav

Hero

Trust / logo strip

Bento feature grid

Stats / traction band

Security & compliance

CTA

Footer

Special Notes

Single Google font: Inter (opsz 14..32, weights 400-800), set as the sans family; no serif. Styled with Tailwind via CDN using a custom theme: teal scale (950 #0a2a2b, 900 #0f3d3e, 800 #134847, 700 #1b5a58, 600 #256a67), mint #4fd1c5, cream #eef5f0, and a custom letterSpacing 'tightest' -0.045em. Body is bg-teal-900 text-cream with -webkit-font-smoothing:antialiased and font-feature-settings 'ss01','cv11'; all monetary figures use tabular-nums. Custom CSS utilities: .grain (layered mint radial + teal linear wash), .ringline (inset cream hairline), .softcard / .dash-shadow (soft deep drop shadows + ring), .mint-glow (mint button glow), .num-mono (tabular-nums), and a mint ::selection. Icons via Iconify iconify-icon web component (Phosphor 'ph:' set). All product data (balances, transactions, certifications, logos, the customer quote) is fabricated placeholder content. Keep mint as the only saturated accent so it always reads as the CTA; the mood must stay calm, premium, secure and high-contrast, never neon, playful or cluttered. Sticky nav, the floating card chip, multi-column grids and hero meta reflow responsibly down to mobile (single column).