plaid.com

DESIGN.md

Narrative design system document — paste directly into Claude Code, Cursor, or Bolt.

---
version: alpha
name: plaid.com
description: "Light product system built on #ffffff with #012e37 as the primary CTA accent. Type anchored in Plaid Sans at 80px / weight 600. Extracted automatically from https://plaid.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  plaid.com is built on a pure-white canvas (rgb(255, 255, 255)).
  The system uses rgb(1, 46, 55) as the singular interactive color.
  Crisp CTAs (2px radius) reinforce a precise, technical aesthetic alongside Plaid Sans as the primary typeface.
  A layered elevation system (5 distinct shadows) building a clear front-to-back hierarchy.
  Motion is a first-class concern — 68 keyframe animations plus transition-driven interactions.

colors:
  background: "#ffffff"
  surface-1: "rgba(255, 255, 255, 0.7)"
  surface-2: "#eaeff0"
  ink: "#111111"
  ink-muted: "rgba(17, 17, 17, 0.65)"
  ink-subtle: "#383838"
  primary: "#012e37"
  on-primary: "#ffffff"
  primary-hover: "#232424"
  hairline: "rgba(12, 17, 22, 0.2)"
  semantic-error: "#f44e66"
  semantic-success: "#1fa077"
  semantic-warning: "#ba7d17"

typography:
  display-xl:
    fontFamily: "Plaid Sans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.08
    letterSpacing: -2px
  display-md:
    fontFamily: "Plaid Sans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -1.5px
  headline:
    fontFamily: "Cern, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.43
    letterSpacing: 0
  body:
    fontFamily: "Cern, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16.5px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  button:
    fontFamily: "Cern, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0
  mono:
    fontFamily: "Cern, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16.5px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 35px
  pill: 9999px

spacing:
  xxs: 2px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 40px
  xl: 56px
  xxl: 100px

components:
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.primary-hover}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 0px 24px
  button-ghost-2:
    backgroundColor: "transparent"
    textColor: "#088181"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 15px 24px
  button-pill:
    backgroundColor: "transparent"
    textColor: "#111112"
    typography: "{typography.button}"
    rounded: "{rounded.xl}"
    padding: 0px 18px
  input-text-input:
    backgroundColor: "{colors.on-primary}"
    textColor: "#4b4b4b"
    typography: "{typography.mono}"
    rounded: "{rounded.sm}"
    padding: 8px 8px 8px 16px
  status-badge-neutral-dark:
    backgroundColor: "transparent"
    textColor: "#767676"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 8px 8px 8px 0px

extracted_at: "2026-06-11T05:44:48.305Z"
completeness: 79
scoreVersion: "v2"

---

# Design System — plaid.com
> Extracted automatically by Prism from https://plaid.com
> Date: 2026-06-11
> Viewport: Desktop 1440x900 + Mobile 390x844
> Values are extracted, not hand-written: rendered styles via getComputedStyle() + colors declared in CSS custom properties (token-only values are marked `(token)` and may not be painted).


## 0. Design DNA

**Density**: sparse  |  **Motion**: animated  |  **Weight**: heavy  |  **Aesthetic**: product-neutral

| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#ffffff` |
| Type posture | sans-led (Cern) | "Europe’s leading open banking " |
| Color assertion | dual-accent | #012e37 |
| Whitespace | sparse | section rhythm 80px |
| Interaction | animated | 68 keyframes, 5 transitions |
| Radius language | 8px-rounded | from token scale |

**Prism fingerprint**: `neutral-canvas · sans-display · dual-accent · 8px-rounded · animated-motion`

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(255, 255, 255)` is the page background. Every component composits against this.
> - **Accent**: `rgb(1, 46, 55)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 80px between major bands. Card padding: 40px.
> - **Default radius**: 8px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips.
>
> **Before generating UI**: import this DESIGN.md, scan §2 (Color Palette) + §4 (Components) + §10 (Agent Guide). Skip §11–12 unless extending.

## 1. Visual Theme & Atmosphere

**Signature:** a gradient wash in the hero. This is the brand's most recognizable visual — reproduce it, don't replace it with a generic card or flat panel.

plaid.com uses a pure-white canvas (`#ffffff`), letting typography, color and imagery carry the visual weight. 

Headlines are set in **Plaid Sans**, a sans-serif display face (the dominant type signature, e.g. "Europe’s leading open banking platform" at 80px). A second display voice — **Bowery Street** (sans) — appears in lower bands (e.g. "12,000+"), used for editorial accent. Body text is set in **Cern**. Headlines use weight 600 for confident, assertive presence — the brand wants to be heard. Negative letter-spacing at display sizes (-2px at 64px) compresses headlines into engineered blocks, dense and precise. 

Body text reads in Near-Black (`#111111`) — softened from pure black, a small but deliberate detail that lowers reading friction. **Navy Blue** (`#012e37`) provides interactive distinction without visual aggression. Elevation is built from multi-layer shadow stacks (5 distinct) — each combines several blurred layers at varying offsets to build a clear front-to-back hierarchy. 
Motion design uses smooth easing curves for polished state transitions. 

**Key Characteristics:**
- Background: Pure White (`#ffffff`)
- Primary typeface: Cern
- Primary text: Near-Black (`#111111`)
- Accent: Navy Blue (`#012e37`)
- Display: 64px weight 600, letter-spacing -2px
- Shadow system: 5 distinct elevation levels
- Custom fonts loaded: Cern, Inconsolata, Bowery Lane, Bowery Street, Plaid Sans, Inter, Inter var

## 2. Color Palette & Roles

### Background & Surface
- **Fill Inverse** (`#ffffff`): Page background (primary)
- **Fill Bg Tertiary** (`#f6f6f6`): Surface / elevated background (CSS var)
- **Fill Bg Secondary** (`#fafafa`): Surface / elevated background (CSS var)
- **Fill State Pressed Low Contrast** (`#d4f9ff`): Surface / elevated background (CSS var)
- **Fill State Disabled** (`#ededed`): Surface / elevated background (CSS var)

### Text & Content
- **Fill Default** (`#111111`): Primary body text
- **Text Low Contrast** (`#555555`): Text (CSS var)
- **Text Destructive High Contrast** (`#b72743`): Text (CSS var)
- **Text State Hover** (`#0072cf`): Text (CSS var)
- **Text State Disabled** (`#767676`): Text (CSS var)

### Accent & Interactive
- **Fill Status Attention** (`#b1eefc`): Accent / interactive (CSS var)
- **Fill Status Success** (`#abffdb`): Accent / interactive (CSS var)
- **Fill Status Error** (`#ffaab9`): Accent / interactive (CSS var)
- **Fill State Error** (`#f44e66`): Accent / interactive (CSS var)
- **Fill State Pressed** (`#0061b3`): Accent / interactive (CSS var)
- **Fill Status Warning** (`#fbf1a0`): Accent / interactive (CSS var)
- **#088181** (`#088181`): Interactive / accent

### Border & Divider
- **Border Default Contrast** (`#dcdcdc`): Border (CSS var)
- **Border Destructive Low Contrast** (`#ffd7dc`): Border (CSS var)
- **Border Status Success** (`#1fa077`): Border (CSS var)
- **Border Status Warning** (`#ba7d17`): Border (CSS var)
- **Border Status Error** (`#d83d57`): Border (CSS var)
- **Light Grey** (`#cccccc`): Borders / dividers

### Full Extracted Palette
**36 colors rendered on the page** + **56** more declared in design tokens (CSS custom properties — not necessarily painted). (23 categorized above + 69 additional below.)
Rendered values are read via `getComputedStyle()`; token values come from CSS variable declarations. Third-party logo colors are filtered out.

