Not the restrained white-and-black the fintech-infrastructure category implies: the page opens on a saturated -210deg blue-to-teal gradient carrying a full-bleed line-engraved Benjamin Franklin in banknote hatching, with the headline gradient-clipped through lime, teal and white at 76px, weight 500 and -4.5% tracking. The accent is never a flat hex — brand colour always arrives as a gradient, whether the hero ground, the clipped type, the mint lozenge CTA or the black pill wrapped in an animated chromatic ring that fades a magenta glow up on hover. Below the fold the site inverts to a cool lilac wash with navy ink, 20px-radius cards in pale ice-blue and circular outline arrow buttons, and the nav stays a floating translucent pill detached from the viewport edge. Depth is shadow rather than border, and display type is deliberately lighter than the buttons beneath it.
Browse Plaid in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: plaid.com (live DOM, computed styles), 2026-07-20. Coverage: home. The :root layer (~310 vars) is mostly Plaid Link SDK modal tokens, not marketing tokens — the marketing values below are read from computed styles. Dashboard: not captured (needs login).
Not the restrained white-and-black fintech-infrastructure look the category implies. The page opens on a saturated blue-to-teal diagonal gradient (`-210deg, #07578c → #0e94d8 → #42f0cd`) carrying a full-bleed line-engraved Benjamin Franklin in banknote hatching — a money-engraving motif blown up to hero scale. On top of it the headline is gradient-clipped text running lime → teal → white, and the nav is a **floating translucent pill** detached from the page edge. Below the fold the site inverts to a cool lilac canvas (#f5f5ff → #f7faff → #e5fcff) with deep navy ink #02294b and 20px-radius cards washed in pale ice-blue. The signature control is a black pill wrapped in a chromatic animated ring with a magenta glow that fades up on hover. Nothing is square.
Feels: engraved, luminous, optimistic-technical, high-gloss.
| Token | Hex | Role / usage |
|---|---|---|
| Navy ink | #02294b | Primary headline + body ink on light sections |
| Deep teal ink | #012e37 | Card titles, alternate ink |
| Neutral ink | #232424 | UI / control labels |
| Slate muted | #5c7695 | Second clause of two-tone headlines |
| Grey / teal muted | #595b5c / #05565c | Secondary body copy |
| On-dark | #ffffff | All text over gradient / dark bands |
| CTA ink | #003e4a | Text inside the pale mint CTA |
| Token | Hex | Role / usage |
|---|---|---|
| White | #ffffff | Card and control fill |
| Lilac canvas | #f7faff | Page canvas below the hero |
| Ice fill / Lilac fill | #ccf8ff / #eaddfd | Product card washes |
| Navy band | #00172e | Dark section ground |
| Teal band | #012e37 / #034049 / #05565c | Dark section ladder |
| Near-black | #0c1116 / #020304 | Deepest ground, code panels |
| Token | Hex | Role / usage |
|---|---|---|
| Control border / Card hairline | #dde3e9 / #ebf0f4 | Outline pills, card edges |
| Neutral hairline | #dcdcdc / #d8d8d8 | Dividers |
| Periwinkle | #a3a3ff | Accent outline / focus |
| Name | Value | Usage |
|---|---|---|
| Hero ground | linear-gradient(-210deg,#07578c 27.07%,#0e94d8 59.71%,#42f0cd 92.45%) | Hero band |
| Headline clip | radial-gradient(circle at 0% 0%,#86ef5a .86%,#10d0b7 38.09%,#ffffff 69.81%) | background-clip:text on h1 |
| Mint CTA | linear-gradient(108deg,#cdf5fd 0%,#d8fef3 50%,#e8fed7 100%) | Secondary CTA fill |
| Black CTA | linear-gradient(77deg,#111112 0%,#373839 100%) | Primary CTA fill |
| Canvas wash | linear-gradient(47.75deg,#f5f5ff,#f7faff 50%,#e5fcff) | Page background |
| Dark band / Glow | linear-gradient(95deg,#012e2e,#012e37) · rgba(208,70,246,0) 0 0 25px | Section grounds; CTA halo |
Rules. There is no single flat accent hex — brand colour always arrives as a gradient (hero ground, clipped headline, CTA fill, CTA ring); flat colour is only ink, hairline or a pale card wash.
"Plaid Sans", sans-serif"Inconsolata", monospace — API paths and code samples"Bowery Street" — used sparingly for pull quotes| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero h1 | 76/85.12px (1.12) | 500 | -3.4px (-4.5%) |
| Section headline | 26/36.4px (1.4) | 500 | -0.5px |
| Card / eyebrow h2 | 20/22px | 600 | -0.4px |
| Hero body | 24/33.6px (1.4) | 400 | normal |
| Body | 16/24px | 400 | normal |
| Control label | 20px | 600 | normal |
| Small control | 14px | 600 | normal |
| Mono / code | 26.9px (scaled) | 400 | -0.061px |
Patterns. Weight ceiling is 600, reserved for controls and small labels — big display type is *lighter* (500) than the buttons under it. Tracking is aggressively negative at display size (-4.5% at 76px) and near-zero below 26px. No uppercase eyebrows. Headlines are frequently two-toned: navy first clause, #5c7695 second clause.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.