Typography
scale ratio 1.217- SF Pro (system-ui)css: system-uidisplay + body400 500 600 700 800100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | SF Pro (system-ui) | 48px | 800 | 1 | -0.025em |
| title | SF Pro (system-ui) | 24px | 600 | 1.5 | 0em |
| body | SF Pro (system-ui) | 18px | 400 | 1.556 | 0em |
| body-sm | SF Pro (system-ui) | 14px | 400 | 1.5 | 0em |
| label | SF Pro (system-ui) | 16px | 400 | 1.5 | 0em |
Type scale
Aa12Aa14Aa16Aa18Aa20Aa24Aa30Aa36Aa48
- Body size
- 18px / 1.556
- Display size
- 48px
- Display tracking
- -0.025em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 16.68:1
- Muted on bg
- 7.56:1
- Accent on bg
- 5.56:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 4
- 8
- 10
- 12
- 16
- 20
- 24
- 32
- 40
- 48
- 64
- 80
- 160
Corner radii
6812pill
Shadows (3)
- Borders
- hairline, 1px
- Section padding
- 112px
Components
exact computed valuesbutton-primary
Start free trial
- backgroundColor
- #5850EC
- textColor
- #FFFFFF
- rounded
- 6px
- padding
- 8px 20px
- height
- 42px
- fontFamily
- SF Pro (system-ui)
- fontSize
- 16px
- fontWeight
- 500
card
- rounded
- 8px
- padding
- 16px
- border
- 1px solid #F4F5F7
Layout & motion
- Container
- 1120px
- Grid columns
- 3
- Hero
- centered+media-below
- Navigation
- top-static+transparent
- Page height
- 6,409px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms
- Transitions
- 15
- Keyframes
- 0
- Stack
- tailwind
Page sections (6)
01nav
02heroEasy to use and privacy-friendly
03feature detailWhy use Plausible Analytics?
04feature detailPeople ❤️ Plausible
05pricingTraffic based plans that match your growth
06footer
How Plausible compares
- Body text
- 18px: larger than 71% of indexed sites (median 16px).
- Largest heading
- 48px: smaller than 68% of indexed sites (median 60px).
- Type scale
- 1.22×: flatter than 74% of indexed sites (median 1.28×).
- Container
- 1120px: narrower than 73% of indexed sites (median 1242px).
- Text contrast
- 16.7:1: lower than 62% of indexed sites (median 17.6:1).
- Page length
- 6,409px: shorter than 66% of indexed sites (median 8,217px).
- Corner radius
- Mostly 6px, shared by 14 of 274 indexed sites (5%).
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Plausible use?
Plausible uses SF Pro (system-ui) (loaded as "system-ui") for headings and body text.
What are Plausible's brand colors?
Plausible's website uses a light scheme: background #FFFFFF, surface #F4F5F7, text #161E2E, muted text #4B5563 and borders #F4F5F7.
How is Plausible's website laid out?
The most common corner radius is 6px, body text is 18px with 1.556 line height, and the page container is 1120px wide.
