№ plaid-com--blog

Plaid — Blog

Cool, deep teal gradients flow over crisp, geometric sans-serifs in a spacious, clean layout.

Split Studiominimalism swiss monochrome fintech developer toolslight

The hero image is a striking, high-contrast illustration dominating the left side, while the right features a concise call to action and supporting text. The overall aesthetic is clean and purposeful, prioritizing clarity and a sense of technological sophistication. · fintech hero, developer tools design, monochrome split screen, technical website, illustration hero, plaid website, dark website, minimalist fintech

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: cool · muted · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#0c88c8
OKLCHoklch(59.8% 0.136 241)
RoleDominant
find sites →
Hex#04558c
OKLCHoklch(43.7% 0.113 247)
RoleSurface
find sites →
Hex#b08aea
OKLCHoklch(70.7% 0.141 301)
RoleInk
find sites →
Hex#6884a8
OKLCHoklch(60.6% 0.064 255)
RoleAccent
find sites →
Hex#e3dfed
OKLCHoklch(91.1% 0.019 299)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	Plaid Sans	76px	500	1.12	-3.4px	Aa Bb Cc
h2	Plaid Sans	20px	600	1.1	-0.4px	Aa Bb Cc
h3	Plaid Sans	26px	500	1.4	-0.5px	Aa Bb Cc
body	Cern	16px	400	1.5	0	Aa Bb Cc
button	Cern	16px	400	1	0	Aa Bb Cc

Spacing scale

7px

16px

24px

70px

80px

112px

140px

164px

180px

Radius scale

0px

2px

6px

8px

46px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #0c88c8;
  --color-surface: #04558c;
  --color-ink: #b08aea;
  --color-accent: #6884a8;
  --color-detail: #e3dfed;
}

