Plaid Design System

Overview

Plaid's marketing surface is the chromatic-band layout taken to a categorical extreme. The page opens on deep teal "#088181" with a giant Plaid Sans h1 set in weight 500 at 76px with "-3.4px" letter-spacing — a compression value larger than the brand's body type size. Each subsequent scroll section flips to a new saturated band: mint "#42f0cd" for onboarding, indigo "#0a54c4" for the fraud-signal network, magenta "#b14edb" and violet "#6748d8" for analytics, near-black violet "#0d0d3f" for the footer. Inside each band, a centered "#ffffff" card or product mockup floats above the canvas with absolute black "#111111" text. The card itself rounds to "20px"; the buttons inside it round to "100px". The geometric gap between those two radii is the brand's signature shape decision.

Chromatic band canvas: where most fintech-infrastructure brands stretch a single indigo across the entire scroll and use color only for accents, Plaid assigns one full-bleed saturated band per product capability and lets the canvas itself do the section break. The band is not decoration; it is the layout grammar. Pill-on-card geometry: the "100px" full pill (frequency 40) is the only button shape in the system, and the "20px" card (frequency 34) is the only surface shape — the absence of an intermediate "12px" or "16px" radius is what makes the geometry read as deliberate rather than scaled.

Black "#111111" carries both text (592 occurrences) and 1px hairline borders (590) — a near-perfect parity that means every dark border in the system shares a CSS variable with every dark text token. White "#ffffff" carries the inside of every floating card. The chromatic bands themselves contain no body text in dark ink; on a colored band, body type inverts to white at 24px / weight 400.

Key Characteristics:

• Chromatic-band sectioning — deep teal "#088181", mint "#42f0cd", indigo "#0a54c4", magenta "#b14edb", violet "#6748d8", footer-violet "#0d0d3f" — one band per scroll story.
• Plaid Sans weight 500 hero display at 76px with "-3.4px" letter-spacing — compression-as-signature.
• Absolute black ink "#111111" for both text and 1px hairlines — frequency 1184, the single highest-density token in the system.
• "100px" pill CTAs on "20px" cards — the radius gap with no intermediate value is the brand's geometric tell.
• Inconsolata monospace at 26.9px inside dashboard composites — the only non-Plaid-Sans display register on the page.
• 315 CSS custom properties on :root, organized as raw / aliased / component-state token layers.
• Cern body register at 16px / weight 400 / line-height 24px — every paragraph, label, and nav link lives here.

Colors

Source pages: home (/).

Ink & Canvas

• Ink ({colors.ink} — "#111111") — frequency 1184. Used as text (592), border (590), gradient (2). The universal text and hairline color; every dark stroke in the system resolves to this hex. Carries --t5-black-1000, --button-primary-fill-default, --color-fill-default.
• Canvas ({colors.canvas} — "#ffffff") — frequency 396. Used as text (189) on dark bands, background (12), border (189). The inside of every floating card and the on-band text color.
• Ink Secondary ({colors.ink-secondary} — "#02294b") — frequency 94. Used as text (44), border (50). Deep navy reserved for form-input borders and inline link emphasis on white surfaces — not black, not gray, a dark blue that adds depth to chrome.
• Ink Deep ({colors.ink-deep} — "#00172e") — frequency 25. Used as text (12), border (12), bg (1). Reserved for the H2 register on white surfaces.
• Ink Muted ({colors.ink-muted} — "#555555") — frequency 18. Used as text (9), border (9). Helper text and table labels.
• Ink Soft ({colors.ink-soft} — "#7d7d7d") — frequency 28. Used as text (2), border (2), shadow (24). The shadow-bearing gray — most of its weight goes to elevation, not type.

Hairlines

• Hairline ({colors.hairline} — "#dcdcdc") — frequency 0 raw, but resolves through --color-border-default-contrast and --t5-textinput-border-resting. The 1px card-border default on white.
• Hairline Soft ({colors.hairline-soft} — "#c5c5c5") — frequency 22. Used as text (11), border (11). The monospace code-block text color and faded chrome.
• Surface Disabled ({colors.surface-disabled} — "#e5effe") — frequency 4. Used as gradient (4). A near-white blue used for disabled inputs and modal-progress fills.

