Plaid
A financial infrastructure platform with a sophisticated dark palette — near-black (#111111) primary surface, white text, and a distinctive chartreuse-yellow accent (#F8FF3B) that appears sparingly and deliberately as a tech-forward differentiator in conservative fintech. The Plaid Link UI (the consumer-facing bank connection modal) is clean white with blue institution logos; the company's own brand surface is confidently dark. Display type uses a custom geometric grotesque at tight tracking. The system reads as infrastructure-grade: serious, trustworthy, and technically sophisticated — the plumbing of the modern financial internet, tastefully exposed.
Color Tokens
version: alpha name: Plaid description: "A financial infrastructure platform with a sophisticated dark palette — near-black (#111111) primary surface, white text, and a distinctive chartreuse-yellow accent (#F8FF3B) that appears sparingly and deliberately as a tech-forward differentiator in conservative fintech. The Plaid Link UI (the consumer-facing bank connection modal) is clean white with blue institution logos; the company's own brand surface is confidently dark. Display type uses a custom geometric grotesque at tight tracking. The system reads as infrastructure-grade: serious, trustworthy, and technically sophisticated — the plumbing of the modern financial internet, tastefully exposed."
colors: primary: "#F8FF3B" on-primary: "#111111" primary-hover: "#E8EF30" ink: "#F5F5F5" ink-muted: "#888888" canvas: "#111111" surface-1: "#1A1A1A" surface-2: "#222222" border: "#333333" link-canvas: "#ffffff" link-primary: "#1F3FFF" link-ink: "#1A1A1A" success: "#00D87A" warning: "#F5A623"
typography: display: fontFamily: "Plaid Sans, ABC Monument Grotesk, -apple-system, sans-serif" fontSize: 56px fontWeight: 700 lineHeight: 1.05 letterSpacing: -0.035em body: fontFamily: "Plaid Sans, ABC Monument Grotesk, -apple-system, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.6 letterSpacing: -0.01em
spacing: base: 8px scale: [4, 8, 12, 16, 24, 32, 48, 64, 96, 128]
radius: sm: 4px md: 8px lg: 16px pill: 9999px
shadows: card: "0 2px 12px rgba(0,0,0,0.4)" elevated: "0 8px 32px rgba(0,0,0,0.5)"
motion: duration-fast: 120ms duration-base: 240ms easing: cubic-bezier(0.16, 1, 0.3, 1)
1. Visual Theme & Atmosphere
Plaid has two identities: the Plaid Link modal that millions of consumers see (clean, white, reassuring — designed to not alarm users during bank account connection) and Plaid's own brand surface (dark, technical, bold). The chartreuse accent is a deliberate choice — it says "we are not your grandfather's financial data company." The tight display tracking and condensed scale reflect Plaid's role as infrastructure: precise, dense, and exactly right.
2. Color System
Brand surface (dark):
- Canvas: #111111 — confident near-black
- Chartreuse: #F8FF3B — the single chromatic moment; CTAs, highlights, cursor accent
- Surface layers: #1A1A1A / #222222 — subtle depth without diluting the dark
- Ink: #F5F5F5 — warm white type
Plaid Link (consumer modal):
- Canvas: #FFFFFF — safe and institutional
- Primary blue: #1F3FFF — trust-signaling, used on "Connect" button
- Bank institution colors and logos appear here
3. Typography
Plaid Sans / ABC Monument Grotesk — a condensed, tight grotesque at heavy weights with aggressive tracking (-0.035em) at display sizes. This creates a editorial, tech-magazine feeling at hero scale. Body relaxes to -0.01em at reading size. The combination of dark background + tight type + chartreuse accent is unmistakably Plaid.
4. Components & Patterns
- Plaid Link modal: White card, search field, institution grid with logos, connection progress
- Developer dashboard: Dark-themed, API key display, webhook event logs
- Data visualization: Dark charts with yellow/green accent lines showing financial flows
- Product cards: Dark panels with one technical detail exposed (latency, uptime, coverage)
- Code examples: Terminal-dark blocks with green syntax highlighting
5. Spacing & Layout
Marketing: full-bleed dark, large section padding (128px vertical), 1440px max. Dashboard: standard 240px sidebar, content area. Link modal: 480px wide card, fixed height with scroll.
6. Motion & Interaction
Link modal: institution list loads with fade. Connection progress shows animated flow from institution to app logo. Marketing scroll-triggered reveals using opacity and subtle translate. Technical, not decorative.