Typography
scale ratio 1.138- Azeret Semi Monocss: azeretSemiMonomono400 50061%
- Mattercss: matterdisplay + body400 500 70038%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Azeret Semi Mono | 54px | 400 | 1.18 | 0em |
| headline | Azeret Semi Mono | 34px | 400 | 1.18 | 0em |
| title | Azeret Semi Mono | 18px | 400 | 1.35 | 0em |
| body | Matter | 13px | 400 | 1.5 | 0em |
| body-sm | Azeret Semi Mono | 11px | 400 | 1.5 | 0em |
| label | Azeret Semi Mono | 14px | 400 | 1 | 0em |
Type scale
Aa9Aa11Aa12Aa13Aa14Aa15Aa15.5Aa16Aa16.5Aa18Aa20Aa21.5Aa28Aa34Aa54
- Body size
- 13px / 1.5
- Display size
- 54px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 17.10:1
- Muted on bg
- 6.48:1
- Dark mode
- none
Declared accent tokens
- --graph-accent#005FC6not on page
- --color-theme-accent#00C2FFnot on page
- --color-accent-purple#CBB0F7painted
- --color-primary-red#EE343Bnot on page
Space, shape & depth
Spacing scale (base 4px)
- 2
- 3
- 4
- 5
- 5.5
- 6
- 7
- 8
- 10
- 12
- 16
- 20
- 24
- 28
Corner radii
46812pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- n/a
Components
exact computed valuesbutton-primary
Get started
- backgroundColor
- #1A1522
- textColor
- #FFFFFF
- rounded
- 4px
- padding
- 6px 16px
- height
- 32.2px
- fontFamily
- Azeret Semi Mono
- fontSize
- 13px
- fontWeight
- 500
- border
- 1px solid #1A1522
button-secondary
factory.yaml
- backgroundColor
- #2A1EFF
- textColor
- #FFFFFF
- rounded
- 0px
- padding
- 7px 12px
- height
- 33.5px
- fontFamily
- Azeret Semi Mono
- fontSize
- 13px
- fontWeight
- 400
Layout & motion
- Container
- 1180px
- Grid columns
- 2
- Hero
- left-aligned
- Navigation
- top-sticky
- Page height
- 9,095px
- Easing
- ease
- Durations
- 120ms 150ms 200ms 300ms
- Transitions
- 345
- Keyframes
- 5
- Stack
- next.js, sanity, hubspot, google-tag-manager, vercel
Page sections (2)
01nav
How Warp compares
- Body text
- 13px: smaller than 94% of indexed sites (median 16px).
- Largest heading
- 54px: smaller than 60% of indexed sites (median 60px).
- Type scale
- 1.14×: flatter than 98% of indexed sites (median 1.28×).
- Container
- 1180px: narrower than 66% of indexed sites (median 1242px).
- Text contrast
- 17.1:1: lower than 56% of indexed sites (median 17.6:1).
- Page length
- 9,095px: longer than 60% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Azeret Semi Mono
- The only site in the index that loads Azeret Semi Mono.
- Matter
- One of 2 indexed sites that load Matter (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 Warp use?
Warp uses Azeret Semi Mono (loaded as "azeretSemiMono") for code. Matter (loaded as "matter") is used for headings and body text.
What are Warp's brand colors?
Warp's website uses a light scheme: background #FBF9FE, surface #DEDEDE, text #1A1522, muted text #1A1522B3 and borders #1A152212.
How is Warp's website laid out?
The most common corner radius is 0px, body text is 13px with 1.5 line height, and the page container is 1180px wide.