- `#000000` — Pure Black
- `#232424` — Near-Black
- `rgba(12, 17, 22, 0.2)` — Translucent Jet Black (20%)
- `#012e37` — Navy Blue
- `#eaeff0` — Whitesmoke
- `#05565c` — #05565c
- `#383838` — Link Text
- `#f9fafb` — Off-White
- `#111112` — Near-Black
- `#0a71ac` — #0a71ac
- `#00172e` — Deep Navy
- `#00282f` — Navy Blue
- `#f9f9ff` — Off-White
- `#929596` — Grey
- `#747677` — Slate Grey
- `#0a54c4` — Cobalt Blue
- `#02294b` — Navy Blue
- `#4b4b4b` — Charcoal
- `#333333` — Charcoal
- `#24555b` — Slate
- `#d8fef3` — Light Gray
- `#0066ff` — #0066ff
- `#0ba299` — #0ba299
- `#efefef` — Off-White
- `#d80027` — Crimson
- `#2e52b2` — #2e52b2
- `#0052b4` — Cobalt Blue
- `#ffda44` — #ffda44
- `#123456` — #123456
- `#5c2ec7` — #5c2ec7 *(token)*
- `#f2d211` — Gold *(token)*
- `#9d3841` — #9d3841 *(token)*
- *…+37 more in `raw-css.json` (`desktop.allColors`).*

### CSS Custom Properties (Design Tokens)

**Border**
- `--color-border-state-focused`: `#0072cf`
- `--color-border-default-contrast`: `#dcdcdc`
- `--color-border-destructive-high-contrast`: `#b72743`
- `--color-border-state-filled`: `#111`

**Motion Token**
- `--animation-duration-modal-longer`: `0.5s`
- `--animation-secondary`: `ease-in-out 100ms`
- `--animation-primary-transition-duration`: `350ms`

**Text Color**
- `--color-text-destructive-low-contrast`: `#ffd7dc`
- `--color-text-low-contrast`: `#555`
- `--color-text-inverse-default-contrast`: `#ededed`
- `--color-text-high-contrast`: `#111`

**Spacing Token**
- `--padding-modal`: `calc(0.8rem*3)`
- `--font-stack-monospace`: `Inconsolata,Consolas,Courier,monospace`

**Font Size Token**
- `--font-size-med`: `1.4rem`
- `--font-size-large-form-controls`: `2rem`

**Border Radius Token**
- `--border-radius`: `0.2rem`
- `--button-border-radius`: `2px`

**Z-Index Token**
- `--z-index-modal`: `1000`
- `--z-index-tooltip`: `100`
- `--z-index-date-input`: `10000`
- `--z-index-dropdown`: `10`

**Shadow Token**
- `--shadow-4`: `0 0.2rem 0.4rem 0 hsla(0,0%,7%,.08)`
- `--shadow-e4`: `0px 2px 4px hsla(0,0%,7%,.08)`
- `--shadow-e3`: `0px 8px 8px hsla(0,0%,7%,.08)`
- `--shadow-3`: `0 0.8rem 0.8rem 0 hsla(0,0%,7%,.08)`

**Other tokens**
- `--color-fill-bg-tertiary`: `#f6f6f6`
- `--t5-button-text-solid-resting`: `#fff`
- `--t5-textinput-message-focused`: `#747677`
- `--radio-bg-hover`: `#fff`
- `--tooltip-dark-text`: `#fff`
- `--t5-textinput-label-pressed`: `#747677`
- `--input-text-error`: `#f44e66`
- `--color-fill-bg-secondary`: `#fafafa`

## 3. Typography Rules

### Font Families
- **Primary**: `Cern`
- **Secondary**: `Plaid Sans`
- **Font 3**: `Inconsolata`
- **Font 4**: `Bowery Lane`
- **Font 5**: `Bowery Street`

