Typography
scale ratio 1.179- Plaid Sansdisplay400 500 60068%
- Cernbody400 500 600 70022%
- Inconsolataother4007%
- Bowery Streetother3003%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Plaid Sans | 76px | 500 | 1.12 | -0.045em |
| headline | Plaid Sans | 70px | 500 | 1.08 | -0.029em |
| title | Plaid Sans | 26px | 500 | 1.4 | -0.019em |
| body | Cern | 24px | 400 | 1.5 | 0em |
| body-sm | Cern | 20px | 600 | 1.5 | -0.037em |
| label | Cern | 16px | 400 | 1.5 | 0em |
Type scale
Aa13Aa14Aa16Aa18Aa20Aa24Aa26Aa27Aa30Aa50Aa58Aa70Aa76
- Body size
- 24px / 1.5
- Display size
- 76px
- Display tracking
- -0.045em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 18.07:1
- Muted on bg
- 3.86:1
- Accent on bg
- 1.22:1
- Dark mode
- none
Space, shape & depth
Spacing scale
- 3
- 4
- 6
- 8
- 10
- 12
- 13.5
- 16
- 17
- 24
- 27
- 29
- 30
- 32
Corner radii
8162427354050pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 130px
Components
exact computed valuesinput
- rounded
- 8px
- height
- 48px
- padding
- 8px 8px
- backgroundColor
- #FFFFFF
- border
- 1px solid #02294B
Layout & motion
- Container
- 1245px
- Grid columns
- 5
- Hero
- split
- Navigation
- top-fixed+transparent
- Page height
- 9,117px
- Easing
- ease-in-out
- Durations
- 100ms 250ms 300ms 500ms
- Transitions
- 153
- Keyframes
- 0
- Stack
- next.js, contentful, segment, cloudfront
Page sections (8)
01nav
02heroTurn data into revolutionary financial products
03featuresPowered by the largest financial network. Built for every financial need.
05code sampleWant access to 12K banks? We've got the API keys.
06logosSee what's possible with Plaid
07feature detailStart building better financial products
08footerFor financial institutions
How Plaid compares
- Body text
- 24px: larger than 98% of indexed sites (median 16px).
- Largest heading
- 76px: larger than 78% of indexed sites (median 60px).
- Type scale
- 1.18×: flatter than 91% of indexed sites (median 1.28×).
- Container
- 1245px: wider than 51% of indexed sites (median 1242px).
- Text contrast
- 18.1:1: higher than 56% of indexed sites (median 17.6:1).
- Page length
- 9,117px: longer than 61% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Plaid Sans
- The only site in the index that loads Plaid Sans.
- Cern
- The only site in the index that loads Cern.
- Color scheme
- Dark by default, like 25% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Plaid use?
Plaid uses Plaid Sans for headings. Cern is used for body text. Inconsolata is used for other.
What are Plaid's brand colors?
Plaid's website uses a dark scheme: background #00172E, surface #0C1116, text #FFFFFF, muted text #5C7695.
How is Plaid's website laid out?
The most common corner radius is fully rounded (pill), body text is 24px with 1.5 line height, and the page container is 1245px wide.
