# Plaid — Marketing site Design Spec

> 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).

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Text

| 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 |

### Surfaces

| 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 |

### Borders

| Token | Hex | Role / usage |
|---|---|---|
| Control border / Card hairline | `#dde3e9` / `#ebf0f4` | Outline pills, card edges |
| Neutral hairline | `#dcdcdc` / `#d8d8d8` | Dividers |
| Periwinkle | `#a3a3ff` | Accent outline / focus |

### Accent gradients (the accent *is* a gradient — no single flat brand hex)

| 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.

## 3. Typography Rules

- Display / UI: `"Plaid Sans", sans-serif`
- Mono: `"Inconsolata", monospace` — API paths and code samples
- Editorial accent: `"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.

## 4. Component Stylings

**Primary CTA (black, chromatic ring)** — `background:linear-gradient(77deg,#111112,#373839);
color:#fff; border-radius:100px; height:56px; padding:13px 32px; font:600 20px;` wrapped in
an animated multi-hue border ring; hover fades in `box-shadow: rgba(208,70,246,.x) 0 0 25px`
via `transition:opacity,box-shadow .3s ease-in-out`.

**Secondary CTA (mint)** — `background:linear-gradient(108deg,#cdf5fd,#d8fef3 50%,#e8fed7);
color:#003e4a; border:0; border-radius:46px; height:56px; padding:13px 32px; font:600 20px;
box-shadow: inset 0 1px 5px rgba(0,0,0,.15);` — the inset highlight makes it a lozenge.

**Outline pill** — `background:#fff; border:1px solid #dde3e9; border-radius:999px;
height:47px; padding:12px 24px; font:600 14px; color:#232424; transition:box-shadow .2s
ease-out` — hover lifts by shadow only; the border never changes.

**Nav** — a floating rounded pill inset from the viewport edge (not a full-width bar):
translucent light fill over the hero gradient, ~76px tall, logo mark + wordmark, four
chevron-disclosed link groups, an outline "Log in" pill and the black ringed CTA. It stays pinned as a pill on scroll.

**Product cards** — 20px radius, pale ice-blue (`#ccf8ff`) or lilac (`#eaddfd`) gradient
wash, no border, a two-tone 26px headline and a **circular outline arrow button** top-right.
**Cookie / system bar** — full-width deep teal band with a white ghost pill and a mint
gradient pill.

## 5. Layout Principles

Content sits on a wide centred column with generous side gutters; the hero art bleeds full
viewport width behind it. Section rhythm is band-based — light lilac canvas alternating
with saturated gradient and deep teal/navy bands, each running edge to edge. Cards are 2-up
at desktop with 20–24px internal padding. Base spacing 8px; paddings 12/24/32. Max-width:
not captured.

## 6. Depth & Elevation

Radius census: `100px` (111 — the pill), `20px` (83 — cards), `8px` (47), `16px` (35),
`2px` (31), `24px`, `999px`, `50%` (circular icon buttons), `40px`.

Shadow recipes (verbatim):

- `rgba(208,70,246,0) 0px 0px 25px 0px` — the CTA chromatic glow, animated from 0 alpha (40 elements)
- `rgba(125,125,125,0) 0px 86.756px 24.378px 0px, …` — a very large multi-stop ambient float under hero art
- `rgba(0,0,0,.2) 0px 0px 5px 0px` — generic lift · `rgba(0,0,0,.2) 0px 4px 8px 0px` — raised card
- `rgba(0,0,0,.15) 0px 1px 5px 0px inset` — the mint CTA's inset highlight

Philosophy: **shadow, not border.** Hairlines exist but hover states are almost always a
box-shadow change; the mint CTA is the only inset recipe.

## 7. Motion

- `color .1s ease-in-out` — 74 elements, the base hover.
- `transform, opacity 1.5s ease` — 61 elements: a slow, long scroll-reveal rise.
- `opacity, box-shadow .3s ease-in-out` — 40 elements: the CTA glow fading up.
- `opacity .3s ease-in-out` — hero headline and art.

The chromatic CTA ring animates continuously; nothing scales or bounces.

## 8. Backgrounds, Effects & WebGL

The hero is a CSS diagonal gradient with a large **line-engraving illustration** (banknote
hatch style, Franklin plus a phone) composited over it in blues, teals and magentas —
raster art, not WebGL. Below it the canvas is a soft three-stop 47.75° gradient; the nav
pill is translucent over it and product cards use pale two-stop washes. No canvas/WebGL
element, no background video, no grain/noise texture observed.

## 9. Do's and Don'ts

### Do
- Make the accent a **gradient**, not a flat hex — hero ground, clipped headline, CTA fill.
- Clip display text to `radial-gradient(circle at 0% 0%,#86ef5a,#10d0b7,#ffffff)` for the signature headline.
- Float the nav as a detached pill inset from the viewport edge.
- Two-tone headlines: navy `#02294b` first clause, `#5c7695` second clause.
- Set display type at 500 and controls at 600 — controls are the heavier voice.
- Use pills (100px) for controls and 20px radius for cards; circular arrow buttons on cards.
- Lift on hover with a shadow/glow, never with a border colour change.

### Don't
- Don't render a plain white minimal fintech page — the hero is a saturated gradient with engraved illustration.
- Don't use weight 700+ anywhere, and don't set display type heavier than its buttons.
- Don't introduce a single flat brand colour to stand in for the gradients.
- Don't square off corners (smallest real radius is 8px) or use uppercase letter-spaced eyebrows.

## 10. Responsive Behavior

Not captured — desktop viewport only. The nav pill and 2-up card grid are the obvious
collapse candidates.

## 11. Agent Prompt Guide

- Canvas `#f7faff` · Text `#02294b` · Muted `#5c7695` · Border `#dde3e9` · Accent `linear-gradient(-210deg,#07578c,#0e94d8,#42f0cd)`
- Font: "Plaid Sans", sans-serif · Body: 16/24px · Radius: 100px control / 20px card · Control height: 47–56px · Focus: periwinkle `#a3a3ff` outline · Hover: `box-shadow .2s ease-out` lift + `rgba(208,70,246,α) 0 0 25px` glow

<plaid_design_language>
A luminous fintech-infrastructure surface where the accent is always a gradient, never a flat
hex. The hero is a saturated diagonal `linear-gradient(-210deg,#07578c,#0e94d8 60%,#42f0cd)`
carrying a full-bleed banknote line-engraving, with the headline gradient-clipped in
`radial-gradient(circle at 0% 0%,#86ef5a,#10d0b7,#ffffff)` at 76px/1.12, weight 500, -3.4px
tracking. Below it the canvas inverts to a cool lilac wash `#f7faff` with navy ink `#02294b`,
slate muted `#5c7695`, hairlines `#dde3e9`. Type is Plaid Sans with a 600 ceiling used only on
controls, Inconsolata for code. Controls are 56px 100px-radius pills: a black
`linear-gradient(77deg,#111112,#373839)` primary inside an animated chromatic ring with a
`rgba(208,70,246,α) 0 0 25px` hover glow, and a mint `linear-gradient(108deg,#cdf5fd,#d8fef3,#e8fed7)`
secondary with an `inset 0 1px 5px rgba(0,0,0,.15)` highlight. Cards are 20px radius with pale
ice-blue `#ccf8ff` washes and circular outline arrow buttons; the nav is a floating translucent
pill inset from the viewport edge. Depth is shadow, not border. Motion: 100ms colour, 300ms
glow, 1.5s ease scroll-reveal rise.
Feels: engraved, luminous, optimistic-technical, high-gloss.
Avoid: a plain white minimal page, a single flat brand colour, weight 700, square corners,
uppercase letter-spaced eyebrows, or display type set heavier than the buttons.
</plaid_design_language>