# Plaid — DESIGN.md

## Overview
Plaid is the developer-fintech brand par excellence — white canvas, deep cobalt (`#0a2540`) for type and CTAs, and a single rainbow-holographic gradient strip used only at the hero (the "Tail Holo"). Type is a geometric sans (Faktum / Inter) with a tight, technical cadence. The Benjamin Franklin mascot illustration is the brand's personality moment; everything else is restrained.

## Color
- **Primary:** `#0a2540` — Cobalt Ink
- **Primary active:** `#000a26`
- **Accent (action):** `#0066ff` — Plaid Blue
- **Canvas:** `#ffffff` — White
- **Surface alt:** `#f6f8fb` — Cool Bone
- **Ink:** `#0a2540`
- **Body:** `#3c4250`
- **Hairlines:** `rgba(10,37,64,0.10)`
- **Signature gradient:** `linear-gradient(90deg, #ff6b6b 0%, #ffce5c 25%, #6cf09e 50%, #5dd4ff 75%, #b87cff 100%)` — "Tail Holo Strip"
- **Semantic success:** `#1aa667`
- **Semantic warning:** `#e2a93b`

## Typography
- **Display:** Faktum / Inter Display, weight 500-600, tracking -0.015em, sizes 56-88px
- **Body:** Inter, weight 400-500, 16-17px base, 1.55 line-height
- **Mono:** IBM Plex Mono, weight 400, 14px in code blocks

## Spacing & rhythm
8-base (8/16/24/32/48/64/96). Section padding 96px. Hero band uses 6/6 grid with type left, mascot or product mockup right. Card padding 24-32px.

## Motion signature
180ms ease-out on hover; signature is the gentle horizontal shift of the holographic gradient strip beneath the hero h1 (40s linear loop, barely perceptible). Benjamin Franklin character has subtle blink/wink frames on hover.

## Components observed
- `hero-band-with-holo-strip` (cobalt h1, gradient ribbon at base)
- `benjamin-mascot-illustration` (signature Franklin character)
- `code-snippet-card-light` (light-bone surface, syntax highlighting)
- `customer-logo-strip-mono` (cobalt-ink logos on white)
- `cta-button-cobalt-fill`
- `pricing-tier-three-column-light`

## Trademark signals
- Tail Holo gradient strip — rainbow-holographic, only at hero base, never repeated below the fold
- Benjamin Franklin mascot — fintech with personality, the rare illustration that survived corporate maturity
- Cobalt ink (`#0a2540`) as both type and primary button — single color carries multiple roles
- Geometric sans with tight tracking — technical-precision cadence
- Customer logos always in cobalt-ink mono, never colored

## What they DON'T do
- No dark-mode hero on marketing
- No saturated colors except in the Tail Holo gradient
- No 3D rendered geometry or floating cards
- No second mascot — Franklin stands alone
- No emoji in product copy

## Exemplar pages
- https://plaid.com/
- https://plaid.com/products/
- https://plaid.com/docs/
- https://plaid.com/customers/

## When to reference
Reach for Plaid when the user needs a developer-fintech surface that balances institutional credibility with a single moment of warmth (the mascot, the holo strip). The cobalt-on-white + single-gradient-accent combination is ideal for B2B financial-infrastructure products where trust is the conversion lever but the brand still wants personality.