/* CSS variables exposed by source */
:root {
  --color-fill-bg-tertiary: #f6f6f6;
  --border: 1px solid #ededed;
  --color-border-state-focused: #0072cf;
  --color-fill-bg-secondary: #fafafa;
  --color-border-destructive-high-contrast: #b72743;
  --color-border-default-contrast: #dcdcdc;
  --color-border-state-filled: #111;
  --color-border-destructive-low-contrast: #ffd7dc;
  --color-text-destructive-low-contrast: #ffd7dc;
  --color-fill-status-attention: #b1eefc;
  --color-border-status-success: #1fa077;
  --color-text-low-contrast: #555;
  --color-modal-progressbar-progress: #0a85ea;
  --color-fill-status-success: #abffdb;
  --font-size-med: 1.4rem;
  --border-radius: 0.2rem;
  --color-fill-state-pressed-low-contrast: #d4f9ff;
  --color-border-state-default: #767676;
  --color-border-status-warning: #ba7d17;
  --shadow-4: 0 0.2rem 0.4rem 0 hsla(0,0%,7%,.08);
  --border-color: transparent;
  --shadow-e4: 0px 2px 4px hsla(0,0%,7%,.08);
  --color-text-inverse-default-contrast: #ededed;
  --color-border-state-error: #f44e66;
  --text-color: transparent;
  --color-border-state-disabled: #dcdcdc;
  --color-fill-status-error: #ffaab9;
  --color-fill-state-hover: #0072cf;
  --color-border-high-contrast: #111;
  --color-border-status-default: #767676;
  --font-size-large-form-controls: 2rem;
  --color-border-destructive-default-contrast: #f44e66;
  --shadow-e3: 0px 8px 8px hsla(0,0%,7%,.08);
  --color-text-high-contrast: #111;
  --font-stack-monospace: Inconsolata,Consolas,Courier,monospace;
  --color-fill-default: #111;
  --color-text-destructive-high-contrast: #b72743;
  --shadow-3: 0 0.8rem 0.8rem 0 hsla(0,0%,7%,.08);
  --font-stack-sans: Cern,Helvetica,Arial,sans-serif;
  --color-fill-destructive-high-contrast: #b72743;
  --shadow-1: 0 1.6rem 2.4rem 0 hsla(0,0%,7%,.08);
  --color-border-status-error: #d83d57;
  --color-text-state-hover: #0072cf;
  --color-fill-state-disabled: #ededed;
  --shadow-2: 0 0.8rem 1.6rem 0 hsla(0,0%,7%,.08);
  --shadow-e2: 0px 8px 16px hsla(0,0%,7%,.08);
  --color-border-state-hover: #0072cf;
  --color-fill-state-error: #f44e66;
  --color-fill-state-pressed: #0061b3;
  --color-modal-progressbar-background: #f2f2f2;
  --color-text-state-default: #111;
  --color-text-inverse-low-contrast: #c5c5c5;
  --color-fill-bg-inverse: #111;
  --color-fill-status-warning: #fbf1a0;
  --color-fill-bg-e1: #fff;
  --color-fill-state-default: #111;
  --color-fill-destructive-low-contrast: #ffd7dc;
  --shadow-e1: 0px 16px 24px hsla(0,0%,7%,.08);
  --color-fill-status-default: #dcdcdc;
  --color-text-state-pressed: #0072cf;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Plaid — Blog.
Reference design system (extracted from the live site):
- Palette: #0c88c8, #04558c, #b08aea, #6884a8, #e3dfed
- Typefaces: Plaid Sans, Cern
- Macrostructure: Split Studio
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/plaid-com--blog

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Plaid Sans

76px

500

1.12

-3.4px

Aa Bb Cc

Plaid Sans

20px

600

1.1

-0.4px

Aa Bb Cc

Plaid Sans

26px

500

1.4

-0.5px

Aa Bb Cc

body

Cern

16px

400

1.5

Aa Bb Cc

button

Cern

16px

400

Aa Bb Cc

:root { --color-dominant: #0c88c8; --color-surface: #04558c; --color-ink: #b08aea; --color-accent: #6884a8; --color-detail: #e3dfed; } /* CSS variables exposed by source */ :root { --color-fill-bg-tertiary: #f6f6f6; --border: 1px solid #ededed; --color-border-state-focused: #0072cf; --color-fill-bg-secondary: #fafafa; --color-border-destructive-high-contrast: #b72743; --color-border-default-contrast: #dcdcdc; --color-border-state-filled: #111; --color-border-destructive-low-contrast: #ffd7dc; --color-text-destructive-low-contrast: #ffd7dc; --color-fill-status-attention: #b1eefc; --color-border-status-success: #1fa077; --color-text-low-contrast: #555; --color-modal-progressbar-progress: #0a85ea; --color-fill-status-success: #abffdb; --font-size-med: 1.4rem; --border-radius: 0.2rem; --color-fill-state-pressed-low-contrast: #d4f9ff; --color-border-state-default: #767676; --color-border-status-warning: #ba7d17; --shadow-4: 0 0.2rem 0.4rem 0 hsla(0,0%,7%,.08); --border-color: transparent; --shadow-e4: 0px 2px 4px hsla(0,0%,7%,.08); --color-text-inverse-default-contrast: #ededed; --color-border-state-error: #f44e66; --text-color: transparent; --color-border-state-disabled: #dcdcdc; --color-fill-status-error: #ffaab9; --color-fill-state-hover: #0072cf; --color-border-high-contrast: #111; --color-border-status-default: #767676; --font-size-large-form-controls: 2rem; --color-border-destructive-default-contrast: #f44e66; --shadow-e3: 0px 8px 8px hsla(0,0%,7%,.08); --color-text-high-contrast: #111; --font-stack-monospace: Inconsolata,Consolas,Courier,monospace; --color-fill-default: #111; --color-text-destructive-high-contrast: #b72743; --shadow-3: 0 0.8rem 0.8rem 0 hsla(0,0%,7%,.08); --font-stack-sans: Cern,Helvetica,Arial,sans-serif; --color-fill-destructive-high-contrast: #b72743; --shadow-1: 0 1.6rem 2.4rem 0 hsla(0,0%,7%,.08); --color-border-status-error: #d83d57; --color-text-state-hover: #0072cf; --color-fill-state-disabled: #ededed; --shadow-2: 0 0.8rem 1.6rem 0 hsla(0,0%,7%,.08); --shadow-e2: 0px 8px 16px hsla(0,0%,7%,.08); --color-border-state-hover: #0072cf; --color-fill-state-error: #f44e66; --color-fill-state-pressed: #0061b3; --color-modal-progressbar-background: #f2f2f2; --color-text-state-default: #111; --color-text-inverse-low-contrast: #c5c5c5; --color-fill-bg-inverse: #111; --color-fill-status-warning: #fbf1a0; --color-fill-bg-e1: #fff; --color-fill-state-default: #111; --color-fill-destructive-low-contrast: #ffd7dc; --shadow-e1: 0px 16px 24px hsla(0,0%,7%,.08); --color-fill-status-default: #dcdcdc; --color-text-state-pressed: #0072cf; }

Build a landing page in the visual style of Plaid — Blog. Reference design system (extracted from the live site): - Palette: #0c88c8, #04558c, #b08aea, #6884a8, #e3dfed - Typefaces: Plaid Sans, Cern - Macrostructure: Split Studio Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/plaid-com--blog