---
name: Plaid
description: "Plaid is a prime example of a high-end Fintech brand balancing technical developer tools with a premium, approachable aesthetic."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#111111"
  secondary: "#555555"
  neutral: "#043C67"
  bg-soft: "#F7FAFF"
  bg-quiet: "#012E37"
  muted-soft: "#024B48"
  line: "rgba(17, 17, 17, 0.12)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 64px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-3.5px"

rounded:
  sm: 8px
  md: 16px
  lg: 24px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

The infrastructure powering modern financial technology.

*A bridge between traditional banking and modern financial tech.*

## Colors

Deep blues and teals grounded by crisp white and dark ink.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#111111`)** — uses `ink` token
- **Secondary text (`#555555`)** — uses `ink-soft` token
- **Muted (`#043C67`)** — uses `muted` token
- **Borders (`rgba(17, 17, 17, 0.12)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

- Headlines use tight letter-spacing and medium weight.
- Body text uses standard weight with generous line-height.
- Monospace font is used exclusively for code snippets.

## Layout

12-column grid with generous gutters and a max-width container.

*Rhythm:* Standard 4px grid with consistent spacing tokens.

## Elevation & Depth

- 0px 1px 5px rgba(0, 0, 0, 0.15)
- 0px 2px 8px rgba(0, 0, 0, 0.06)
- Borders: 1px solid rgba(17, 17, 17, 0.12)

## Shapes

- `sm`: 8px
- `md`: 16px
- `lg`: 24px
- `pill`: 999px

## Components

- **button:** Pill-shaped primary buttons with dark backgrounds and white text; secondary buttons are outlined or light-colored.
- **card:** Large rounded cards with subtle gradients and high-contrast text.
- **chip:** None visible in the screenshot.
- **input:** None visible in the screenshot.
- **hero:** Full-width hero with a massive headline, subtext, and two primary actions, overlaid on a complex illustrated background.

## Do's and Don'ts

**Don't:**
- Don't use a bright red primary color — screenshot shows a deep blue and teal palette instead.
- Don't use highly decorative serif fonts — screenshot shows a clean geometric sans-serif instead.
- Don't use sharp corners on buttons — screenshot shows pill-shaped (border-radius: 999px) buttons instead.
- Don't use thin, light typography for headlines — screenshot shows medium weight (500) headlines instead.
- Don't use a plain white background for the hero — screenshot shows a complex blue gradient with illustrations instead.
- Don't use standard gray for primary text — screenshot shows very dark ink (#111111) instead.

---

## System Prompt (paste into AI agent)

```
Plaid is a premium Fintech SaaS platform providing developer APIs for financial data. Its visual identity uses a deep blue and teal color palette with crisp white and dark ink accents. Typography relies on a clean geometric sans-serif with tight letter-spacing for headlines. The layout is spacious with a 12-column grid. Critical donts include: do not use bright red accents, do not use decorative serif fonts, do not use sharp corners on buttons, do not use thin weights for headlines, do not use a plain white hero background, and do not use standard gray for primary text. Motion is subtle and focused on enhancing clarity.
```