01
API-first by default
Every action in the dashboard is an authenticated REST + webhook endpoint. No CSV exports.
Read brief
A monochrome fintech homepage built on a blueprint grid backdrop with a disciplined bento feature grid, full-bleed column hairlines, ghost buttons, a marquee compliance strip, a horizontal-scroll capability rail, and a segmented pricing control. Black, white, and one shade of grey — nothing else.
1import { useState } from "react";2import {3 ArrowUpRight, Banknote, ChevronRight, Cpu, Download, Globe,4 Layers, LineChart, Lock, ShieldCheck, Sparkles, Wallet, Zap,5} from "lucide-react";6import "./vault.css"; // see styles tab7 8export default function VaultPage() {9 const [tab, setTab] = useState<"monthly" | "yearly">("monthly");10 return (11 <div className="vault">12 <div className="page">13 <div className="grid-overlay" aria-hidden>14 <span /><span /><span /><span /><span /><span />15 </div>16 17 {/* NAV */}18 <header className="nav">19 <div className="container nav-inner">20 <div className="brand">21 <div className="brand-mark">V</div>22 Vault23 </div>24 <nav className="nav-links">25 <a href="#">Product</a>26 <a href="#">Treasury</a>27 <a href="#">Cards</a>28 <a href="#">Docs</a>29 <a href="#">Pricing</a>30 </nav>31 <div className="nav-cta">32 <a className="btn btn-ghost" href="#">Sign in</a>33 <a className="btn" href="#">34 Open account <ArrowUpRight size={14} strokeWidth={1.75} />35 </a>36 </div>37 </div>38 </header>39 40 {/* HERO */}41 <section className="hero">42 <div className="container">43 <div className="eyebrow">44 <span className="dot" />45 <span>Treasury · Series B · 2026</span>46 </div>47 <h1 className="h1">48 Banking that <em>holds its line.</em>49 </h1>50 <p className="lede">51 Vault is the operating account for ambitious companies. Move money in 9052 countries, settle in 11 currencies, and reconcile in a single ledger —53 without leaving the line.54 </p>55 <div className="hero-actions">56 <a className="btn" href="#">57 Open an account <ArrowUpRight size={14} strokeWidth={1.75} />58 </a>59 <a className="btn btn-ghost" href="#">60 <Download size={14} strokeWidth={1.75} /> Download deck61 </a>62 </div>63 64 <div className="hero-meta">65 <div><div className="num">$4.2B</div><div className="lab">Settled · ttm</div></div>66 <div><div className="num">11,400</div><div className="lab">Companies banking</div></div>67 <div><div className="num">98.99%</div><div className="lab">Uptime · 12mo</div></div>68 <div><div className="num">11</div><div className="lab">Settlement currencies</div></div>69 </div>70 </div>71 </section>72 73 {/* MARQUEE */}74 <div className="marquee">75 <div className="marquee-track">76 {Array.from({ length: 2 }).map((_, dup) => (77 <div key={dup} style={{ display: "flex", gap: 64 }}>78 {[79 "SOC 2 Type II", "PCI DSS Level 1", "FDIC pass-through",80 "ISO 27001", "SWIFT GPI", "Open Banking · UK",81 "PSD2 · EU", "Reg E compliant",82 ].map((t) => (83 <span className="marquee-item" key={\`\${dup}-\${t}\`}>84 <span className="pip" /> {t}85 </span>86 ))}87 </div>88 ))}89 </div>90 </div>91 92 {/* BENTO — see full source for all cells */}93 <section className="section">94 <div className="container">95 <div className="section-head">96 <h2>One ledger. <em>Every movement.</em></h2>97 <p className="sub">98 Eight primitives that compose into the financial back office your99 controller actually wants. Built on rails, audited by humans.100 </p>101 </div>102 103 <div className="bento">104 <div className="cell cell-feature c-8">105 <div className="ico"><LineChart size={18} strokeWidth={1.5} /></div>106 <h3>Real-time <em>treasury</em> across 11 currencies.</h3>107 <p>Sweep idle balances into T-bills, money market funds, or held cash.</p>108 <div className="chart">109 {[34,52,41,68,49,73,58,81,64,92,76,88].map((h,i)=>(110 <div key={i} className={\`bar \${i===11?"live":""}\`} style={{ height: \`\${h}%\` }} />111 ))}112 </div>113 </div>114 115 <div className="cell c-4">116 <span className="tag">01 · Cards</span>117 <div className="ico"><Wallet size={18} strokeWidth={1.5} /></div>118 <h3>Corporate cards with controls per merchant.</h3>119 <p>Issue virtual cards instantly. Lock by category, vendor, or geography.</p>120 </div>121 122 <div className="cell c-4">123 <span className="tag">02 · Wires</span>124 <div className="ico"><Zap size={18} strokeWidth={1.5} /></div>125 <h3>Same-day SWIFT, RTP, and ACH from one interface.</h3>126 <p>Approvals routed by amount, vendor, or department.</p>127 </div>128 129 <div className="cell c-4">130 <span className="tag">03 · Ledger</span>131 <div className="ico"><Layers size={18} strokeWidth={1.5} /></div>132 <h3>A double-entry ledger your accountant can audit.</h3>133 <p>GAAP-aligned categories. Push to NetSuite, Xero, or QuickBooks.</p>134 </div>135 136 <div className="cell c-4">137 <span className="tag">04 · Vault</span>138 <div className="ico"><ShieldCheck size={18} strokeWidth={1.5} /></div>139 <h3>FDIC pass-through up to $125M per entity.</h3>140 <p>Sweep across 14 partner banks automatically. One statement.</p>141 </div>142 </div>143 </div>144 </section>145 146 {/* HORIZONTAL SCROLL */}147 <section style={{ paddingTop: 96 }}>148 <div className="container">149 <div className="section-head" style={{ marginBottom: 40 }}>150 <h2>Built for the <em>operator,</em> not the bank.</h2>151 <p className="sub">Scroll →</p>152 </div>153 </div>154 <div className="h-scroll">155 {[156 { n:"01", icon:Cpu, h:"API-first by default", p:"Every action in the dashboard is an authenticated REST + webhook endpoint." },157 { n:"02", icon:Lock, h:"SOC 2 Type II, audited annually", p:"Penetration tested by Bishop Fox. Zero customer data on partner rails." },158 { n:"03", icon:Globe, h:"Local rails in 32 countries", p:"Send GBP via Faster Payments, EUR via SEPA Instant, USD via FedNow — natively." },159 { n:"04", icon:Sparkles, h:"Spend insights, no AI hype", p:"Vendor consolidation, duplicate-charge detection, runway projections." },160 { n:"05", icon:Banknote, h:"Yield without lockup", p:"Sweep into 4-week T-bills with same-day liquidity. 4.21% APY net of fees." },161 { n:"06", icon:ShieldCheck, h:"Custodial separation", p:"Customer funds never touch our balance sheet. Bank failures cannot expose you." },162 ].map(({ n, icon: Icon, h, p }) => (163 <article className="h-card" key={n}>164 <div>165 <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center" }}>166 <span className="num">{n}</span>167 <Icon size={20} strokeWidth={1.5} />168 </div>169 <h4>{h}</h4>170 <p>{p}</p>171 </div>172 <div className="foot">173 <span>Read brief</span>174 <ChevronRight size={14} strokeWidth={1.75} />175 </div>176 </article>177 ))}178 </div>179 </section>180 181 {/* PRICING with segmented control */}182 <section className="section" style={{ paddingTop: 96 }}>183 <div className="container">184 <div className="section-head">185 <h2>Pricing as <em>literal</em> as the ledger.</h2>186 <div className="segmented" role="tablist">187 <button data-active={tab === "monthly"} onClick={() => setTab("monthly")}>Monthly</button>188 <button data-active={tab === "yearly"} onClick={() => setTab("yearly")}>Yearly · −18%</button>189 </div>190 </div>191 {/* …three .plan cards: Starter / Scale (.pop) / Enterprise — see full source… */}192 </div>193 </section>194 195 {/* CTA + FOOTER — omitted here for brevity, see full source */}196 </div>197 </div>198 );199}200 More than the code: the design tokens, primitives, layout rhythm and step-by-step playbook so you can apply this system to your own product — not just paste the file.
A monochrome fintech homepage in the spirit of operating-account banking products: serious, quiet, technical. Three colors total — black, off-white, one shade of grey. No gradients, no shadows, no brand accent.
#0a0a0a\), paper (\#ffffff\), andone neutral grey for hairlines. Status, hover, focus — everything is resolved by opacity of the ink, not by hue.
centered column begins and ends. They run the full height of the page and give the eye something to anchor on without ever asking for attention.
bento pattern) but every tile has the same paper background and the same 1px hairline border. Visual weight comes from typography, not chrome.
inside an otherwise sans (Geist) headline. That italic is the most decorative thing on the page.
everything tabular is set in Geist Mono so the prose can stay calm.
\\\css --ink: #0a0a0a; --ink-2: #1a1a1a; /* near-black, used sparingly */ --muted: #6b6b6b; /* secondary text */ --hairline: rgba(10,10,10,0.08); --hairline-2: rgba(10,10,10,0.16); --surface: #fafafa; /* page background */ --surface-2: #f3f3f3; /* recessed cards */ --paper: #ffffff; /* raised cards */ \\\
If you need depth, step \surface → surface-2 → paper\. Never reach for color.
| Role | Family | Notes |
|---|---|---|
| Display | Fraunces 300 italic | Only on \<em>\ inside H1/H2. |
| UI / body | Geist | 400 / 500 / 600. |
| Numbers, eyebrows, status, code | Geist Mono | +0.16em tracking on uppercase. |
Two 1px vertical lines that travel the full page, marking the content column. This is the visual signature of the template.
\\\css .rails::before, .rails::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--hairline-2); } \\\
Asymmetric grid (a wide tile + 2 narrow + 3 small). Each tile is the same paper card with hairline border and quiet eyebrow + serif title.
A row of 360px-wide cards that overflow horizontally. Background is transparent so the page rails read through; cards keep a right hairline as the only divider.
A slow-scrolling line of mono labels (SOC2 · ISO27001 · …) sitting on a surface-2 band — the only horizontal rhythm in the entire page.
The same pill primitive used everywhere else, here switching billing cadence.
other section will inherit it.
for the headline tiles — declare the spans explicitly so the rhythm is predictable.
on hover instead.
only display flourish — use it deliberately.
mono. Anything narrative stays sans.
the horizontal-scroll rail keeps overflowing (that's the point); the marquee shrinks but never wraps. Test at 375px and 320px.
rest of the grid looks broken.
(\--hairline-2\) instead.
feels like an ad.