Chromatic Bands

• Band Teal Deep ({colors.band-teal-deep} — "#088181") — frequency 2. Used as gradient (2). The hero band canvas.
• Band Teal ({colors.band-teal} — "#10d0b7") — frequency 2. Used as gradient (2). The mid-band onboarding fill.
• Band Mint ({colors.band-mint} — "#42f0cd") — frequency 3. Used as gradient (3). Carries --green600 and the secure-payments accent.
• Band Indigo ({colors.band-indigo} — "#0a54c4") — frequency 6. Used as text (4), border (2). The fraud-signal network band.
• Band Blue ({colors.band-blue} — "#156ef5") — frequency 2. Used as gradient (2). Network-graph highlight stops.
• Band Sky ({colors.band-sky} — "#37b0f4") — frequency 4. Used as text (2), border (2). Carries --blue700.
• Band Violet ({colors.band-violet} — "#6748d8") — frequency 8. Used as gradient (8). The analytics-band base.
• Band Magenta ({colors.band-magenta} — "#b14edb") — frequency 5. Used as gradient (5). The top brand-layer hex by CSS-variable layer classification — appears in the analytics band and as a section accent.
• Band Pink ({colors.band-pink} — "#bb33d7") — frequency 2. Used as gradient (2). Secondary magenta stop.
• Band Footer ({colors.band-footer} — "#0d0d3f") — frequency 1. Used as bg (1). The near-black violet that fills the final scroll panel.
• Accent Purple ({colors.accent-purple} — "#8358ef") — frequency 2. Used as gradient (2). A brighter violet inside analytics chart fills.
• Accent Mist ({colors.accent-mist} — "#fbe5ff") — frequency 4. Used as gradient (4). A pale pink stop inside multi-stop band washes.

Status

• Status Error ({colors.status-error} — "#ce4553") — frequency 1. Used as gradient (1). Resolves --color-border-status-error and --t5-red-600 — form-validation only.
• Status Warning ({colors.status-warning} — "#f2d211") — frequency 6. Used as text (3), border (3). Carries --yellow800 — reserved for status pills inside the dashboard composite, never on marketing CTAs.

Typography

Font Families

The display and hero register is Plaid Sans (proprietary) at weights 400, 500, and 600 — the entire above-the-fold reading layer lives here. The UI body register is Cern, a workhorse sans that handles every 16px paragraph, nav link, form label, and caption. The monospace register is Inconsolata (open-source via Google Fonts), reserved for the dashboard-composite code block at 26.9px / weight 400.

When Plaid Sans is unavailable, fall back to Inter Variable at weight 500 with matching negative tracking (-3.4px at 76px, scaling proportionally to -0.4px at 20px). Avoid Helvetica or Roboto — both render too geometric for the brand's slightly humanist Plaid Sans silhouette. The Cern fallback chain in the extracted CSS goes Cern → Helvetica Neue → Helvetica → Nimbus Sans → system-ui — keep that ladder intact when porting.

Hierarchy

Principles

• Weight 500 on display. Plaid Sans never drops to weight 400 on display sizes ≥ 30px. Bumping to weight 600+ makes the brand register as enterprise-CRM; dropping to 400 makes it disappear under the chromatic band.
• Negative tracking is the brand. Display tiers carry -3.4px at 76px down to -0.4px at 20px. The tracking value at hero size exceeds the body type's own pixel size — the brand's typographic compression signature.
• Two-family discipline. Plaid Sans handles display, Cern handles UI. Never set body type in Plaid Sans below 24px; never set hero display in Cern.
• Monospace at one register only. Inconsolata appears at 27px inside the dashboard composite code block. There is no 14px or 12px monospace caption — that register does not exist in the marketing system.

Note on Font Substitutes

Plaid Sans is proprietary. Inter Variable (open-source via Google Fonts) at weight 500 with negative tracking is the closest substitute for display sizes. For the Cern body register, Inter at weight 400 or Source Sans 3 at weight 400 approximates the rhythm. For the monospace register, Inconsolata is itself open-source via Google Fonts — no substitute needed.

Layout

Spacing System

