Turn data into revolutionary financial products

Connect to real-time insights on the Plaid Network to create fast, safe, and smart financial experiences.

See how AI is shaping fintech

Powered by the largest financial network. Built for every financial need.

Bank payments designed for fast connection and high conversion

Credit scoring & underwriting that reflects real-time financial behavior

POST /auth/get 200 OK · 118ms
{ "account_id": "blgvvBlXw3cq5GMPwqB6s6q4dLKB9WcVqGDGo",
  "balances": { "available": 110.94, "iso_currency_code": "USD" } }
Plaid Checking · ****0000$110.94
Plaid Saving · ****1111$210.00
Plaid Credit Card · ****3333−$410.00
Controls

Every control is a pill. Depth is shadow, not border.

Primary 56px Primary — hover glow Mint CTA 56px Outline 47px Disabled
you@company.com Focused — periwinkle #a3a3ff Chip Outline chip Mint chip

Controls run 47–56px tall at 100px radius. The primary is a black linear-gradient(77deg,#111112,#373839) wrapped in an animated chromatic ring, gaining 0 0 25px rgba(208,70,246,α) on hover over 300ms ease-in-out. The mint CTA carries an inset 0 1px 5px rgba(0,0,0,.15) highlight that makes it read as a physical lozenge. Outline pills lift by box-shadow .2s ease-out only — the border never changes colour.

Typography

Plaid Sans, display lighter than its buttons

Hero h1 · Plaid Sans · 76/85.12 (1.12) · 500 · -3.4pxTurn data into products
Section headline · Plaid Sans · 26/36.4 · 500 · -0.5pxPowered by the largest financial network.
Card / eyebrow h2 · Plaid Sans · 20/22 · 600 · -0.4pxSee how AI is shaping fintech
Hero body · Plaid Sans · 24/33.6 · 400 · normalConnect to real-time insights on the Plaid Network.
Body · Plaid Sans · 16/24 · 400 · normalFast, safe, and smart financial experiences for every product team.
Control label · Plaid Sans · 20 · 600 · normalStart building
Small control · Plaid Sans · 14 · 600 · normalSee all products
Mono / code · Inconsolata · 26.9 · 400 · -0.061px/auth/get
Two-tone second clause · Plaid Sans · 26 · 500 · #5c7695Built for every financial need.
Palette

The accent is a gradient. Flat colour is only ink, hairline or wash.

Text
navy ink#02294b
teal ink#012e37
neutral ink#232424
slate muted#5c7695
grey muted#595b5c
teal muted#05565c
CTA ink#003e4a
Surfaces
white#ffffff
lilac canvas#f7faff
ice fill#ccf8ff
lilac fill#eaddfd
navy band#00172e
teal band#034049
teal band 3#05565c
near-black#0c1116
deepest#020304
Borders
control border#dde3e9
card hairline#ebf0f4
neutral hairline#dcdcdc
divider hairline#d8d8d8
periwinkle focus#a3a3ff
Accent gradients
hero ground — linear-gradient(-210deg,#07578c 27%,#0e94d8 60%,#42f0cd 92%)
headline clip — radial-gradient(circle at 0% 0%,#86ef5a,#10d0b7 38%,#ffffff 70%)
mint CTA — linear-gradient(108deg,#cdf5fd,#d8fef3 50%,#e8fed7)
black CTA — linear-gradient(77deg,#111112,#373839)
canvas wash — linear-gradient(47.75deg,#f5f5ff,#f7faff 50%,#e5fcff)
dark band — linear-gradient(95deg,#012e2e 28%,#012e37 77%)
Gradient stops — every captured stop, flat
hero stop 1#07578c
hero stop 2#0e94d8
hero stop 3#42f0cd
clip stop 1#86ef5a
clip stop 2#10d0b7
mint stop 1#cdf5fd
mint stop 2#d8fef3
mint stop 3#e8fed7
black CTA stop 1#111112
black CTA stop 2#373839
canvas stop 1#f5f5ff
canvas stop 3#e5fcff
dark band stop 1#012e2e
Depth & motion

Shadow, not border

2px
8px
16px
20px card
24px
40px
100px pill
50% arrow
0 0 25px rgba(208,70,246,α)
0 0 5px rgba(0,0,0,.2)
0 4px 8px rgba(0,0,0,.2)
inset 0 1px 5px rgba(0,0,0,.15)
0 86.8px 24.4px ambient float

Motion: color .1s ease-in-out is the base hover (74 elements); transform, opacity 1.5s ease drives a slow scroll-reveal rise (61 elements); opacity, box-shadow .3s ease-in-out fades the CTA glow up (40 elements). The chromatic ring animates continuously. Nothing scales or bounces.