---
version: alpha
name: Plaid
website: "https://plaid.com"
description: >-
  An inspired interpretation of Plaid's financial-data design language — a fintech-infrastructure brand built on absolute black ink ("#111111"), a white "#ffffff" reading canvas, and a stacked sequence of saturated chromatic bands (deep teal "#088181", electric magenta "#b14edb", indigo-blue "#0a54c4", violet "#6748d8") that segment the page into one full-bleed color per scroll story. Type runs the proprietary Plaid Sans at weight 500 with aggressive negative tracking — display sits at 76px with "-3.4px" letter-spacing, the brand's tightest typographic compression — and a Cern UI register handles body and form chrome. Buttons are full-pill ("100px" radius) on a card system that rounds to "20px"; every section ships as a chromatic full-bleed band with a centered "#ffffff" mockup floating above the canvas.
seo:
  title: "Plaid Design System for React — Black #111111, Plaid Sans, and 19 components"
  metaDescription: "Plaid's fintech-infrastructure design system as a DESIGN.md file. Black #111111, Plaid Sans 500, 22 colors, 19 components. For React, Next.js, and AI tools."
  tags:
    - "Banking & Payments"
    - "Fintech & Crypto"
  highlights:
    - "Chromatic band canvas — each section is a full-bleed saturated gradient (teal #088181, magenta #b14edb, indigo #0a54c4, violet #6748d8), one story per color"
    - "Absolute black ink — text and borders share #111111 at frequency 1184, the highest single-token density in the system"
    - "Plaid Sans 500 with -3.4px tracking — the hero h1 lands at 76px with negative letter-spacing larger than the brand's body type size"
    - "100px pill on 20px card — buttons round to 100px (frequency 40) while cards round to 20px (frequency 34); the radius gap is the brand's geometric signature"
    - "Inconsolata code register — a single monospace register at 27px appears inside dashboard mockups, the only non-Plaid-Sans display type on the page"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://plaid.com"
      title: "Plaid — official site"
      description: "The financial-data infrastructure platform whose marketing surface this DESIGN.md captures."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files."
  questions:
    - id: "primary-color"
      title: "What is Plaid's primary brand color?"
      answer: "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."
    - id: "typography"
      title: "What typography does Plaid use, and what should I use if Plaid Sans isn't available?"
      answer: "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."
    - id: "chromatic-bands"
      title: "What are the chromatic bands and why do they matter?"
      answer: "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."
    - id: "pill-vs-card-radius"
      title: "Why does Plaid use a 100px button pill but only a 20px card?"
      answer: "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."
    - id: "css-variables"
      title: "What's the structure of Plaid's CSS variable layer?"
      answer: "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."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md spec?"
      answer: "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."

colors:
  ink: "#111111"
  canvas: "#ffffff"
  ink-secondary: "#02294b"
  ink-deep: "#00172e"
  ink-muted: "#555555"
  ink-soft: "#7d7d7d"
  hairline: "#dcdcdc"
  hairline-soft: "#c5c5c5"
  surface-disabled: "#e5effe"
  band-teal-deep: "#088181"
  band-teal: "#10d0b7"
  band-mint: "#42f0cd"
  band-indigo: "#0a54c4"
  band-blue: "#156ef5"
  band-sky: "#37b0f4"
  band-violet: "#6748d8"
  band-magenta: "#b14edb"
  band-pink: "#bb33d7"
  band-footer: "#0d0d3f"
  accent-purple: "#8358ef"
  accent-mist: "#fbe5ff"
  status-error: "#ce4553"
  status-warning: "#f2d211"

typography:
  display-hero:
    fontFamily: "Plaid Sans, Cern, 'Helvetica Neue', system-ui, sans-serif"
    fontSize: 76px
    fontWeight: 500
    lineHeight: 1.12
    letterSpacing: "-3.4px"
  display-xl:
    fontFamily: "Plaid Sans, Cern, 'Helvetica Neue', system-ui, sans-serif"
    fontSize: 70px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "-2.8px"
  display-lg:
    fontFamily: "Plaid Sans, Cern, 'Helvetica Neue', system-ui, sans-serif"
    fontSize: 50px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: "-2px"
  display-md:
    fontFamily: "Plaid Sans, Cern, 'Helvetica Neue', system-ui, sans-serif"
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "-0.9px"
  display-sm:
    fontFamily: "Plaid Sans, Cern, 'Helvetica Neue', system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: "0"
  heading-md:
    fontFamily: "Cern, 'Helvetica Neue', system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: "-0.75px"
  heading-sm:
    fontFamily: "Plaid Sans, Cern, 'Helvetica Neue', system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: "-0.4px"
  body-lg:
    fontFamily: "Plaid Sans, Cern, 'Helvetica Neue', system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: "0"
  body-md:
    fontFamily: "Cern, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "0"
  body-strong:
    fontFamily: "Cern, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: "0"
  caption:
    fontFamily: "Cern, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "0"
  code-md:
    fontFamily: "Inconsolata, monospace"
    fontSize: 27px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "0"