• Base unit: 8px (with a 1px hairline sub-token and a 30px wide-button padding token specific to the brand).
• Tokens: {spacing.xxs} 1px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 30px · {spacing.xxl} 40px · {spacing.huge} 64px.
• Section padding: 125px vertical on chromatic bands — the brand pads bands generously so the centered card has breathing room above and below.
• Card internal padding: 40px on the floating product card; 24px on dashboard composites.
• Button padding: 8px 30px — the wide horizontal padding is the brand's tell for "this is a primary action."

Grid & Container

• Marketing chromatic bands extend edge-to-edge; the centered card stays within a ~907px content max-width (the hero heading width).
• The mobile mockup card sits at 253px wide internally — the brand's standard input field width inside that composite.
• Dashboard composites use their own internal multi-column grids rendered as static composites.

Whitespace Philosophy

The chromatic band IS the whitespace system. Where other brands separate sections with 96px of empty canvas, Plaid separates sections with a hue swap. The card-internal whitespace is tight (40px) because the band-external whitespace is the saturated color itself.

Elevation & Depth

Decorative Depth

The chromatic band IS the depth system. The shadow color resolves through {colors.ink-soft} (#7d7d7d) at low alpha — never pure black, never indigo-blue like Stripe's rgba(0,55,112,0.08). The brand's gray-bearing shadow is intentionally chromatically neutral, so the saturated band underneath does the visual work.

Shapes

Border Radius Scale

Photography Geometry

The brand uses product UI mockups more than photography. The hero band includes a single decorative photographic swash (a script-typography overlay) but otherwise the visual storytelling is composited mockups: an iPhone onboarding screen, a fraud-signal network chart, an analytics dashboard with monospace code. All mockups sit inside {rounded.md} 20px containers with a subtle Level 2 shadow.

Components

Buttons

button-primary — the dominant CTA system-wide.

• Background {colors.ink} (#111111), text {colors.canvas} (#ffffff), type {typography.heading-md}, padding 8px 30px, rounded {rounded.pill} 100px, height 48px.
• Hover state button-primary-hover shifts opacity to "0.84" (resolves through --t5-black-1000-84).

button-secondary — outline-style alternative on white.

• Background {colors.canvas}, text {colors.ink}, 1px {colors.ink} border, same pill geometry.

button-on-band — the white pill used on a chromatic band.

• Background {colors.canvas} (#ffffff), text {colors.ink} (#111111), same pill geometry. This is the inversion of button-primary for use directly on a saturated band canvas.

Cards & Containers

card-floating — the centered product card on a chromatic band.

• Background {colors.canvas}, padding 40px, rounded {rounded.md} 20px, Level 2 shadow.

card-dashboard-composite — analytics / fraud-signal composite.

• Background {colors.canvas}, type {typography.code-md} for Inconsolata monospace inside, padding 24px, rounded {rounded.md}.

card-mobile-mockup — the rounder iPhone-frame card.

• Background {colors.canvas}, padding 32px, rounded {rounded.lg} 40px.

card-stat — small metric card inside dashboard composites.

• Background {colors.canvas}, type {typography.display-md} for the big number, padding 24px, 1px {colors.hairline} border, rounded {rounded.md} 20px.

Inputs & Forms

text-input — standard form field.

• Background {colors.canvas}, text {colors.ink-muted} (#555555), type {typography.body-md}, padding 8px 8px 8px 16px, rounded {rounded.sm} 8px, 1px {colors.ink-secondary} (#02294b) border, height 48px.
• Focus state text-input-focused swaps border to {colors.ink} (#111111) and text to {colors.ink}.

Navigation

top-nav — top nav floating over the teal hero band.

• Background {colors.band-teal-deep} (#088181) — transparent over the band, text {colors.canvas}, padding 16px 40px. Logo wordmark on the left, primary nav center, a button-on-band filled pill on the right.

nav-link — individual nav link.

• Text {colors.canvas} (#ffffff) on band, type {typography.body-md} (16px / 400 Cern). No underline, no decoration.

Pills, Tags, and Chips

pill-tag — small status pill.

• Background {colors.canvas}, text {colors.ink}, type {typography.caption}, padding 0px 6px 0px 0px, rounded {rounded.pill} 100px.

badge-status — bordered status badge.

• Background {colors.canvas}, text {colors.ink}, 1px {colors.ink} border, padding 8px 16px, rounded {rounded.pill}.

Signature Components

chromatic-band — the full-bleed saturated section canvas.

• Background {colors.band-teal-deep} (or any band token), text {colors.canvas}, padding 125px 40px, rounded {rounded.none}. Each scroll section is its own band; never compress two bands into a single panel.

code-block — Inconsolata code preview inside dashboard composites.

• Background {colors.ink} (#111111), text {colors.hairline-soft} (#c5c5c5), type {typography.code-md} (Inconsolata 27px), padding 24px, rounded {rounded.md} 20px.

link-inline — inline link on white surfaces.

• Text {colors.ink-secondary} (#02294b), type {typography.body-md}, no underline by default. The deep-navy hex (not the chromatic-band hues) carries link semantics on white.

footer-panel — the final scroll panel.

• Background {colors.band-footer} (#0d0d3f), text {colors.canvas}, type {typography.caption}, padding 64px 40px. Holds 4–6 columns of link groups and a small legal row.

Do's and Don'ts

Do

• Assign one saturated chromatic band per product capability section — teal for onboarding, indigo for fraud, magenta/violet for analytics.
• Render hero display at Plaid Sans weight 500 with -3.4px letter-spacing; the negative tracking is the brand's typographic signature.
• Use {colors.ink} (#111111) for both body text AND 1px hairline borders — the parity is the brand's chromatic discipline.
• Set every button to {rounded.pill} 100px regardless of size — there is no rectangular button in the system.
• Use {rounded.md} 20px for every card surface; {rounded.sm} 8px is form-input-only.
• Reserve Inconsolata for the dashboard-composite code block at 27px.

Don't

• Don't use a "12px" or "16px" radius on cards — neither value exists in Plaid's radius scale. The system collapses to 8px (inputs) / 20px (cards) / 100px (pills); inserting a 12px breaks the geometric discipline. Use {rounded.md} 20px instead.
• Don't run two adjacent chromatic bands in the same hue family (teal then mint, magenta then violet). Each band must contrast with its neighbor; the contrast is what makes the scroll-as-section grammar work. Insert a white-card-on-band break if you need two related-hue bands.
• Don't use {colors.ink-secondary} (#02294b) as a body-text color — it is form-input-border-and-inline-link only (frequency 94, evenly split between text and border on white). For body text, use {colors.ink} (#111111).
• Don't drop Plaid Sans display below weight 500 on sizes ≥ 30px — at weight 400 the brand register collapses to a generic Helvetica feel. Bumping above 600 reads as enterprise CRM.
• Don't use the magenta {colors.band-magenta} (#b14edb) or violet {colors.band-violet} (#6748d8) as a CTA fill — they are band canvases, not button colors. The primary button is always {colors.ink} (#111111) or {colors.canvas} (#ffffff).
• Don't compress button padding below 8px 30px — the wide 30px horizontal padding is the brand's tell. Tightening to 8px 16px (the Stripe / Mercury default) reads as a different system entirely.
• Don't pair the pill button with a non-pill chip in the same composition. Status badges, tags, and buttons all share the 100px pill — a rounded-rect chip next to a pill button breaks the geometric grammar.

Known Gaps

• Dashboard product chrome: the authenticated Plaid Dashboard application has its own semantic palette (loading states, transaction-status pills, balance-change deltas) that lives behind auth and is not part of this marketing-surface spec.
• Motion specs: the swash typography animation, the inter-band scroll transitions, and the card-hover lift are not captured here — only the static visual tokens.
• Sub-brand palettes: Plaid Identity, Income, and Investments each layer a small accent over the core chromatic bands; only the core marketing surface is captured.
• Multi-stop gradient blobs: the hero band contains a multi-color gradient blob behind the typography swash; treated here as a single {colors.band-teal-deep} token rather than its constituent stops.
• Hover state coverage: only button-primary-hover (opacity 0.84) is documented from the extracted --t5-button-bg-solid-hovered chain; hover specs for cards, links, and nav items were not reliably extractable.
• Contrast audit: the white-on-magenta and white-on-violet body type passes WCAG AA at large sizes but may not pass AAA at body sizes — a full a11y audit is not part of this spec.