What is Plaid's primary brand color?

Plaid does not run a single brand voltage in the Stripe sense — instead the system uses a sequence of saturated chromatic bands as section dividers. The hero band runs deep teal #088181 with #10d0b7 and #42f0cd accents; the network band runs indigo-blue #0a54c4 with #156ef5 highlights; the analytics band runs violet #6748d8 with magenta #b14edb and pink-magenta #bb33d7. Black #111111 is the universal ink, used as both text color (592 occurrences) and 1px border color (590 occurrences). Buttons sit on absolute black with white text, or on white with black text — the chromatic bands provide the background voltage, not the buttons.

What typography does Plaid use, and what should I use if Plaid Sans isn't available?

Plaid runs three families: Plaid Sans (proprietary, the display and hero register, weights 400 / 500 / 600), Cern (the UI body register at 16px / weight 400 and 20px / weight 600), and Inconsolata (the monospace register used inside dashboard mockups at 26.9px). The hero h1 lands at 76px with -3.4px letter-spacing — a compression value larger than the brand's body type. Display tiers stair-step 76 / 70 / 50 / 30 / 24 / 20px with letter-spacing scaling from -3.4 down to -0.4px. If Plaid Sans is unavailable, Inter Variable at weight 500 with matching negative tracking approximates the rhythm; for the monospace register, JetBrains Mono or Inconsolata (open-source) at weight 400 substitutes directly. Avoid pairing Plaid Sans with Helvetica — they read as visually adjacent and the brand's deliberate weight-500 register collapses.

What are the chromatic bands and why do they matter?

Plaid's signature layout move is the chromatic band: each scroll section is a single saturated color stretching edge-to-edge, with a centered #ffffff card or product mockup floating above. The five canonical bands on the home page are teal #088181 (hero / onboarding), green-teal #10d0b7 (payments), indigo-blue #0a54c4 (fraud-signal network), magenta #b14edb / violet #6748d8 (analytics), and a near-black-violet #0d0d3f (footer). The pattern matters because it inverts the white-canvas fintech default — where Stripe and Mercury use one canvas color throughout, Plaid uses the canvas itself as the visual section divider. Never break a band with a second background color; never run two bands in the same hue family back-to-back.

Why does Plaid use a 100px button pill but only a 20px card?

The radius scale collapses to two dominant tokens: 100px (frequency 40, the full pill applied to every CTA and tag) and 20px (frequency 34, the card surface radius). The gap between them is intentional — the pill reads as a discrete interactive object, the 20px card reads as a contained data surface. 8px (frequency 6) appears on form inputs only; 40px (frequency 8) on a small set of rounder dashboard cards. There is no 12px or 16px in the system — avoid those values when porting. The 100px / 20px split is the brand's geometric signature.

What's the structure of Plaid's CSS variable layer?

Plaid declares 315 custom properties on :root, organized as a token-pipeline rather than semantic roles. There are three layers: raw scale tokens (--t5-black-1000, --t5-black-600, --green600, --purple400), aliased semantic tokens (--color-text-high-contrast, --color-border-state-default, --color-fill-bg-primary), and component-state tokens (--t5-button-bg-solid-resting, --t5-textinput-border-focused, --t5-button-icon-outlined-pressed). The black ladder runs --t5-black-100 (#ffffff) → --t5-black-600 (#7d7d7d) → --t5-black-900 (#232424) → --t5-black-1000 (#111111). Reference the component-state tokens directly when porting; the brand encodes hover / pressed / loading / disabled at the token level rather than via state selectors.

What's missing from this DESIGN.md spec?

A handful of areas, captured in the Known Gaps section: the dashboard product chrome of the authenticated Plaid Dashboard application (this spec captures the marketing surface only); the precise motion specs of the swash typography animation and the inter-band scroll transitions; the sub-brand palettes for Plaid Identity, Income, and Investments which each layer a small accent over the core chromatic bands; the exact gradient stops of the multi-color blob backgrounds inside the hero (treated here as a single solid teal token); and the full a11y / contrast audit of the white-on-saturated-color body type on the magenta and violet bands.

Plaid Design System

Plaid's fintech-infrastructure design system as a DESIGN.md file.

About Plaid DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source plaid.com

Banking & Payments
Fintech & Crypto

Plaid's design language is the chromatic-band marketing page taken to a categorical extreme. The hero opens on a deep teal-green wash, the next section flips to white with a centered iPhone mockup, the next to mint-green, the next to violet-blue with a fraud-signal chart, the next to deep magenta with a dashboard composite. Each band is a single saturated color — never a subtle gradient, never a wash of pastels. Where most fintech-infrastructure brands stretch one indigo across the entire scroll, Plaid assigns one chromatic story per product capability and lets the band do the section break. Body text and borders share absolute black "#111111" — the system's highest-frequency token at 1184 occurrences across text and 1px hairline borders — and the reading canvas inside each card returns to pure "#ffffff" with no off-white softening.

This page packages the full system into a single DESIGN.md file. Inside: 22 color tokens spanning the brand chromatic bands and the structural ink/canvas register, 11 typography levels across Plaid Sans, Cern, and Inconsolata, 5 corner radii on a split pill/card scale, 8 spacing values, and 19 components — pill buttons, the floating product card, the dashboard composite with monospace code, the chromatic band itself as a layout token, and the dark footer panel. Every hex is quoted; every Plaid Sans weight (400, 500, 600) is reproducible. The format is the Google Labs DESIGN.md spec — plain text, machine-readable, AI-toolable.

Feed the file to Claude, Cursor, or GitHub Copilot. The AI writes React components and Tailwind classes that match Plaid's particular dialect — chromatic-band sectioning, Plaid Sans display at weight 500 with aggressive negative tracking, the 100px pill on a 20px card surface, and the Inconsolata monospace code blocks composited inside dashboard mockups — rather than a generic indigo-and-white fintech theme. Inter Variable at weight 500 with "-3.4px" tracking on hero display sizes approximates Plaid Sans; the proprietary family is not licensed for redistribution. Use the chromatic bands as your section-break grammar; never compress two bands into a single panel.

What makes it distinct

Chromatic band canvaseach section is a full-bleed saturated gradient (teal #088181, magenta #b14edb, indigo #0a54c4, violet #6748d8), one story per color
Absolute black inktext and borders share #111111 at frequency 1184, the highest single-token density in the system
Plaid Sans 500 with -3.4px trackingthe hero h1 lands at 76px with negative letter-spacing larger than the brand's body type size
100px pill on 20px cardbuttons round to 100px (frequency 40) while cards round to 20px (frequency 34); the radius gap is the brand's geometric signature
Inconsolata code registera single monospace register at 27px appears inside dashboard mockups, the only non-Plaid-Sans display type on the page

Live at plaid.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

plaid.com

Explore Plaid

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Plaid design system FAQ

Common questions about Plaid's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Plaid — official site

The financial-data infrastructure platform whose marketing surface this DESIGN.md captures.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use Plaid in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→