Typography
scale ratio 1.285- STK Bureau Sansdisplay + body400 50099%
- Apercu Mono Promono4001%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | STK Bureau Sans | 56px | 500 | 0.99 | -0.025em |
| title | STK Bureau Sans | 18px | 500 | 1.2 | -0.025em |
| body | STK Bureau Sans | 16px | 400 | 1.5 | 0em |
| body-sm | STK Bureau Sans | 14px | 400 | 1.15 | -0.01em |
| mono | Apercu Mono Pro | 12px | 400 | 1.333 | -0.04em |
Type scale
Aa12Aa13Aa14Aa16Aa18Aa19Aa32Aa48Aa56
- Body size
- 16px / 1.2
- Display size
- 56px
- Display tracking
- -0.025em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 15.13:1
- Muted on bg
- 5.65:1
- Accent on bg
- 3.06:1
- Dark mode
- follows system
Declared accent tokens
- --color-node-accent#FF5315painted
- --color-kumo-brand#FF5E1Fpainted
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 6
- 8
- 10
- 12
- 14
- 16
- 24
- 32
- 40
- 48
Corner radii
3468pill
Shadows (4)
- Borders
- hairline, 1px
- Section padding
- n/a
Components
exact computed valuesbutton-primary
Start building for free
- backgroundColor
- #FFFFFF
- textColor
- #1F1F1F
- rounded
- 9999px
- padding
- 12px 24px
- height
- 50px
- fontFamily
- STK Bureau Sans
- fontSize
- 16px
- fontWeight
- 500
- border
- 1px solid #FFFFFF
button-secondary
Contact sales
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 6px 12px
- height
- 38px
- fontFamily
- STK Bureau Sans
- fontSize
- 16px
- fontWeight
- 500
- border
- 1px solid #FFFFFF66
card
- rounded
- 8px
- padding
- 0px
- backgroundColor
- #FDFDFC
Layout & motion
- Container
- 1200px
- Grid columns
- 3
- Hero
- centered-over-media+media-below
- Navigation
- top-fixed+transparent
- Page height
- 7,012px
- Easing
- cubic-bezier(0.19, 1, 0.22, 1)
- Durations
- 200ms 300ms 400ms 2000ms
- Transitions
- 127
- Keyframes
- 8
- Stack
- astro, tailwind, shadcn/ui, google-tag-manager, cloudflare
How Cloudflare compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 56px: smaller than 53% of indexed sites (median 60px).
- Type scale
- 1.28×: steeper than 50% of indexed sites (median 1.28×).
- Container
- 1200px: narrower than 57% of indexed sites (median 1242px).
- Text contrast
- 15.1:1: lower than 75% of indexed sites (median 17.6:1).
- Page length
- 7,012px: shorter than 61% of indexed sites (median 8,217px).
- Corner radius
- Mostly 3px, shared by 5 of 274 indexed sites (2%).
- STK Bureau Sans
- The only site in the index that loads STK Bureau Sans.
- Apercu Mono Pro
- The only site in the index that loads Apercu Mono Pro.
- 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 Cloudflare use?
Cloudflare uses STK Bureau Sans for headings and body text. Apercu Mono Pro is used for code.
What are Cloudflare's brand colors?
Cloudflare's website uses a light scheme: background #FFFFFF, text #262626, muted text #262626B3 and borders #F0F0F0.
How is Cloudflare's website laid out?
The most common corner radius is 3px, body text is 16px with 1.2 line height, and the page container is 1200px wide.