rounded:
  sm: "8px"
  md: "20px"
  lg: "40px"
  pill: "100px"
  none: "2px"

spacing:
  xxs: "1px"
  xs: "8px"
  sm: "12px"
  md: "16px"
  lg: "24px"
  xl: "30px"
  xxl: "40px"
  huge: "64px"

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.heading-md}"
    rounded: "{rounded.pill}"
    padding: "8px 30px"
    height: 48px
    border: "0"
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.heading-md}"
    rounded: "{rounded.pill}"
    padding: "8px 30px"
    opacity: "0.84"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
    rounded: "{rounded.pill}"
    padding: "8px 30px"
    border: "1px solid {colors.ink}"
  button-on-band:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
    rounded: "{rounded.pill}"
    padding: "8px 30px"
  pill-tag:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: "0px 6px 0px 0px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "8px 8px 8px 16px"
    height: 48px
    border: "1px solid {colors.ink-secondary}"
  text-input-focused:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "8px 8px 8px 16px"
    border: "1px solid {colors.ink}"
  chromatic-band:
    backgroundColor: "{colors.band-teal-deep}"
    textColor: "{colors.canvas}"
    typography: "{typography.display-hero}"
    rounded: "{rounded.none}"
    padding: "125px 40px"
  card-floating:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "40px"
  card-dashboard-composite:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.code-md}"
    rounded: "{rounded.md}"
    padding: "24px"
  card-mobile-mockup:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "32px"
  card-stat:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    rounded: "{rounded.md}"
    padding: "24px"
    border: "1px solid {colors.hairline}"
  top-nav:
    backgroundColor: "{colors.band-teal-deep}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "16px 40px"
  nav-link:
    backgroundColor: "{colors.band-teal-deep}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "0"
  link-inline:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "0"
  code-block:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.hairline-soft}"
    typography: "{typography.code-md}"
    rounded: "{rounded.md}"
    padding: "24px"
  footer-panel:
    backgroundColor: "{colors.band-footer}"
    textColor: "{colors.canvas}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: "64px 40px"
  badge-status:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    border: "1px solid {colors.ink}"
---

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

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-hero}` | 76px | 500 | 1.12 | -3.4px | Hero h1 (one per page) |
| `{typography.display-xl}` | 70px | 500 | 1.2 | -2.8px | Secondary hero h2 |
| `{typography.display-lg}` | 50px | 500 | 1.1 | -2px | Band-opener heading |
| `{typography.display-md}` | 30px | 500 | 1.2 | -0.9px | Section sub-heading |
| `{typography.display-sm}` | 24px | 400 | 1.4 | 0 | Card title on dark band |
| `{typography.heading-md}` | 20px | 600 | 1.3 | -0.75px | Button label, link emphasis |
| `{typography.heading-sm}` | 20px | 600 | 1.1 | -0.4px | Compact in-card heading |
| `{typography.body-lg}` | 24px | 400 | 1.4 | 0 | Marketing body lead on bands |
| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default Cern UI body |
| `{typography.body-strong}` | 16px | 700 | 1.33 | 0 | H2 inline emphasis |
| `{typography.caption}` | 13px | 400 | 1.5 | 0 | Helper, footer, fine print |
| `{typography.code-md}` | 27px | 400 | 1.5 | 0 | Inconsolata code-block inside dashboard composites |

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

| Level | Treatment | Use |
|---|---|---|
| 0 | Flat | Default canvas |
| 1 | 1px `{colors.hairline}` (#dcdcdc) border | Card default on white |
| 2 | `box-shadow: rgba(125,125,125,0.16) 0 8px 24px` | Floating mockup card above chromatic band |
| 3 | Chromatic band | The brand's primary depth medium — saturated full-bleed color as visual lift |

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

| Token | Value | Use |
|---|---|---|
| `{rounded.none}` | 2px | Hairline tags, table chrome corners |
| `{rounded.sm}` | 8px | Form inputs only |
| `{rounded.md}` | 20px | Cards, mockup containers, code blocks |
| `{rounded.lg}` | 40px | Rounder mobile-mockup card variant |
| `{rounded.pill}` | 100px | Every button, every status badge, every CTA |

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