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
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.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for