Typography
scale ratio 1.219- Interbody400 500 600 70049%
- Serrifdisplay200 30030%
- Degular Displaycss: DegularDisplayother50021%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Degular Display | 56px | 500 | 1 | 0em |
| headline | Inter | 14px | 500 | 1.714 | 0em |
| title | Inter | 16px | 400 | 1.5 | -0.02em |
| body | Inter | 14px | 400 | 1.5 | 0em |
| body-sm | Inter | 12px | 400 | 1.5 | 0.04em |
Type scale
Aa10Aa12Aa14Aa16Aa18Aa28Aa32Aa40Aa48Aa56
- Body size
- 14px / 1.5
- Display size
- 56px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 17.65:1
- Muted on bg
- 12.34:1
- Accent on bg
- 3.27:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 4
- 6
- 8
- 10
- 12
- 16
- 20
- 24
- 32
- 40
- 48
- 80
- 96
Corner radii
412pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 105px
Components
exact computed valuesbutton-primary
Start free with email
- backgroundColor
- #FF4F00
- textColor
- #FFFEFB
- rounded
- 4px
- padding
- 8px 16px
- height
- 40px
- fontFamily
- Inter
- fontSize
- 16px
- fontWeight
- 600
- border
- 1px solid #FF4F00
button-secondary
Explore Zapier for Enterprise
- backgroundColor
- #201515
- textColor
- #FFFEFB
- rounded
- 4px
- padding
- 12px 24px
- height
- 48px
- fontFamily
- Inter
- fontSize
- 18px
- fontWeight
- 600
- border
- 1px solid #201515
card
- rounded
- 12px
- padding
- 24px
- backgroundColor
- #F8F4F0
Layout & motion
- Container
- 1280px
- Grid columns
- 2
- Hero
- centered+media-below
- Navigation
- top-sticky
- Page height
- 9,542px
- Easing
- ease
- Durations
- 200ms 250ms 500ms 1000ms
- Transitions
- 108
- Keyframes
- 2
- Stack
- next.js, contentful, google-tag-manager, vercel, cloudfront
Page sections (12)
section labels are heuristic
01nav
02heroWelcome to automation in the agentic era
03logosTrusted by the world’s best companies
04feature detail?Build anywhere. Run on Zapier. Govern in one place.
05testimonials
06feature detail?The Fluid Determinism difference
07features?Fully agentic
08feature detail?Govern in one place
09testimonialsfrom the Fortune 500 to first-time founders
10features?Security built into every workflow
11cta?Go from AI to ROI
12footerFor agents
How Zapier compares
- Body text
- 14px: smaller than 82% of indexed sites (median 16px).
- Largest heading
- 56px: smaller than 53% of indexed sites (median 60px).
- Type scale
- 1.22×: flatter than 73% of indexed sites (median 1.28×).
- Container
- 1280px: wider than 55% of indexed sites (median 1242px).
- Text contrast
- 17.6:1: higher than 51% of indexed sites (median 17.6:1).
- Page length
- 9,542px: longer than 63% of indexed sites (median 8,217px).
- Corner radius
- Mostly 4px, shared by 24 of 274 indexed sites (9%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- Serrif
- One of 2 indexed sites that load Serrif (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 Zapier use?
Zapier uses Inter for body text. Serrif is used for headings. Degular Display (loaded as "DegularDisplay") is used for other.
What are Zapier's brand colors?
Zapier's website uses a light scheme: background #FFFEFB, surface #F8F4F0, text #201515, muted text #36342E and borders #201515.
How is Zapier's website laid out?
The most common corner radius is 4px, body text is 14px with 1.5 line height, and the page container is 1280px wide.
