Design System Audit

plaid.com
Visual Language

Complete design system extracted from plaid.com — every token, component, interaction pattern, and accessibility note, all from real values.

15Color tokens
10Type styles
5Breakpoints
CernPrimary font
01 — Foundations

Color Palette

All color values extracted from the live stylesheet. Contrast ratios per WCAG 2.1.

white

#ffffff

Dominant — background, text

1.00:1 on page bg #ffffff · fails AA

ink-deepest

#111111

Dominant — text

18.88:1 on page bg #ffffff · AAA ✓

black

#000000

Supporting — text

21.00:1 on page bg #ffffff · AAA ✓

accent

#012e37

Supporting — text

14.51:1 on page bg #ffffff · AAA ✓

ink-deepest-2

#232424

Accent — text

15.56:1 on page bg #ffffff · AAA ✓

canvas

#f7faff

Accent — background

20.07:1 on black · AAA ✓

accent-2

#034049

Accent — background

11.45:1 on white · AAA ✓

canvas-soft

#ccf8ff

Accent — background

18.44:1 on black · AAA ✓

accent-3

#043c67

Accent — text

11.37:1 on page bg #ffffff · AAA ✓

ink-deepest-3

#111112

Accent — text

18.87:1 on page bg #ffffff · AAA ✓

accent-4

#05565c

Accent — text, background

8.43:1 on page bg #ffffff · AAA ✓

accent-5

#10d1b7

Accent — background

10.83:1 on black · AAA ✓

ink

#6b7785

Accent — text

4.56:1 on page bg #ffffff · AA ✓

ink-deepest-4

#00172e

Accent — text

18.07:1 on page bg #ffffff · AAA ✓
02 — Foundations

Typography

Body: Cern · Display: Plaid Sans.

RoleSpecsSampleUsed on
Body
Cern
16px / 400
lh 1.50
Talk with our team Start building
UL element · 170 uses · real site copy
Body
Cern
16px / 400
lh 1.50
Talk with our team Start building
SPAN element · 72 uses · real site copy
Body
Cern
16px / 400
lh 1.50
Talk with our team Start building
BODY element · 49 uses · real site copy
UI Label
Cern
16px / 600
lh 1.50
Skip to main content
SPAN element · 38 uses · real site copy
Body
Cern
16px / 400
lh 1.50
Talk with our team Start building
NAV element · 18 uses · real site copy
Body
Cern
16px / 400
lh 1.00
Talk with our team Start building
BUTTON element · 12 uses · real site copy
Body
Cern
16px / 400
Talk with our team Start building
DIV element · 7 uses · real site copy
Micro
Cern
12px / 600
lh 1.50
Watch now
SPAN element · 5 uses · real site copy
Link
Cern
16px / 600
lh 1.31
Skip to main content
A element · 5 uses · real site copy
Subheading
Cern
20px / 600
lh 1.30
Talk with our team
A element · 5 uses · real site copy
03 — Components

Navigation

Nav demo using extracted colors, font, real link labels and the site's real logo.

nav · demo using extracted tokens & real links
plaid.com
Skip to main contentPricingOpen financeIncome verificationUnderwriting
Extracted nav tokens
Background#1a1a1a
Text color#ffffff
Font familyCern
Links (extracted)Skip to main content · Pricing · Open finance · Income verification · Underwriting

Layout values (height, padding, link states) are demo styling — not extracted from the site.

04 — Components

Button Variants

Color and radius tokens extracted from the scrape; variants are representative demos. Border-radius: 40px · fill type: solid · padding density: normal.

btn-primary · token demo

bg #003e4a · color #ffffff · radius: 40px

btn-secondary · outlined demo

Demo variant — outlined treatment of the extracted primary color #003e4a.

btn-ghost · text-only demo

Demo variant — text-only treatment of the extracted primary color.

btn-disabled · demo state

Generic disabled-state demo — not extracted from the site.

05 — Components

Cards & Surfaces

Depth communicated through shadows and background contrast.

section surface

bg #ffffff · text #000000

page canvas

bg #ffffff · text #111111

section surface

bg #ffffff · text #232424

07 — Components

Form Elements

Representative form patterns styled with extracted color and radius tokens. Input border-radius: not detected in scrape.

Contact form — site-styled demo

plaid.com
Get in Touch

Input states
input · default

radius: not detected · demo border/background styling

input · focus state demo

Demo focus treatment using extracted primary color #003e4a.

select · dropdown
08 — Foundations

Spacing Scale

Spacing values observed in the live layout. Values extracted from stylesheet padding, margin, and gap declarations.

4px
xs
8px
sm
12px
md
16px
base
20px
lg
24px
lg-2
32px
xl
42px
2xl
09 — Foundations

Border Radius

Corner radius tokens observed across components. All values extracted from live stylesheet.

2px
xs
2px
8px
sm
8px
12px
md
12px
24px
xl
24px
40px
xl
40px
100px
full
100px
999px
full
999px

⚠️ 999px exceeds any component size — likely from an oversized decorative element (effectively a pill shape), not a reusable radius token.

10 — Foundations

Elevation & Depth

Box-shadow tokens extracted from CSS variables. Shadow values represent real usage.

Observed element shadow

rgba(0, 0, 0, 0.06) 0px 2px 8px 0px, rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset, rgba(85, 85, 85, 0.12) 0px 6px 12px 0px

Observed element shadow

rgba(0, 0, 0, 0.06) 0px 2px 6px 0px, rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset, rgba(85, 85, 85, 0.12) 0px 6px 12px 0px

Observed element shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px

Observed element shadow

rgba(0, 0, 0, 0.2) 0px 0px 5px 0px

11 — Interactions

Motion

Transition and animation values extracted from the scraped stylesheets, with real occurrence counts.

hover demo · using extracted tokens

Demo transitions use the fastest extracted duration (0.1s ease-in-out).

idle vs hover · frozen demo states

Demo hover treatment — fill with extracted primary color. Real hover styles are not scraped.

Motion tokens (extracted)
TokenValueOccurrences
duration-fast0.1s232× in stylesheet
duration-base0.2s100× in stylesheet
duration-slow0.25s63× in stylesheet
duration-slower0.3s109× in stylesheet
duration-slowest0.5s105× in stylesheet
easing-1ease-in-out258× in stylesheet
easing-2ease-out172× in stylesheet
easing-3ease63× in stylesheet
12 — Responsive

Responsive Behavior

Breakpoint boundaries detected in the scraped stylesheet media queries, with real rule counts.

BreakpointBoundaryUsage
Mobile426px3 @media rules
Mobile-2431px2 @media rules
Mobile-3440px3 @media rules
Mobile-4480px6 @media rules
Mobile-5481px6 @media rules
426px
431px
440px
480px
481px

Extracted from https://plaid.com/ stylesheets.

13 — Assets

Iconography & Brand Assets

Assets and links extracted from the scraped pages.

Brand mark — extracted (inline SVG)

Logo extracted as inline SVG from the page markup.

Brand asset — OpenAI white wordmark
OpenAI white wordmark

https://images.ctfassets.net/ss5kfr270og3/1GuYqj9BJhvWt99LNZ7JTJ/7e3890c87883492c87e23fe6f481e531/OpenAI-white-wordmark.png?fm=webp&q=1&h=60

Social links found on site
GitHub ↗
Icon system

No icon library (Phosphor, Feather, Heroicons, Font Awesome…) detected in the scraped pages.