Typography
scale ratio 1.276- Suisse Int'lcss: suissedisplay + body400 500 600 70081%
- Söhne Monocss: soehneMonomono40017%
- SF Pro (system-ui)css: ui-sans-serifother400 500 7002%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Suisse Int'l | 56px | 700 | 1.143 | -0.035em |
| headline | Suisse Int'l | 13px | 500 | 1.846 | 0em |
| body | Suisse Int'l | 13px | 400 | 1.538 | 0em |
| body-sm | Söhne Mono | 12px | 400 | 1.667 | 0em |
| mono | Söhne Mono | 10px | 400 | 1.4 | 0.1em |
Type scale
Aa10Aa11Aa12Aa13Aa15Aa16Aa17Aa18Aa32Aa56
- Body size
- 13px / 1.538
- Display size
- 56px
- Display tracking
- -0.035em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 17.32:1
- Muted on bg
- 2.81:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 6
- 8
- 10
- 12
- 16
- 20
- 24
- 32
- 40
Corner radii
468101216pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 128px
Components
exact computed valuescard
- rounded
- 2.2px
- padding
- 0px
- shadow
- rgba(19, 19, 22, 0.024) 0px 0px 0px 1px, rgba(19, 19, 22, 0.024) 0px 1px 1px -0.5px, rgba(19, 19, 22, 0.024) 0px 3px 3px
Layout & motion
- Container
- 1264px
- Grid columns
- 4
- Hero
- split
- Navigation
- top-sticky+transparent
- Page height
- 7,153px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms 450ms 500ms
- Transitions
- 203
- Keyframes
- 3
- Stack
- next.js, tailwind, radix-ui, posthog, vercel
Page sections (6)
section labels are heuristic
01nav
03features?Multi-tenancy
04features?Agents build faster and more securely with Clerk
05code sample?Integrations
06footer
How Clerk compares
- Body text
- 13px: smaller than 94% of indexed sites (median 16px).
- Largest heading
- 56px: smaller than 53% of indexed sites (median 60px).
- Type scale
- 1.28×: flatter than 53% of indexed sites (median 1.28×).
- Container
- 1264px: wider than 54% of indexed sites (median 1242px).
- Text contrast
- 17.3:1: lower than 55% of indexed sites (median 17.6:1).
- Page length
- 7,153px: shorter than 60% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Suisse Int'l
- One of 4 indexed sites that load Suisse Int'l (1%).
- Söhne Mono
- One of 2 indexed sites that load Söhne Mono (1%).
- 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 Clerk use?
Clerk uses Suisse Int'l (loaded as "suisse") for headings and body text. Söhne Mono (loaded as "soehneMono") is used for code.
What are Clerk's brand colors?
Clerk's website uses a light scheme: background #F7F7F8, surface #FFFFFF, text #131316, muted text #9394A1 and borders #FFFFFF.
How is Clerk's website laid out?
The most common corner radius is fully rounded (pill), body text is 13px with 1.538 line height, and the page container is 1264px wide.
