Ledgerline — Deep-Teal + Mint Fintech Startup (Dashboard Hero)
A trustworthy deep-teal fintech-startup landing page with a mint accent and cream text: a split hero with a product dashboard mock and a floating virtual card, a bento feature grid, a stats traction band, a security certifications grid, and a glowing CTA.
Summary
A trustworthy fintech-startup landing page in a calm deep-teal world with a mint accent and cream text. Top-down: a sticky blurred teal nav, a split hero (left: a NEW-yield pill, a big 'Finance built for the speed of a startup' headline with the last word in mint, sub-copy, dual CTAs and a trust row; right: a glassy product dashboard mock showing an operating-account balance, a mint area chart and auto-categorized transactions, with a tilted virtual-card chip floating off the corner), a centered 'trusted by' compliance logo strip, a bento feature grid mixing wide and tall cards with inline product mocks (send-money, receipt-matching, per-card controls, accounting sync), a stats / traction band of four big mint figures plus a pull-quote, a security & compliance section with a certifications badge grid (SOC 2 / PCI / GDPR / ISO), a glowing centered CTA, and a four-column footer. A soft mint radial 'grain' glow sits behind the hero, traction band and CTA.
Style
Calm, premium fintech aesthetic built on deep teal surfaces, a single mint accent, and warm cream text. The whole page lives on teal-900 #0f3d3e with darker teal-950 #0a2a2b panels and lighter teal-800 #134847 / teal-700 #1b5a58 card fills; the one accent is mint #4fd1c5 (used for the logo mark, primary buttons, the chart line, positive numbers, check marks, eyebrows and tinted icon tiles), and all text is cream #eef5f0 at varying opacities. Surfaces read as soft frosted glass via thin inset cream hairline 'rings' (inset 0 0 0 1px rgba(238,245,240,0.08)) and deep ambient drop shadows rather than hard borders. A reusable mint 'grain' backdrop (layered radial mint glows + a subtle top vertical wash) sits behind the hero, traction band and CTA. Trust, calm, and clarity over flash: lots of breathing room, tabular-numeric figures for money, gentle hover tints, no harsh contrast.
Layout & Structure
A single frameless, fully responsive web page (not a fixed-size mockup), centered in a max-w-7xl container with px-6/lg:px-8 gutters. Vertical flow: sticky blurred nav -> split hero (copy left, dashboard mock right) -> centered 'trusted by' compliance strip -> a bento feature grid (wide + tall cards with inline mocks) -> a stats/traction band (4 figures + pull-quote) -> a security & compliance section (copy + certifications badge grid) -> a glowing centered CTA -> a 4-column footer. The hero is the centerpiece: a two-column grid (lg:[1.04fr_1fr]) that stacks on mobile, with the product dashboard mock and a tilted floating virtual-card chip on the right. The nav stays pinned and frosted while the mint grain sections scroll beneath. Responsive: the hero, feature bento and traction grids collapse to one column, the cert grid goes 2->1, the floating card chip and some trust items hide on small screens, and headline sizes clamp down.
Sticky nav
Hero (split)
Trusted-by compliance strip
Feature bento grid
Stats / traction band
Security & compliance
CTA + footer
Components
Product dashboard mock
The hero's right-side product proof: a glassy operating-account dashboard with a balance, a mint area chart and auto-categorized transactions, sitting on a soft mint halo.
Floating virtual-card chip
A tilted mini credit-card that floats off the dashboard mock's bottom-left corner to sell the 'cards' product.
Frosted teal glass surface
The repeating card/pill/row treatment — frosted teal with a thin cream inset hairline ring instead of a hard border.
Mint grain backdrop
The soft multi-bloom mint glow field reused behind the hero, traction band and CTA.
Mint pill button + glow
The signature primary CTA reused in the nav, hero, traction and CTA sections.
Special Notes
Frameless, fully responsive web page (not a fixed-size artboard); dark/teal color-scheme only. Built with Tailwind (CDN) + a small custom-CSS layer for the grain backdrop, the inset-ring 'ringline'/'softcard'/'dash-shadow' shadows, the mint glow and tabular-nums; typography is Inter only (optical-sizing 14..32, ss01/cv11, weights 400-800) from Google Fonts, with Iconify Phosphor icons. There is no JS — every 'interactive' element (status pills, progress bar, togg'd states) is static. Key responsive behavior: the hero and traction grids collapse to one column, the feature bento wide cards drop their col-span, the certifications grid goes 2->1, the floating virtual card and the third hero trust item hide on small screens, and the nav center links collapse on mobile while the bar stays sticky/frosted. To rebrand, keep the frosted-teal-glass + single-mint-accent system and the grain backdrop, and swap the deep-teal surface ramp (#0a2a2b/#0f3d3e/#134847/#1b5a58) and the mint accent #4fd1c5.