Typography
scale ratio 1.294- Pplx Sanscss: pplxSansbody400 500100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Pplx Sans | 26px | 400 | 1.5 | -0.005em |
| body | Pplx Sans | 12px | 400 | 1.375 | 0em |
Type scale
Aa11Aa12Aa14Aa16Aa26
- Body size
- 12px / 1.333
- Display size
- 26px
- Display tracking
- -0.005em
- Case
- mixed
Color
light schemePalette by painted area
- Text on bg
- 14.86:1
- Muted on bg
- 6.74:1
- Accent on bg
- 14.81:1
- Dark mode
- follows system
Declared accent tokens
- --accent-bg-strong#016A71painted
- --action-solid-accent-bg-idle#016A71painted
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 6
- 8
- 10
- 12
- 13.5
- 16
- 32
Corner radii
81220pill
Shadows (2)
- Borders
- hairline, 1px
- Section padding
- n/a
Components
exact computed valuesbutton-primary
Continue with Google
- backgroundColor
- #252525
- textColor
- #FBFBFB
- rounded
- 8px
- padding
- 0px 16px
- height
- 40px
- fontFamily
- Pplx Sans
- fontSize
- 16px
- fontWeight
- 500
button-secondary
View plans
- textColor
- #0B2833
- rounded
- 9999px
- padding
- 0px 8px
- height
- 24px
- fontFamily
- Pplx Sans
- fontSize
- 12px
- fontWeight
- 500
- border
- 1px solid #0B283326
input
- rounded
- 8px
- height
- 38px
- padding
- 8px 16px
- backgroundColor
- #FFFFFF
- border
- 1px solid #0B283326
Layout & motion
- Container
- n/a
- Grid columns
- 2
- Hero
- unknown
- Navigation
- side
- Page height
- 900px
- Easing
- ease
- Durations
- 150ms 164ms 250ms 300ms
- Transitions
- 46
- Keyframes
- 1
- Stack
- react, tailwind, radix-ui, cloudflare
Page sections (1)
01heroWhat do you want to know?
How Perplexity compares
- Body text
- 12px: smaller than 96% of indexed sites (median 16px).
- Largest heading
- 26px: smaller than 90% of indexed sites (median 60px).
- Type scale
- 1.29×: steeper than 53% of indexed sites (median 1.28×).
- Text contrast
- 14.9:1: lower than 76% of indexed sites (median 17.6:1).
- Page length
- 900px: shorter than 93% of indexed sites (median 8,217px).
- Corner radius
- Mostly 8px, shared by 21 of 274 indexed sites (8%).
- Pplx Sans
- The only site in the index that loads Pplx Sans.
- Color scheme
- Light by default, like 75% of indexed sites. It is one of 49 sites (18%) that switch with the system dark mode setting.
In short
What font does Perplexity use?
Perplexity uses Pplx Sans (loaded as "pplxSans") for body text.
What are Perplexity's brand colors?
Perplexity's website uses a light scheme: background #FBFBFB, surface #1C1C1C12, text #0B2833, muted text #0B2833BF and borders #0B283326.
How is Perplexity's website laid out?
The most common corner radius is 8px, body text is 12px with 1.333 line height, and the page container is nullpx wide.
