Sniply
snip.ly · 9 hours ago
SaveUnofficial A style guide made by SiteStyleGuide from plaid.com’s public web pages. Not affiliated with or endorsed by Plaid. The real site is plaid.com ↗
Unofficial style guide
Plaidstyle guide
Plaid’s website (plaid.com) uses Cern for its headings and body text. Its palette is led by Dodger Blue (#0A85EA), Sky Blue (#63DAFF) and Indian Red (#F44E66), with #111111 text on #FFFFFF. Captured from the live site on 25 October 2026.
- Website
- plaid.com
- Typefaces
- Cern, Inconsolata, Plaid Sans
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 25 Oct 2026 · added by @sitestyleguide
https://plaid.com/
Screenshot
plaid.com
Identity & metadata
What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.
Title &
description
- Page title
- Plaid: Enabling all companies to build fintech solutions
- ● 56 / 60 characters
- Meta description
- Plaid helps all companies build fintech solutions by making it easy, safe and reliable for people to connect their financial data to apps and services.
- ● 151 / 160 characters
- Site name
- Plaid
- og:title
- Plaid: Enabling all companies to build fintech solutions
- og:description
- Plaid helps all companies build fintech solutions by making it easy, safe and reliable for people to connect their financial data to apps and services.
- Language
- en
- Theme colour
- #ffffff
In search results
Plaidhttps://plaid.com/
Plaid: Enabling all companies to build fintech solutions
Plaid helps all companies build fintech solutions by making it easy, safe and reliable for people to connect their financial data to apps and services.
When shared
plaid.com
Plaid: Enabling all companies to build fintech solutions
Plaid helps all companies build fintech solutions by making it easy, safe and reliable for people to connect …
Logo & favicons
Found as: SVG in the header. SVG, 77 × 29.
Logo
On white
On black
On Dodger Blue
Favicons
4 found-
512 px · SVG
mask-icon
-
180 px · PNG
apple-touch-icon
-
32 px · PNG
icon
-
16 px · PNG
icon
Plaid: Enabling all companies to build fintech solutions
Light browser tab
Plaid: Enabling all companies to build fintech solutions
Dark browser tab
Colour
Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.
Contrast is against the site’s text colour (#111111) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 33.1%
- Deep Black 22.9%
- Off White 5.5%
- Light Black 5%
- Dodger Blue 3.8%
- Sky Blue 3.6%
- Indian Red 3.3%
- Light Cyan 3.1%
- Midnight Blue 2.9%
- Lavender 2.8%
- Powder Blue 2.4%
- Light Aqua Marine 2.4%
- Deep Aqua Marine 2.3%
- Light Pink 2.3%
- Khaki 2.3%
- Misty Rose 2.3%
By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.
Neutrals
Text, backgrounds and structure-
White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 0
- On text
- 18.88:1 AAA
- On white
- —
Background, text, border · .credibility__item--green400, .credibility__item--yellow400
-
Deep Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 93
- On text
- —
- On white
- 18.88:1 AAA
Text, background, border · .article-docs li a, body
-
Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 14
- On text
- 13.77:1 AAA
- On white
- 1.37:1 Fail
Border, background, text · .tabs-title>a:focus, .pagination a:hover
-
Light Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 3 0 0 86
- On text
- 1.21:1 Fail
- On white
- 15.56:1 AAA
Text, background · .CmsFormWithBackgroundHero_inputGroup_web3__khHZ4 .CmsFormWithBackgroundHero_inp, .CmsFormWithAssetHero_inputGroup_web3__hhxgK .CmsFormWithAssetHero_input__egmlJ:
Colours
Brand colours and accents, most used first-
Dodger Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 96 43 0 8
- On text
- 5.00:1 AA
- On white
- 3.78:1 AA large
Text, background, graphic · .button-links__link:focus, .Button_outlinedButtonWrapper__gbmpJ .Button_threadsButton__Wx82L.Button_blue__x
-
Sky Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 61 15 0 0
- On text
- 11.69:1 AAA
- On white
- 1.62:1 Fail
Background, text, graphic · .credibility__item--blue600, .interactive-data .mobile-object-property-description-container .interactive-dat
-
Indian Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 68 58 4
- On text
- 5.51:1 AA
- On white
- 3.43:1 AA large
Background, text, border · .Button_outlinedButtonWrapper__gbmpJ .Button_threadsButton__Wx82L.Button_pink__w, .Button_filledButtonWrapper__VxUkI .Button_threadsButton__Wx82L.Button_pink__wd9
-
Light Cyan
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 20 3 0 0
- On text
- 16.58:1 AAA
- On white
- 1.14:1 Fail
Background, text · .Tag_blogPostTagWrapper__QiooF a.Tag_blogPostTag__Mi8l_, .css-gnir9y
-
Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 50 0 82
- On text
- 1.04:1 Fail
- On white
- 18.07:1 AAA
Text, background · .PostCard_title__G0zcD, .Showcase_showcase__XsArQ.Showcase_sky1000__Q69Hz
-
Lavender
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 12 12 0 0
- On text
- 14.76:1 AAA
- On white
- 1.28:1 Fail
Background, text · .Tag_blogPostTagWrapper__QiooF a.Tag_blogPostTag__Mi8l_, .css-gnir9y
-
Powder Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 30 6 0 1
- On text
- 14.84:1 AAA
- On white
- 1.27:1 Fail
Background, text · .credibility__item--blue400, .credibility__item--bg-blue
-
Light Aqua Marine
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 33 0 14 0
- On text
- 16.24:1 AAA
- On white
- 1.16:1 Fail
Background, text · .credibility__item--green400, .credibility__item--green400 .credibility__section--media
-
Deep Aqua Marine
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 73 0 15 6
- On text
- 13.11:1 AAA
- On white
- 1.44:1 Fail
Background · .css-bm5hiu, .css-bmwu1z
-
Light Pink
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 33 27 0
- On text
- 10.52:1 AAA
- On white
- 1.79:1 Fail
Background, text · .how-it-works__category-arc-icon--pink400, .Showcase_showcase__XsArQ.Showcase_pink400__QS3rK
-
Khaki
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 4 36 2
- On text
- 16.36:1 AAA
- On white
- 1.15:1 Fail
Background, text · .credibility__item--yellow400, .ModalPane_paywallModal__Gp9S1>div:first-of-type>div:first-of-type
-
Misty Rose
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 16 14 0
- On text
- 14.39:1 AAA
- On white
- 1.31:1 Fail
Background, text · .bg-pink, .carousel-media-center-wrapper--red200
Gradients
-
linear-gradient(to bottom left, #e6e6ff 0%, #e5effe 50%, #ccf8ff 100%) padding-box,linear-gradient(to right, #8358EF 0%, #156EF5 100%)
-
linear-gradient(315deg, #07578C 25.85%, #0E94D8 63.18%, #42F0CD 98.91%)
-
conic-gradient(in oklch longer hue, oklch(0.91 0.19 69.4) 0deg 360deg)
Typography
Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.
Cern
Aa
400
Aa
800
Cern
Self-hosted · weights 400, 500, 600, 700, 800 · headings, body, buttons · shown in a stand-in if you don’t have it
Aa
400
Aa
700
Inconsolata
Self-hosted · weights 400, 600, 700 · headings · shown in a stand-in if you don’t have it
Aa
300
Aa
900
Plaid Sans
Self-hosted · weights 300, 400, 500, 600, 700, 800, 900 · headings · shown in a stand-in if you don’t have it
Aa
300
Aa
600
Bowery Street
Self-hosted · weights 300, 400, 500, 600 · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS · root 10 px
Heading 1
3.2rem · 32 px / 1.2
weight 800 · Cern
Plaid
Heading 2
2.4rem · 24 px / 1.3333333333
weight 800 · Cern
Plaid: Enabling all companies to build fintech …
Heading 3
3.2rem · 32 px / 1.1875
weight 800 · Cern
Plaid: Enabling all companies to build fintech …
Heading 4
2rem · 20 px / 1.6
weight 800 · Cern
Plaid: Enabling all companies to build fintech …
Heading 5
1.6rem · 16 px / 2.1875
weight 800 · Cern
Plaid: Enabling all companies to build fintech …
Heading 6
1.4rem · 14 px / 1.4285714286
weight 600 · uppercase · Inconsolata
Plaid: Enabling all companies to build fintech …
Body
1.6rem · 16 px / 1.5
weight 400 · Cern
Plaid helps all companies build fintech solutions by making it easy, safe and reliable for people to connect their financial data to apps a…
Paragraph
18px / 24px
weight 600 · Cern
Plaid helps all companies build fintech solutions by making it easy, safe and reliable for people to connect their financial data to apps a…
Small
80% / 1.5
Plaid helps all companies build fintech solutions by making it easy, safe and reliable for people to connect their financial data to apps a…
Button
100% / 1
none · Cern
Get started
Link
16px / 2.4rem
Cern
Read more about Plaid
Sizes in use
Most common across the site- 36pxline 48px · 6 rules
- 24pxline 32px · 17 rules
- 20pxline 150% · 16 rules
- 18pxline 24px · 18 rules
- 16pxline 24px · 51 rules
- 14pxline 1.5 · 69 rules
- 13pxline 16px · 6 rules
- 12pxline 1 · 15 rules
Elements
The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.
Elements
Button
Get started
.CtaFormWrapper_card__IQI0k · #FFFFFF · radius 16px
Link
Read our latest news today.
a · #111111
Corner radius
- 2px · 33×
- inherit · 18×
- 8px · 16×
- 50% · 15×
- 16px · 11×
- 24px · 10×
Shadows
- 0 8px 16px 0 rgba(0,0,0,.08)
- 0px 1px 5px 0px rgba(0, 0, 0, 0.15)
- 0px 1px 5px 0px rgba(0, 0, 0, 0)
- 0 8px 16px 0 rgba(0,0,0,.16)
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
639
640
750
1023
1024
1078
1280
1440
On a scale of 0 to 1440 px.
Content widths (max-width)
1730 px
1673 px
460 px
409 px
384 px
352 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ● FineThe title is 56 characters, short enough to show in full in search results.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does Plaid use?
- Plaid’s website uses four typefaces: Cern (headings and body text), self-hosted; Inconsolata, self-hosted; Plaid Sans, self-hosted; Bowery Street, self-hosted.
- What are Plaid’s brand colours?
- The main colours on plaid.com are Dodger Blue (#0A85EA), Sky Blue (#63DAFF), Indian Red (#F44E66), Light Cyan (#CCF8FF), Midnight Blue (#00172E) and Lavender (#E1E1FF).
- What colour is Plaid’s text and background?
- Body text is #111111 on a #FFFFFF background.
- Where is Plaid’s logo from?
- The logo shown in this guide was found on plaid.com’s homepage. For official logo files and usage rules, check Plaid’s own brand or press page.
- Is this Plaid’s official style guide?
- No. SiteStyleGuide made it from plaid.com’s public web pages on 25 October 2026, and isn’t affiliated with Plaid. Members can refresh a guide after 90 days to pick up changes.
Design tokens
Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.
Tokens
plaid-com-tokens.css
/* plaid.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/plaid.com) */
:root {
/* Colours */
--text: #111111;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-deep-black: #111111;
--colour-off-white: #DCDCDC;
--colour-light-black: #232424;
--colour-dodger-blue: #0A85EA;
--colour-sky-blue: #63DAFF;
--colour-indian-red: #F44E66;
--colour-light-cyan: #CCF8FF;
--colour-midnight-blue: #00172E;
--colour-lavender: #E1E1FF;
--colour-powder-blue: #B1EEFC;
--colour-light-aqua-marine: #ABFFDB;
--colour-deep-aqua-marine: #42F0CD;
--colour-light-pink: #FFAAB9;
--colour-khaki: #FBF1A0;
--colour-misty-rose: #FFD7DC;
--gradient-1: linear-gradient(to bottom left, #e6e6ff 0%, #e5effe 50%, #ccf8ff 100%) padding-box,linear-gradient(to right, #8358EF 0%, #156EF5 100%);
--gradient-2: linear-gradient(315deg, #07578C 25.85%, #0E94D8 63.18%, #42F0CD 98.91%);
--gradient-3: conic-gradient(in oklch longer hue, oklch(0.91 0.19 69.4) 0deg 360deg);
/* Typefaces */
--font-headings: 'Cern', 'Helvetica', 'Arial', sans-serif;
--font-body: 'Cern', 'Helvetica', 'Arial', sans-serif;
--font-buttons: 'Cern', 'Helvetica', 'Arial', sans-serif;
--font-other: 'Bowery Street';
/* Type scale */
--text-h1: 3.2rem;
--leading-h1: 1.2;
--text-h2: 2.4rem;
--leading-h2: 1.3333333333;
--text-h3: 3.2rem;
--leading-h3: 1.1875;
--text-h4: 2rem;
--leading-h4: 1.6;
--text-h5: 1.6rem;
--leading-h5: 2.1875;
--text-h6: 1.4rem;
--leading-h6: 1.4285714286;
--text-body: 1.6rem;
--leading-body: 1.5;
--text-p: 18px;
--leading-p: 24px;
--text-small: 80%;
--leading-small: 1.5;
--text-button: 100%;
--leading-button: 1;
--text-a: 16px;
--leading-a: 2.4rem;
/* Shape */
--radius-1: 2px;
--radius-2: inherit;
--radius-3: 8px;
--radius-4: 50%;
--radius-5: 16px;
--radius-6: 24px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 639px;
--breakpoint-2: 640px;
--breakpoint-3: 750px;
--breakpoint-4: 1023px;
--breakpoint-5: 1024px;
--breakpoint-6: 1078px;
--breakpoint-7: 1280px;
--breakpoint-8: 1440px;
--max-width-1: 1730px;
--max-width-2: 1673px;
--max-width-3: 460px;
--max-width-4: 409px;
--max-width-5: 384px;
--max-width-6: 352px;
}
{
"site": "plaid.com",
"source": "https://sitestyleguide.com/plaid.com",
"text": "#111111",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Deep Black",
"hex": "#111111",
"rgb": [
17,
17,
17
]
},
{
"name": "Off White",
"hex": "#DCDCDC",
"rgb": [
220,
220,
220
]
},
{
"name": "Light Black",
"hex": "#232424",
"rgb": [
35,
36,
36
]
},
{
"name": "Dodger Blue",
"hex": "#0A85EA",
"rgb": [
10,
133,
234
]
},
{
"name": "Sky Blue",
"hex": "#63DAFF",
"rgb": [
99,
218,
255
]
},
{
"name": "Indian Red",
"hex": "#F44E66",
"rgb": [
244,
78,
102
]
},
{
"name": "Light Cyan",
"hex": "#CCF8FF",
"rgb": [
204,
248,
255
]
},
{
"name": "Midnight Blue",
"hex": "#00172E",
"rgb": [
0,
23,
46
]
},
{
"name": "Lavender",
"hex": "#E1E1FF",
"rgb": [
225,
225,
255
]
},
{
"name": "Powder Blue",
"hex": "#B1EEFC",
"rgb": [
177,
238,
252
]
},
{
"name": "Light Aqua Marine",
"hex": "#ABFFDB",
"rgb": [
171,
255,
219
]
},
{
"name": "Deep Aqua Marine",
"hex": "#42F0CD",
"rgb": [
66,
240,
205
]
},
{
"name": "Light Pink",
"hex": "#FFAAB9",
"rgb": [
255,
170,
185
]
},
{
"name": "Khaki",
"hex": "#FBF1A0",
"rgb": [
251,
241,
160
]
},
{
"name": "Misty Rose",
"hex": "#FFD7DC",
"rgb": [
255,
215,
220
]
}
],
"fonts": [
{
"name": "Cern",
"stack": "Cern, Helvetica, Arial, sans-serif",
"weights": [
400,
500,
600,
700,
800
],
"source": "Self-hosted"
},
{
"name": "Inconsolata",
"stack": "Inconsolata, Consolas, Courier, monospace",
"weights": [
400,
600,
700
],
"source": "Self-hosted"
},
{
"name": "Plaid Sans",
"stack": "Plaid Sans, Cern, \"Avenir Next\", Avenir, \"Proxima Nova\", \"Jakarta Plus Sans\", Futura, \"Avant Garde\", Montserrat, \"Helvetica Neue\", Helvetica, \"Nimbus Sans\", system-ui, -apple-system, BlinkMacSystemFont, Arial, \"Segoe UI\", Roboto, Oxygen, sans-serif",
"weights": [
300,
400,
500,
600,
700,
800,
900
],
"source": "Self-hosted"
},
{
"name": "Bowery Street",
"stack": "Bowery Street",
"weights": [
300,
400,
500,
600
],
"source": "Self-hosted"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run plaid.com?
Add the badge to your siteLink to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.
<a href="https://sitestyleguide.com/plaid.com" title="Plaid style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>
Similar colours
Websites whose lead colour is closest to Plaid’s
Captured from plaid.com on 25 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Plaid; this guide describes the public website for reference.