### Custom Fonts Loaded
- **Cern** weight 400 (normal)
- **Cern** weight 500 (normal)
- **Cern** weight 600 (normal)
- **Cern** weight 700 (normal)
- **Cern** weight 800 (normal)
- **Inconsolata** weight 400 (normal)
- **Inconsolata** weight 700 (normal)
- **Bowery Lane** weight 100 (normal)
- **Bowery Lane** weight 300 (normal)
- **Bowery Lane** weight 400 (normal)
- **Bowery Lane** weight 500 (normal)
- **Bowery Lane** weight 700 (normal)
- **Bowery Lane** weight 900 (normal)
- **Bowery Street** weight 300 (normal)
- **Bowery Street** weight 400 (normal)
- **Bowery Street** weight 500 (normal)
- **Bowery Street** weight 600 (normal)
- **Plaid Sans** weight 300 (normal)
- **Plaid Sans** weight 400 (normal)
- **Plaid Sans** weight 500 (normal)
- **Plaid Sans** weight 600 (normal)
- **Plaid Sans** weight 700 (normal)
- **Plaid Sans** weight 800 (normal)
- **Plaid Sans** weight 900 (normal)
- **Inconsolata** weight 600 (normal)
- **Inter** weight 100 (normal)
- **Inter var** weight 100 900 (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Plaid Sans | 64px | 600 | 1.08 | -2px | Main headline (h1) |
| Sub-heading | Plaid Sans | 30px | 600 | 1.2 | -1.5px | Third-level heading (h3) |
| Input Large | Cern | 16.5px | 400 | 1.5 | normal | Form input (16.5px) |
| Card Title | Cern | 16px | 400 | 1.5 | normal | Card headings |
| Button Large | Cern | 16px | 600 | 1.5 | normal | Button label (16px) |
| Label Heading | Cern | 14px | 600 | 1.43 | normal | Small heading (H6) |

### Full Font Size Scale

Sizes detected in the design (descending): `80px`, `64px`, `60px`, `40px`, `30px`, `24px`, `20px`, `18px`, `16.50px`, `16px`, `14px`, `13px`, `10px`

> 8 size(s) detected outside the sampled hierarchy (80px, 60px, 40px, 24px, 20px, 18px, 13px, 10px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles.

### OpenType & Variable Font Features

The typography uses these OpenType features intentionally — this is a sophisticated type system, not a default fallback:

- **ligatures** — common letter pairs replaced with refined glyphs (fi, fl, etc.)

**Clone instruction:** Enable these in your CSS:
```css
body {
  font-feature-settings: "clig", "liga";
}
```

## 4. Component Stylings

### Buttons

**Ghost**
- Background: `transparent`
- Text: `#232424` `{colors.primary-hover}`
- Padding: 0px 24px
- Radius: 2px
- Font: 16px weight 400
- Use: Subtle action, toolbar, nav button
- Hover: opacity: `0.75`
- Focus: opacity: `0.75`

**Ghost**
- Background: `transparent`
- Text: `#088181`
- Padding: 15px 24px
- Radius: 8px 2px 2px
- Font: 16px weight 400
- Use: Subtle action, toolbar, nav button
- Hover: opacity: `0.75`
- Focus: opacity: `0.75`

**Pill**
- Background: `transparent`
- Text: `#111112`
- Padding: 0px 18px
- Radius: 100px
- Font: 16px weight 600
- Use: Status pills, tags, chips
- Hover: opacity: `0.75`
- Focus: opacity: `0.75`

**Pill**
- Background: `transparent`
- Text: `#ffffff` `{colors.on-primary}`
- Padding: 0px 18px
- Radius: 100px
- Font: 16px weight 600
- Use: Status pills, tags, chips
- Hover: opacity: `0.75`
- Focus: opacity: `0.75`

**Icon Button**
- Background: `#ffffff` `{colors.on-primary}`
- Text: `#111111` `{colors.ink-muted}`
- Padding: 16px
- Radius: 2px
- Font: 16px weight 600
- Use: Toolbar/UI icons
- Hover: opacity: `0.75`
- Focus: opacity: `0.75`

### Inputs & Forms

**Text Input**
- Background: `#ffffff` `{colors.on-primary}`
- Text: `#4b4b4b`
- Padding: 8px 8px 8px 16px
- Radius: 8px
- Border: 1px solid rgb(2, 41, 75)
- Font: 16.5px weight 400
- Use: Text fields, search inputs

### Status Badges

**Neutral Dark**
- Background: `transparent`
- Text: `#767676`
- Padding: 8px 8px 8px 0px
- Radius: 0px
- Font: 16px weight 400
- Use: Status indicator, label, pill


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative

- **Button**:
  - **hover:** opacity 0.75
  - **focus:** opacity 0.75
- **FooterLink**:
  - **hover:** text #ffffff → #dbf6ff, border changes

*State transitions extracted via Playwright simulation — exact values in the YAML matrix below.*

```yaml
component-behaviors:
  button:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(35, 36, 36)"
    hover:
      bg: "transparent"
      fg: "inherit"
    focus:
      bg: "transparent"
      fg: "inherit"
  input:
    default:
      bg: "rgb(255, 255, 255)"
      fg: "rgb(75, 75, 75)"
      border: "1px solid rgb(2, 41, 75)"
  link:
    default:
      bg: "rgb(255, 255, 255)"
      fg: "rgb(17, 17, 17)"
  card:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(17, 17, 17)"
  navLink:
    default:
      bg: "rgb(255, 255, 255)"
      fg: "rgb(17, 17, 17)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(255, 255, 255)"
    hover:
      bg: "transparent"
      fg: "rgb(219, 246, 255)"
```

**Agent usage**: Validate generated components against this matrix. If your output's `:hover` state changes properties not listed here, you are off-brand.


## 4c. Component Vocabulary (Closed System)

*This brand uses ONLY the following component vocabulary. Introducing new variants without justification breaks the system's tonal coherence.*

### Buttons
- **3 shape(s)** in this system: `Ghost`, `Pill`, `Icon Button`
- **DO NOT introduce new buttons variants** without justification

### Inputs & Forms
- **1 shape(s)** in this system: `Text Input`
- **DO NOT introduce new inputs & forms variants** without justification

### Status Badges
- **1 shape(s)** in this system: `Neutral Dark`
- **DO NOT introduce new status badges variants** without justification

## 5. Layout Principles

### Layout Type
**top-nav + content**

### Grid
Single column, centered content

### Max Width
1200px

### Spacing System
Generous spacing — editorial breathing room

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 8px |
| sm | 12px |
| md | 16px |
| base | 24px |
| lg | 40px |
| xl | 56px |
| 2xl | 80px |
| 3xl | 100px |

### Border Radius Scale
| Name | Value | Use |
|------|-------|-----|
| None | 0px | No rounding |
| Xs | 4px | Tiny corners (badges, micro elements) |
| Sm | 8px | Buttons, inputs, small elements |
| Md | 12px | Cards, containers |
| Lg | 16px | Large rounded elements, pill segments |
| Xl | 35px | Category strips, featured containers |
| Full | 9999px | Pills, avatars, circular elements |

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `2px` |
| Inputs & Forms | `8px` |
| Status Badges | `0px` |
| Page Body | `0px` |
| Navigation | `0px` |
| Primary Input | `8px` |

**Shape Personality**: Moderate Rounding — Medium corners (4–12px). Modern SaaS standard, neither sharp nor pill.

**Full Radius Spectrum**: 0px, 2px, 4px, 7px, 8px, 12px, 16px, 35px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~80px internal vertical padding (up to 80px) — **generous**. (Distinct from the gap *between* sections above.) Reproduce this generous vertical breathing room; cramped spacing is the #1 tell of a cheap clone.

*Named spacing tokens with explicit use cases. Use these names in YOUR code instead of raw pixels for consistency.*

| Name | Value | Use case |
|------|-------|----------|
| **hero** | `100px` | Top/bottom of full-bleed hero sections |
| **section** | `56px` | Between major bands (color change, content shift) |
| **subsection** | `40px` | Within a section, between content groups |
| **card** | `16px` | Card padding, list-item spacing |
| **compact** | `12px` | Form fields, tight clusters, badge padding |
| **micro** | `8px` | Icon-text gap, tag inner padding |

**Agent rule**: NEVER hardcode raw pixel values for spacing in generated UI. Always reference these named tokens (`spacing-rhythm.section`, etc.).

## 5c. Widget & Structure Library

Structural patterns extracted from the page DOM — these are the **blueprints** an agent should follow to reproduce the page architecture (not just CSS values).

**5/8 structural patterns detected.**

### Hero Pattern

- **Composition:** left-aligned — 
- **Viewport coverage:** 540px tall (not full-viewport)
- **Heading:** "Europe’s leading open banking platform" — 64px left-aligned
- **Subheading:** "Payments, onboarding, lending, and financial data — all through one API platform."
- **CTAs:** 2 (primary: "Talk with our team")
- **Clone instruction:** Reproduce the **left-aligned** layout. Use the heading font-size token at the documented size. Pair the centered text with the hero’s decorative visual (gradient / SVG / hero image — see §9b), not bare text.

### Navigation Pattern

- **Position:** fixed (stays visible during scroll)
- **Layout:** unknown — Layout not classified
- **Height:** 95px
- **Logo:** ✓ present
- **Nav links:** 26 primary items
- **CTAs in nav:** 1
- **Clone instruction:** Build a fixed unknown navigation. Reserve 1 slot for primary CTA.

### Card Grid Pattern

- **Card count:** 3 cards detected
- **Columns (desktop):** 1-up grid
- **Card dimensions:** 1440×185px (aspect 7.77:1)
- **Gap:** 0px between cards
- **Content:** ✗ no image
- **Clone instruction:** Build a 1-column grid (desktop) with cards at ~7.77:1 aspect ratio. Text/icon-only cards (no photography).

### CTA Banner Pattern

- **Banner count:** 1
- **Position:** mid-page
- **Visual treatment:** ✓ gradient fill
- **Primary CTA text:** "Talk with our team"
- **Clone instruction:** Place a single CTA banner mid-page. Use gradient background.

### Footer Pattern

- **Columns:** 1
- **Links:** 27 total
- **Height:** 810px
- **Includes:** ✗ no newsletter | ✓ social icons |  ✓ copyright
- **Clone instruction:** Build a 1-column footer with ~27 links per column, social media links, and a copyright line.

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Inset (Level 1) | <br>`rgba(0, 0, 0, 0.06) 0px 2px 8px 0px`,<br>`rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset`,<br>`rgba(85, 85, 85, 0.12) 0px 6px 12px 0px` | Buttons, pressed-state elements |
| Inset (Level 2) | <br>`rgba(0, 0, 0, 0.06) 0px 2px 6px 0px`,<br>`rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset`,<br>`rgba(85, 85, 85, 0.12) 0px 6px 12px 0px` | Buttons, pressed-state elements |
| Layered (Level 3) | <br>`rgba(0, 0, 0, 0.2) 0px 0px 5px 0px` | Cards, elevated surfaces |
| Layered (Level 4) | <br>`rgba(243, 49, 247, 0.43) 0px 0px 36px 5px` | Cards, elevated surfaces |

**Shadow Philosophy**: Multi-layered shadow system creating natural, atmospheric depth. Each shadow level combines multiple layers for realistic elevation.

## 7. Motion & Interaction

### Easing System

| CSS Variable | Curve | Semantic Name |
|--------------|-------|---------------|
| `--animation-primary-transition-timing-function` | `cubic-bezier(0.23,1.2,0.32,1)` | Ease Out — Decelerating |
| `--animation-secondary-transition-timing-function` | `ease-in-out` | Ease In-Out — Symmetric |

### Duration Scale

| CSS Variable | Value | Tier |
|--------------|-------|------|
| `--animation-duration-modal-longer` | `0.5s` | Slow |
| `--animation-primary-transition-duration` | `350ms` | Slow |
| `--transition-delay-duration` | `225ms` | Normal |
| `--animation-secondary-transition-duration` | `100ms` | Fast |
| `--animation-duration-modal-short` | `0.2s` | Normal |
| `--transition-duration` | `35ms` | Instant |

### Copy-Paste Transition Snippets

**Transform**
```css
transition: transform 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s ease-out, -webkit-transform 0.3s ease-out;
```

**Opacity**
```css
transition: opacity 0.1s ease-out, transform 0.1s ease-out, -webkit-transform 0.1s ease-out;
```

**Transform**
```css
transition: transform 0.3s;
```

**Color / Background**
```css
transition: color 0.1s ease-in-out;
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `spin` | Rotate / Spin | transform | Loading indicator |
| `animation-c7515d` | Fade | opacity | UI transition |
| `BaseInput-module_fadeIn__Dq3fy` | Fade | opacity, visibility | Element entrance |
| `LoadingSpinner-module_rotator__oIvv-` | Rotate / Spin | transform | Loading indicator |
| `LoadingSpinner-module_colors__ve4W6` | Custom | stroke | Loading indicator |
| `LoadingSpinner-module_dash__XCdjd` | Rotate / Spin | stroke-dashoffset, transform | Loading indicator |
| `LoadingSpinner-module_left-bit__G3zxV` | Scale | transform | Loading indicator |
| `LoadingSpinner-module_center-bit__DViPT` | Scale | transform | Element entrance |
| `LoadingSpinner-module_right-bit__PgjWJ` | Scale | transform | Loading indicator |
| `LoadingSpinner-module_bit-wrap__5rbhe` | Scale | transform | Loading indicator |
| `Modal-module_threads-hide-modal__2TM6K` | Fade + Move | opacity, transform | UI transition |
| `Modal-module_modalOpen__nW5gg` | Fade + Move | opacity, transform | UI transition |
| `Modal-module_modalClose__Pjowq` | Fade + Move | opacity, transform | UI transition |
| `Modal-module_backdropFadeIn__vXF4r` | Fade | opacity | Element entrance |
| `Modal-module_backdropFadeOut__7dTlm` | Fade | opacity | Element exit |
| `ChartLoader-module_pulse__XOfQy` | Scale | transform | Loading indicator |
| `Toast-module_slideDownFadeIn__TYEj7` | Fade + Move | opacity, transform | Element entrance |
| `Toast-module_slideUpFadeIn__52hGl` | Fade + Move | opacity, transform | Element entrance |
| `Toast-module_fadeOut__ySSK8` | Fade | opacity | Element exit |
| `Skeleton-module_sheen__EUPmR` | Slide | transform | Loading placeholder |

> *48 additional animations omitted (repetitive variants). See raw keyframes in `raw-css.json`.*

### Motion Fingerprint

- **Speed Character**: Balanced Pacing (median duration: `225ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 68 unique animations (68 total including variants)

> This design moves with balanced pacing timing using custom cubic-bezier curves, creating a UI that feels natural and fluid.

## 8. Do's and Don'ts

### Do
- Use Fill Default (`#111111`) for text — not pure black, it's warmer and more readable
- Use Cern as the primary typeface — it defines the brand personality
- Keep font weights between 400-600 — the system uses a narrow weight range for subtle hierarchy
- Use negative letter-spacing (-2px) at display sizes for compressed, editorial headlines
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use Navy Blue (`#012e37`) as the primary accent — it's the brand's signature interactive color
- Use small 2px radius for buttons — this design system uses subtle rounding, not pill shapes
- Style form inputs with a `1px solid rgb(2, 41, 75)` border — use border-based inputs, not floating labels or underline-only
- Keep navigation fixed to the top — the design uses a persistent navigation pattern
- Maintain nav height at 95px — consistent vertical space for the navigation bar
- Include exactly 2 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose
- Make the navigation fixed — it stays visible during scroll, signaling content depth

### Don't
- Don't use pure black (`#000000`) for text — the near-black adds warmth
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't use weight 700 (bold) or above — 600 is the maximum weight in this system
- Don't increase letter-spacing on headings — the type is designed to run tight at scale
- Don't invent new shadow values — use only the extracted shadow levels
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't over-round buttons with pill or large radius — the system uses restrained, sharp-ish corners
- Don't remove the input border — the border is the primary affordance indicator for form fields
- Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence


## 7b. Enforceable Brand Rules

*Structured Do/Don't with reasoning and validation tests. Agents can programmatically verify generated UI.*

```yaml
rules:
  - id: brand-canvas-001
    type: do
    rule: "Always use the page background `rgb(255, 255, 255)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(255, 255, 255)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(1, 46, 55)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(1, 46, 55)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 375px | Single column, compact spacing |
| Mobile | 480px | Single column, compact spacing |
| Mobile Large | 639px | Expanded mobile layout |
| Mobile Large | 750px | Expanded mobile layout |
| Tablet | 1023px | Multi-column grids begin |
| Desktop | 1279px | Full feature layout |
| Large Desktop | 1440px | Maximum content width |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `64px` | `32px` |
| heading | line-height | `69.12px` | `38.4px` |
| heading | letter-spacing | `-2px` | `-1.5px` |
| nav | height | `95px` | `80px` |
| button | padding | `0px 24px` | `8px` |
| button | width | `117px` | `38px` |
| card | width | `559px` | `302.656px` |

### Collapsing Strategy
- Headlines: 64px → 32px on mobile
- Navigation: horizontal links → hamburger menu on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 0px 24px padding
- Navigation: adequate spacing between items
- Interactive elements: minimum 44px touch target recommended

### Collapsing Narrative

How the structural patterns adapt from desktop to mobile (extracted from both viewport extractions):

- **Navigation collapses to hamburger** — 26 links visible on desktop, 0 on mobile (the rest hide behind a menu toggle).


## 7c. Visual Effects & Dynamic Behavior

*The live/dynamic layer beyond static CSS — reproduce these, not flat substitutes. This is often what separates a faithful clone from a wireframe.*

- **Canvas / 2D rendering** — animated/interactive canvas (charts, graphs, particle fields). Reproduce as live data-viz (e.g. an animated SVG/Canvas line chart), NOT a static image.
- **Glassmorphism** — 1 frosted/blur layer(s) (e.g. `blur(15px)`).
- **Clip-path shapes** — 8 non-rectangular cut(s).
- **Blend modes** — 6 mix-blend layer(s).
- **Scroll-driven reveals** — content animates in on scroll (CSS scroll-timeline). Build fade/translate reveal-on-scroll for below-fold bands.
- **CSS-variable animations** (1) — animated custom properties.

> **Motion fingerprint**: Canvas 2D, glassmorphism (1 layers), non-rectangular shapes (10), blend modes, CSS scroll-driven animations

## 9b. Visual Tone & Photography

**Tone:** Mixed photography + illustration

A balanced mix of photographic content and vector graphics. Photos likely carry product/lifestyle context while SVG handles icons, logos, and decorative accents.

**Canonical Brand Image (OG):**
- https://plaid.com/assets/img/plaid-social-card-landscape.jpg
  *This is the image shown when the site is shared on social media — represents the brand visual essence.*

**Hero Image (above-fold dominant visual):**
- Aspect: 1.46:1 (landscape)
- Rendered size: 73×50px
- Alt text: "logo - n26"
- *Use this aspect ratio + composition for your clone's hero — mimicking the proportion preserves the visual hierarchy.*

**Aspect Ratio Distribution:**
- Landscape (1.15–2.3): 9 (75%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 2 (17%)
- Ultra-wide (>2.3): 1 (8%)

**Media Format Mix:**
- PNG: 12 (logos, transparent UI elements, mockups)
- SVG: 1 (icons, illustrations, decorative geometry)

**Average rendered image size:** 555×342px
**Above-fold image count:** 4 / 12

**Decorative Patterns Detected:**
- 65 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth
- 1 large decorative SVG shape (≥200×200px, non-icon) — likely blob/illustration accents
- **Glassmorphism** detected (`backdrop-filter: blur`) — layered transparent surfaces with blur, modern OS-like aesthetic

**Clone instruction for decorative work:** This is a gradient-rich design — invest in multi-stop CSS gradients (3+ color stops), not solid backgrounds.

**Imagery Guidance for clones:**
- Mix photography and illustration intentionally: photos for product/context, vectors for icons + decorative accents.
- Respect the format split — replacing JPGs with illustrations (or vice versa) will shift the brand tone.

## 10. Agent Prompt Guide

### Quick Reference
- Background: Pure White (`#ffffff`)
- Primary text: Near-Black (`#111111`)
- Accent: Navy Blue (`#012e37`)
- Border: Translucent Jet Black (20%) (`rgba(12, 17, 22, 0.2)`)
- Font: Cern
- Body: 16px weight 400

### Example Component Prompts
- "Create a hero section on Pure White background (#ffffff). Headline at 64px Cern weight 600, line-height 1.08, letter-spacing -2px, color #111111."
- "Create the primary CTA button: `#012e37` background, `#232424` text, 2px border-radius, 0px 24px padding, 700 weight, Cern font."
- "Design a card on `transparent` background. Border: none. Radius: 0px. Shadow: none. Padding: 0px."
- "Build navigation: fixed on `#ffffff`. Cern 16px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the light canvas to Pure White (`#ffffff`) — every component is composited against this exact base.
2. **Typography**: All type in Cern, weight range 400–600. Never exceed 600 — heavier weights break the brand's tonal restraint.
3. **Accent**: Navy Blue (`#012e37`) is the sole interactive color. On hover → #088181 (`#088181`). Use CSS transitions, not opacity/brightness filters.
4. **Shape**: CTAs at `2px`, cards at `0px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
5. **Spacing**: Use the `--ca-space-*` token scale (8px–56px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
6. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent.

## 11. CSS Design Tokens Raw Export

*Copy-paste ready `:root {}` block — all values extracted directly from the live site.*

```css
/* Colors */
:root {
  --ca-on-primary: #ffffff;
  --ca-surface-2: #eaeff0;
  --ca-ink-muted: #111111;
  --ca-ink-subtle: #383838;
  --ca-primary: #012e37;
  --ca-primary-hover: #232424;
  --ca-hairline: #0c1116;
  --ca-semantic-error: #f44e66;
  --ca-semantic-success: #1fa077;
  --ca-semantic-warning: #ba7d17;
}

/* Typography */
:root {
  --ca-font-primary: "Plaid Sans", system-ui, sans-serif;
  --ca-text-display: 64px;
  --ca-text-body: 16.5px;
  --ca-text-button: 16px;
  --ca-text-mono: 16.5px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 8px;
  --ca-space-sm: 12px;
  --ca-space-md: 16px;
  --ca-space-base: 24px;
  --ca-space-lg: 40px;
  --ca-space-xl: 56px;
  --ca-space-2xl: 80px;
  --ca-space-3xl: 100px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 12px;
  --ca-radius-lg: 16px;
  --ca-radius-xl: 35px;
  --ca-radius-full: 9999px;
}
```


## 13. Page Structure Skeleton

*The actual layout the source site uses. Reproduce these sections in order to match the site structure.*

```yaml
page-skeleton:
  - section: hero
    tag: div
    height: 8284px
    width: full-bleed
    layout: block
    children: 2
    vertical-padding: ~80px (generous)
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: navigation
    tag: nav
    height: 95px
    width: full-bleed
    layout: block
    children: 2
    padding: "24px 0px 0px"
  - section: feature-section
    tag: div
    classes: ["background-container", "MuiBox-root"]
    height: 1062px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(10, 113, 172)"
    bg-treatment: linear-gradient
  - section: feature-section
    tag: main
    classes: ["MuiBox-root"]
    height: 7473px
    width: full-bleed
    layout: block
    children: 7
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: feature-section
    tag: div
    classes: ["background-container-inner", "MuiBox-root"]
    height: 1062px
    width: full-bleed
    layout: block
    children: 6
  - section: logo-strip
    tag: div
    height: 87px
    width: full-bleed
    layout: block
    children: 1
    padding: "0px 40px"
  - section: logo-strip
    tag: div
    classes: ["MuiGrid-root", "MuiGrid-direction-xs-row", "cms-row", "undefined"]
    height: 87px
    width: 1376px
    layout: flex-row justify=normal
    children: 1
  - section: header
    tag: header
    classes: ["MuiBox-root"]
    height: 540px
    width: full-bleed
    layout: block
    children: 1
  - section: feature-section
    tag: div
    height: 540px
    width: full-bleed
    layout: block
    children: 1
    padding: "0px 40px"
  - section: feature-section
    tag: div
    classes: ["MuiGrid-root", "MuiGrid-direction-xs-row", "cms-row", "undefined"]
    height: 540px
    width: 1376px
    layout: flex-row justify=normal
    children: 2
  - section: logo-strip
    tag: section
    classes: ["MuiStack-root", "cms-logos-container"]
    height: 120px
    width: full-bleed
    layout: flex-row justify=center
    children: 1
  - section: feature-section
    tag: div
    classes: ["background-container", "MuiBox-root"]
    height: 1653px
    width: full-bleed
    layout: block
    children: 1
    bg-treatment: image
  - section: feature-section
    tag: div
    classes: ["background-container-inner", "MuiBox-root"]
    height: 1653px
    width: full-bleed
    layout: block
    children: 6
  - section: header
    tag: header
    classes: ["cms-sectional-header", "MuiBox-root"]
    height: 258px
    width: full-bleed
    layout: block
    children: 1
  - section: feature-section
    tag: section
    classes: ["MuiBox-root"]
    height: 793px
    width: full-bleed
    layout: block
    children: 2
  - section: unknown
    tag: div
    height: 258px
    width: full-bleed
    layout: block
    children: 1
    padding: "0px 40px"
  - section: unknown
    tag: div
    classes: ["MuiGrid-root", "MuiGrid-direction-xs-row", "cms-row", "undefined"]
    height: 258px
    width: 1376px
    layout: flex-row justify=normal
    children: 1
  - section: feature-section
    tag: div
    height: 543px
    width: full-bleed
    layout: block
    children: 2
    padding: "0px 40px"
  - section: unknown
    tag: div
    classes: ["lazyload-wrapper"]
    height: 312px
    width: 500px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["lazyload-wrapper"]
    height: 312px
    width: 500px
    layout: block
    children: 1
  - section: feature-section
    tag: section
    classes: ["MuiBox-root"]
    height: 543px
    width: full-bleed
    layout: block
    children: 1
  - section: feature-section
    tag: div
    height: 543px
    width: full-bleed
    layout: block
    children: 2
    padding: "0px 40px"
  - section: unknown
    tag: div
    classes: ["lazyload-wrapper"]
    height: 312px
    width: 500px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["lazyload-wrapper"]
    height: 312px
    width: 500px
    layout: block
    children: 1
  - section: feature-section
    tag: div
    classes: ["background-container", "MuiBox-root"]
    height: 804px
    width: full-bleed
    layout: block
    children: 1
    bg-treatment: image
```

**Agent rule**: rebuild sections in this order (sorted by vertical position). Match the layout primitive (grid N-col / flex direction / block).


## 14. Copy Library (Real Content from Source)

*Actual text content extracted from the live page. Use these strings verbatim when reproducing the site — they carry the brand voice.*

```yaml
copy:
  section-headings:
    - "Built for Europe"
    - "Better conversion. Smarter decisions. Higher revenue."
    - "Products"
  sub-headings:
    - "Bank payments that convert"
    - "Approve more with real-time cash flow data"
    - "The network powering European fintech"
    - "55%"
    - "Meet the fintechs building on Plaid"
    - "Let’s get started"
  ctas:
    - "Products"
    - "Payments"
    - "Credit underwriting"
    - "Log in"
    - "Contact sales"
    - "Talk with our team"
    - "Start building"
    - "Move money fast"
  navigation:
    - "Overview Explore payments solutions"
    - "Pay By Bank Instant bank payments"
    - "Lending & underwriting"
    - "Payments"
    - "Property management"
    - "Banking & wealth"
    - "iGaming"
    - "Personal finance management"
    - "Business financial management"
    - "Quickstart"
  footer-links:
    - "Auth"
```

**Agent rule**: reuse these exact strings when generating UI. Do NOT translate or rephrase — brand voice is preserved through the original wording.


## 15. Asset Inventory (Image Roles & Ratios)

*Image inventory classified by role and aspect ratio. When reproducing the site, allocate this number of assets per role.*

```yaml
assets:
  logo:
    count: 12
    avg-ratio: 2.63
    common-aspect: "~16:6 banner"
    sample-alts:
      - "logo - zilch"
      - "logo - affirm"
      - "logo - plend"
  hero:
    count: 1
    avg-ratio: 6.61
    common-aspect: "~16:6 banner"
    sample-alts:
      - "seo placeholer"
  product:
    count: 1
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
    sample-alts:
      - "Financial activity feed displaying account updates, transact"
```

**Agent rule**: when generating placeholder images, match these counts and aspect ratios. Use neutral placeholder backgrounds for `product` (e.g. `#f5f5f5`), full-color photography hints for `hero` and `editorial`.


## 16. Component HTML Templates

*Suggested HTML markup for reproducing the key components — based on what was detected in the source DOM.*

### Button (primary action)
```html
<button class="btn btn-primary">
  Products
</button>
```
_Source pattern detected: padding `0px 24px` · radius `2px` · weight `400`_

### Generic Card
```html
<div class="card">
  <!-- content -->
</div>
```
_Source pattern detected: padding `0px` · radius `0px` · shadow `none`_

**Agent rule**: use these markup skeletons as the structural baseline. Apply tokens from §2-3 for visual styling.


## 17. Content Architecture & Resources (Links by Purpose)

*The page's links classified by purpose — the information architecture to reproduce. Categories, featured images, devices and projects are extracted from the rendered DOM, not guessed.*

**By purpose:** **nav** 14 · **cta** 1 · **auth** 1 · **product** 20 · **pricing** 1 · **docs** 3 · **blog** 1 · **social** 1 · **legal** 3 · **footer** 3 · **other** 5

**Primary actions (conversion path):**
- Account access — "Log in" (login/signup) → `https://dashboard.plaid.com/signin`
- Primary call-to-action — "Start building" (the conversion path) → `https://dashboard.plaid.com/signup?_gl=1*k2v2l9*_gcl_au*MTI1NjUxOTE3OC4xNzcyNTA0NDM1*_ga*MTM3MjgzOTY0Mi4xNzA5MDYyNjA3*_ga_3V9NV2HMZW*czE3NzkzOTM2MzUkbzM2MiRnMSR0MTc3OTM5OTkxMCRqMTQkbDAkaDEwNTU1NDM5OTY.`

**Projects / case studies detected** (clustered by URL + featured image):

*Use-Cases* — medium confidence, 5 items:

| Title | Featured image | Link |
|---|---|---|
| Banking & wealth | — | https://plaid.com/en-eu/use-cases/banking-and-wealth/ |
| iGaming | — | https://plaid.com/en-eu/use-cases/igaming/ |
| Business financial management | — | https://plaid.com/en-eu/use-cases/business-finances/ |
| Personal financial management | — | https://plaid.com/en-eu/use-cases/personal-finances/ |
| Payments | — | https://plaid.com/en-eu/use-cases/payments/ |

*Customer-Stories* — medium confidence, 5 items:

| Title | Featured image | Link |
|---|---|---|
| Customer stories | — | https://plaid.com/en-eu/customer-stories/ |
| Read the story | — | https://plaid.com/en-eu/customer-stories/zilch/ |
| Read the story | — | https://plaid.com/en-eu/customer-stories/youlend/ |
| Read the story | — | https://plaid.com/en-eu/customer-stories/moneybox/ |
| Read the story | — | https://plaid.com/en-eu/customer-stories/western-union/ |

*Solutions* — medium confidence, 4 items:

| Title | Featured image | Link |
|---|---|---|
| Overview Explore payments solutions | — | https://plaid.com/en-eu/solutions/payments/ |
| Personal finance management | — | https://plaid.com/en-eu/solutions/personal-financial-management/ |
| See credit solutions | `Solutions_Card_Fullscreen_04.png?fm=` (ar 1.7) | https://plaid.com/en-eu/solutions/credit-underwriting/ |
| Unlock data access | `Updated-Solutions_Card_Fullscreen_05` (ar 1.7) | https://plaid.com/en-eu/solutions/financial-management/ |

**Signals:** 30/53 links carry a featured image · device mockups detected: phone ×2, laptop ×4 · dominant link roles: content-card (20), footer-link (15), navigation (14).


---
## Extraction Completeness: 79/100 (B)

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 25 | 25 | 23 named colors |
| Typography | 15 | 20 | 6 roles defined |
| Components | 12 | 20 | 3 specs extracted |
| Motion & Interaction | 12 | 15 | Keyframes |
| CSS Custom Properties | 10 | 10 | 342 vars |
| Responsive Breakpoints | 5 | 5 | 7 breakpoints |
| Variable Fonts | 0 | 5 | None detected |

## 12. Known Gaps & Confidence

Explicit list of what this extraction could NOT capture. Agents should not invent values for these — either skip the feature or use the documented baseline + heuristic fallback.

*Auto-detected extraction limitations — understand before building:*

- **Licensed web fonts (Cern, Inconsolata, Bowery Lane)** — detected but not downloaded. Substitute with your licensed copy or a close fallback (see Typography section for metrics).
- **Sparse component extraction** — fewer than 5 component types detected. Highly dynamic sections (modals, datepickers, carousels) require interaction to render and are not captured in a static pass.

*✅ No critical extraction gaps detected — high-confidence reproduction expected.*

### Per-section confidence

| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
| §2 Colors | High | 342 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 6 typography roles inferred |
| §4 Components | Medium | 3 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 21 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 7 breakpoints detected |
| §9b Photography | High | 12 images, hero present |

## 11.1 CSS Implementation Guide (CSS Interception Engine v2.15+)

*Ready-to-use CSS from Prism's CSS Interception Engine — intercepted directly from the site's CSS files (bypasses CORS). Copy-paste into your `<style>` block.*

### Font Loading

19 font file(s) captured (761KB total). When running `prism add`, fonts are saved to `extractions/plaid.com/fonts/` and embedded as base64 in the output HTML.

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'Bowery Lane';
  /* src: url('/fonts/Bowery-Lane.woff2') format('woff2'); */
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bowery Lane';
  /* src: url('/fonts/Bowery-Lane.woff2') format('woff2'); */
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Bowery Lane';
  /* src: url('/fonts/Bowery-Lane.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bowery Lane';
  /* src: url('/fonts/Bowery-Lane.woff2') format('woff2'); */
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Bowery Lane';
  /* src: url('/fonts/Bowery-Lane.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bowery Lane';
  /* src: url('/fonts/Bowery-Lane.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Bowery Lane';
  /* src: url('/fonts/Bowery-Lane.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bowery Lane';
  /* src: url('/fonts/Bowery-Lane.woff2') format('woff2'); */
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Bowery Lane';
  /* src: url('/fonts/Bowery-Lane.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bowery Lane';
  /* src: url('/fonts/Bowery-Lane.woff2') format('woff2'); */
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Bowery Lane';
  /* src: url('/fonts/Bowery-Lane.woff2') format('woff2'); */
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bowery Lane';
  /* src: url('/fonts/Bowery-Lane.woff2') format('woff2'); */
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Bowery Street';
  /* src: url('/fonts/Bowery-Street.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bowery Street';
  /* src: url('/fonts/Bowery-Street.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bowery Street';
  /* src: url('/fonts/Bowery-Street.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bowery Street';
  /* src: url('/fonts/Bowery-Street.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plaid Sans';
  /* src: url('/fonts/Plaid-Sans.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plaid Sans';
  /* src: url('/fonts/Plaid-Sans.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plaid Sans';
  /* src: url('/fonts/Plaid-Sans.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plaid Sans';
  /* src: url('/fonts/Plaid-Sans.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plaid Sans';
  /* src: url('/fonts/Plaid-Sans.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plaid Sans';
  /* src: url('/fonts/Plaid-Sans.woff2') format('woff2'); */
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plaid Sans';
  /* src: url('/fonts/Plaid-Sans.woff2') format('woff2'); */
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cern';
  /* src: url('/fonts/Cern.woff2') format('woff2'); */
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cern';
  /* src: url('/fonts/Cern.woff2') format('woff2'); */
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Cern';
  /* src: url('/fonts/Cern.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cern';
  /* src: url('/fonts/Cern.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cern';
  /* src: url('/fonts/Cern.woff2') format('woff2'); */
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Cern';
  /* src: url('/fonts/Cern.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cern';
  /* src: url('/fonts/Cern.woff2') format('woff2'); */
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Cern';
  /* src: url('/fonts/Cern.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inconsolata';
  /* src: url('/fonts/Inconsolata.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inconsolata';
  /* src: url('/fonts/Inconsolata.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('woff2'); */
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('woff2'); */
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('woff2'); */
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('woff2'); */
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('woff2'); */
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('woff2'); */
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('woff2'); */
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('woff2'); */
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('woff2'); */
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('woff2'); */
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('woff2'); */
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('woff2'); */
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter var';
  /* src: url('/fonts/Inter-var.woff2') format('woff2'); */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter var';
  /* src: url('/fonts/Inter-var.woff2') format('woff2'); */
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

**41 @keyframes found** — these are the real animation definitions:

```
@keyframes react-loading-skeleton { ... }
@keyframes fade-in { ... }
@keyframes fade-out { ... }
@keyframes bell { ... }
@keyframes refresh { ... }
@keyframes pulsate { ... }
@keyframes propertyFadeIn { ... }
@keyframes descriptionFadeIn { ... }
@keyframes slideOutUp { ... }
@keyframes slideOutDown { ... }
@keyframes slideInDown { ... }
@keyframes fadeOut { ... }
@keyframes fadeIn { ... }
@keyframes fadeInDown { ... }
@keyframes fadeInUpPhone { ... }
@keyframes fadeInDownPhone { ... }
@keyframes fadeInUp { ... }
@keyframes slideInUp { ... }
@keyframes slideInUpActions { ... }
@keyframes bounceOut { ... }
@keyframes zoomOut { ... }
@keyframes zoomIn { ... }
@keyframes screenOn { ... }
@keyframes slideInRight { ... }
@keyframes drawArrow { ... }
@keyframes cta-arrow-in { ... }
@keyframes cta-arrow-out { ... }
@keyframes Dialog_openAnimation__1__zK { ... }
@keyframes Drawer_slide-up__gfJj4 { ... }
@keyframes Header_animation-colors__IhaEm { ... }
@keyframes useAnimations_fade-in__GdC0Z { ... }
@keyframes useAnimations_slide-up-8__szn9w { ... }
@keyframes useAnimations_slide-up-16__wue0i { ... }
@keyframes useAnimations_slide-up-40__k_dTG { ... }
@keyframes useAnimations_slide-up-eighth__XCSmZ { ... }
@keyframes useAnimations_slide-up-quarter__wFArK { ... }
@keyframes useAnimations_slide-up-half__06EJK { ... }
@keyframes useAnimations_slide-up-bounce__DB2wz { ... }
@keyframes useAnimations_draw-path__wjYKQ { ... }
@keyframes onetrust-fade-in { ... }
@keyframes os-resize-observer-dummy-animation { ... }
```

<details><summary>Full keyframes CSS (41 animations)</summary>

```css
@-webkit-keyframes react-loading-skeleton{to{-webkit-transform:translateX(100%);transform:translateX(100%)}}
@-webkit-keyframes fade-in{0%{opacity:0}
@-webkit-keyframes fade-out{0%{opacity:1}
@-webkit-keyframes bell{0%{-webkit-transform:rotate(35deg);transform:rotate(35deg)}12.5%{-webkit-transform:rotate(-30deg);transform:rotate(-30deg)}25%{-webkit-transform:rotate(25deg);transform:rotate(25deg)}37.5%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}50%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}62.5%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}75%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}
@-webkit-keyframes refresh{0%{-webkit-transform:rotate(0);transform:rotate(0)}
@-webkit-keyframes pulsate{0%{opacity:.8;-webkit-transform:scale(1);transform:scale(1)}
@-webkit-keyframes propertyFadeIn{0%{padding:14px 24px 14px 16px;-webkit-transform:scale(.97);transform:scale(.97)}80%{-webkit-transform:scale(1.03);transform:scale(1.03)}
@-webkit-keyframes descriptionFadeIn{60%{opacity:0}90%{opacity:.3}
@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}
@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}
@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}
@-webkit-keyframes fadeOut{0%{opacity:1}
@-webkit-keyframes fadeIn{0%{opacity:0;visibility:visible}
@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}
@-webkit-keyframes fadeInUpPhone{0%{opacity:0;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0);visibility:visible}90%{opacity:.9}
@-webkit-keyframes fadeInDownPhone{0%{opacity:0;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);visibility:visible}90%{opacity:.9}
@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}
@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}
@-webkit-keyframes slideInUpActions{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:hidden}60%{visibility:hidden}
@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}
@-webkit-keyframes screenOn{0%{background:#fff;opacity:.5%;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3);visibility:visible}50%{background:#fff;opacity:1;visibility:visible}
@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}
@-webkit-keyframes drawArrow{0%{opacity:0;visibility:visible}
@-webkit-keyframes cta-arrow-in{0%{opacity:.5;-webkit-transform:translateZ(0) scale(.8);transform:translateZ(0) scale(.8)}
@-webkit-keyframes cta-arrow-out{0%{opacity:1;-webkit-transform:translate3d(8px,0,0) scale(.8);transform:translate3d(8px,0,0) scale(.8)}
@-webkit-keyframes Dialog_openAnimation__1__zK{0%{opacity:0;-webkit-transform:scale(.8);transform:scale(.8)}
@-webkit-keyframes Drawer_slide-up__gfJj4{0%{-webkit-transform:translateY(110vh);transform:translateY(110vh)}
@-webkit-keyframes Header_animation-colors__IhaEm{0%{background-color:#0a85ea}20%{background-color:#7646ec}40%{background-color:#f44e66}60%{background-color:#f2d211}80%{background-color:#23d09c}
@-webkit-keyframes useAnimations_fade-in__GdC0Z{0%{opacity:0}
@-webkit-keyframes useAnimations_slide-up-8__szn9w{0%{opacity:0;-webkit-transform:translateY(8px);transform:translateY(8px)}
@-webkit-keyframes useAnimations_slide-up-16__wue0i{0%{opacity:0;-webkit-transform:translateY(16px);transform:translateY(16px)}
@-webkit-keyframes useAnimations_slide-up-40__k_dTG{0%{opacity:0;-webkit-transform:translateY(40px);transform:translateY(40px)}
@-webkit-keyframes useAnimations_slide-up-eighth__XCSmZ{0%{opacity:1;-webkit-transform:translateY(12.5%);transform:translateY(12.5%)}
@-webkit-keyframes useAnimations_slide-up-quarter__wFArK{0%{opacity:1;-webkit-transform:translateY(25%);transform:translateY(25%)}
@-webkit-keyframes useAnimations_slide-up-half__06EJK{0%{opacity:1;-webkit-transform:translateY(50%);transform:translateY(50%)}
@-webkit-keyframes useAnimations_slide-up-bounce__DB2wz{0%{opacity:0;-webkit-transform:translateY(40px);transform:translateY(40px)}40%{opacity:1;-webkit-transform:translateY(-16px);transform:translateY(-16px)}
@-webkit-keyframes useAnimations_draw-path__wjYKQ{0%{opacity:1;stroke-dashoffset:600}
@keyframes onetrust-fade-in{0%{opacity:0}100%{opacity:1}}
@keyframes os-resize-observer-dummy-animation{0%{z-index:0}
```
</details>

### Brand Gradient Palette

**3 complex gradients captured** from the site's CSS. The first few are the most prominent visual decorations:

```css
/* Gradient 1 */
background: linear-gradient(108deg,#e5effb 33.47%,#cbfcb3 75.34%,#f9dbff 133.05%);

/* Gradient 2 */
background: conic-gradient(from 180deg at 50% 50%,#f5c2ff 0deg,#ffc2c2 54deg,#ffeda3 108deg,#d2fbb6 164.42deg,#9aedfe 230.19deg,#cfe 292.5deg,#f5c2ff 1turn);

/* Gradient 3 */
background: linear-gradient(180deg,#9abaf9,#c6b2f7 10%,#f1c5e7 20%,#e9d6e6 30%,#c3e8e8 40%,#97e0f1 50%,#becaf5 60%,#ebbded 70%,#edbcec 80%,#efbbeb 90%,#ddbcf1);

```

### Hover State CSS (Intercepted)

**7 hover rule lines** captured from CSS files. Key interactive transitions from real CSS (not inferred):

```css
@media(hover:hover){.Dialog_Dialog__body__f7oVb .Dialog_List__6f40T .Dialog_Button__N1Btb:hover,.Dialog_Dialog__body__f7oVb .Dialog_List__6f40T .Dialog_Link__bSkGc:hover{color:var(--dialog-color)}

@media(hover:hover){.Dialog_Dialog__mC3_V .Dialog_Back__KFGqK,.Dialog_Dialog__mC3_V .Dialog_Back__KFGqK:hover{color:var(--dialog-color)}

@media(hover:hover){.Card_Card__4To9J:hover{color:inherit}

.Card_Card__4To9J:hover .Card_Card__icon__7epo4{background:var(--card-hover-icon-background);-webkit-box-shadow:var(--card-hover-icon-box-shadow);box-shadow:var(--card-hover-icon-box-shadow);color:#fff}

.Card_Card__4To9J:hover .Card_Card__image__F0OGL{background:var(--card-hover-image-background);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.05),0 3px 7px 0 rgba(0,0,0,.13);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05),0 3px 7px 0 rgba(0,0,0,.13)}

.Card_Card__4To9J:hover .Card_Card__image_top__Pa61d .Card_Image__gpf8x{-webkit-transform:translate(-50%,calc(-50% + 10px));transform:translate(-50%,calc(-50% + 10px))}

.Card_Card__4To9J:hover .Card_Card__image_bottom__TKOtd .Card_Image__gpf8x{-webkit-transform:translate(-50%,calc(50% - 10px));transform:translate(-50%,calc(50% - 10px))}

.Card_Card__4To9J:hover .Card_Card__body__RlopU svg{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}

.Card_Card__4To9J:hover .Card_Card__description__kNi_6{color:inherit}

@media(hover:hover){.Columns_Column__YBbpi .Columns_Link__Wp1W0:hover{color:var(--dropdown-link-hover-color)}

@media(hover:hover){.NavList_NavList__item___4tqv .NavList_Link__c_viI:hover{color:inherit;opacity:.75}

.MainNavigationBar_Root__ffY5g .MainNavigationBar_Burger__DKxT3,.MainNavigationBar_Root__ffY5g .MainNavigationBar_Burger__DKxT3 svg,.MainNavigationBar_Root__ffY5g .MainNavigationBar_Burger__DKxT3:active,.MainNavigationBar_Root__ffY5g .MainNavigationBar_Burger__DKxT3:hover,.MainNavigationBar_Root__ffY5g .MainNavigationBar_Logo__liIxh,.MainNavigationBar_Root__ffY5g .MainNavigationBar_Logo__liIxh svg,.MainNavigationBar_Root__ffY5g .MainNavigationBar_Logo__liIxh:active,.MainNavigationBar_Root__ffY5g .MainNavigationBar_Logo__liIxh:hover{color:inherit}

@media(hover:hover){.MobileNav_Dialog__body__aujlU .MobileNav_List__VVa2a .MobileNav_Button__oKHrg:hover,.MobileNav_Dialog__body__aujlU .MobileNav_List__VVa2a .MobileNav_Link__9Q_k0:hover{color:var(--dialog-color)}

@media(hover:hover){.MobileNav_Dialog__PrR9Y .MobileNav_Back__7U6Q0,.MobileNav_Dialog__PrR9Y .MobileNav_Back__7U6Q0:hover{color:var(--dialog-color)}

@media(hover:hover){.Card_Card__unnne:hover{color:inherit}

.Card_Card__unnne:hover .Card_Card__icon__gfugD{background:var(--card-hover-icon-background);color:#fff}

.Card_Card__unnne:hover .Card_Card__icon__gfugD:before{background:rgba(95,113,255,.071)}

.Card_Card__unnne:hover .Card_Card__image__jTo11 .Card_Image__8hrFB{-webkit-transform:translate(-50%) scale(1.015);transform:translate(-50%) scale(1.015)}

.Card_Card__unnne:hover .Card_Card__image_top__8pDI4 .Card_Image__8hrFB{-webkit-transform:translate(-50%,calc(-50% + 10px));transform:translate(-50%,calc(-50% + 10px))}

.Card_Card__unnne:hover .Card_Card__image_bottom__DQbjB .Card_Image__8hrFB{-webkit-transform:translate(-50%,calc(50% - 10px));transform:translate(-50%,calc(50% - 10px))}
```

> **Note**: All values above are extracted from the live site's CSS files. The font files are saved locally by Prism and embedded in the output HTML. Use them as-is for maximum fidelity.

## 11.2 Measured Reality (CDP Engine)

Captured directly from Chrome's engine across **all 1448 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Real Responsive Breakpoints
**41 breakpoints** read from the live `@media` rules (not guessed) — 14 most relevant:
`300px` · `375px` · `385px` · `400px` · `421px` · `425px` · `426px` · `480px` · `500px` · `530px` · `550px` · `590px` · `600px` · `639px` … (+27 more)

### Measured Design Scale
**Type scale by usage** (× = paint count): `16px`×1189 · `20px`×145 · `24px`×28 · `80px`×19 · `14px`×17 · `60px`×11 · `30px`×10 · `18px`×8

**Radius scale** (× = paint count): `100px`×42 · `8px`×39 · `2px`×10 · `16px`×5 · `40px`×2 · `100%`×2 · `35px`×1

**Weights** (× = paint count): `400`×1153 · `600`×259 · `300`×16 · `700`×8 · `500`×2

**Layout gaps** (× = paint count): `12px`×28 · `10px`×19 · `4px`×18 · `1px`×14 · `8px`×13 · `2px`×10 · `normal 8px`×6 · `24px`×5

**Elevation (real shadows)**:
```css
rgba(0, 0, 0, 0.2) 0px 0px 5px 0px
rgba(0, 0, 0, 0.06) 0px 2px 8px 0px, rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset, rgba(85, 85, 85, 0.12) 0px 6px 12px 0px
rgba(0, 0, 0, 0.06) 0px 2px 6px 0px, rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset, rgba(85, 85, 85, 0.12) 0px 6px 12px 0px
rgba(243, 49, 247, 0.43) 0px 0px 36px 5px
```

### Provenance — measured styles on key elements
Read from the live CSSOM (includes runtime-injected CSS). This is *what actually styles the page*, by element:

```css
body { color:var(--color-text-high-contrast); font-family:Cern,Helvetica,Arial,sans-serif; font-size:1.6rem }
body { font-size:1.6rem }
body { background:#fff; color:#111; font-family:Cern,Helvetica,Arial,sans-serif; font-weight:400; background-color:rgb(255, 255, 255) }
nav { color:var(--color) }
nav { transition:.3s ease-out!important }
h1 { font-family:Cern,Helvetica,Arial,sans-serif; font-size:6rem; font-weight:800 }
h1 { font-size:2em }
h1 { font-size:3.2rem }
@media print, screen and (min-width: 64em) h1 { font-size:5.4rem }
h1 { font-family:Cern,Helvetica,Arial,sans-serif; font-weight:800 }
h1 { font-family:Plaid Sans,Cern,"Avenir Next",Avenir,"Proxima Nova","Jakarta Plus Sans",Futura,"Avant Garde",Montserrat,"Helvetica Neue",Helvetica,"Nimbus Sans",system-ui,-apple-system,BlinkMacSystemFont,Arial,"Segoe UI",Roboto,Oxygen,sans-serif!important; color:#ffffff; font-size:3.2rem; font-weight:600 }
@media (min-width: 1024px) h1 { font-size:6.4rem }
```

> Selectors normalised to their semantic element — source class names are often build-hashed (`.bgDIHX`) and not reusable. The declarations + CSS vars are the transferable part.

---
*Generated by Prism — automated Playwright extraction + design analysis.*
*Source: https://plaid.com | 2026-06-11T05:44:48.425Z*
*Values extracted via getComputedStyle() (rendered) + CSS custom properties (tokens, marked `(token)`). Token-only values may not be painted — verify against the live site before shipping.*