Typography
scale ratio 1.207- Calendly Sansdisplay50040%
- Geistbody400 500 60037%
- Wulkan Textother50018%
- SF Pro (system-ui)css: ui-sans-serifother5004%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Calendly Sans | 72px | 500 | 1.1 | -0.028em |
| headline | Calendly Sans | 60px | 500 | 1.1 | -0.033em |
| title | Geist | 18px | 500 | 1.4 | 0em |
| body | Geist | 16px | 400 | 1.4 | 0em |
| body-sm | Geist | 14px | 400 | 1.4 | 0em |
| label | Geist | 14px | 500 | 1.4 | 0em |
Type scale
Aa12Aa14Aa16Aa18Aa20Aa24Aa28Aa36Aa48Aa60Aa72
- Body size
- 16px / 1.4
- Display size
- 72px
- Display tracking
- -0.028em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 16.90:1
- Muted on bg
- 5.15:1
- Accent on bg
- 16.90:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 8px)
- 4
- 8
- 12
- 16
- 24
- 32
- 40
- 48
- 56
- 64
- 120
Corner radii
31220244864pill
Shadows (3)
- Borders
- hairline, 1px
- Section padding
- 120px
Components
exact computed valuesbutton-primary
Get started for free
- backgroundColor
- #071A31
- textColor
- #FCFBF8
- rounded
- 16px
- padding
- 12px 16px
- height
- 48px
- fontFamily
- Geist
- fontSize
- 14px
- fontWeight
- 400
button-secondary
Sign up with Google
- textColor
- #071A31
- rounded
- 20px
- padding
- 12px 20px
- height
- 50px
- fontFamily
- Geist
- fontSize
- 16px
- fontWeight
- 500
- border
- 1px solid #FCFBF8
card
- rounded
- 48px
- padding
- 0px
- backgroundColor
- #FFFFFF
- shadow
- rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0
Layout & motion
- Container
- 1280px
- Grid columns
- 2
- Hero
- centered-over-media
- Navigation
- none-detected
- Page height
- 11,306px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms 300ms 500ms
- Transitions
- 181
- Keyframes
- 0
- Stack
- astro, tailwind, google-tag-manager, cloudflare, cloudfront
Page sections (8)
section labels are heuristic
01hero
02feature detail?A better way to book your meetings
03features?Meet Callie, your AI assistant
04features?Actionable recaps for every meeting
05features?Flexible payment options that fit your business
06logosConnect Calendly with your favorite tools
07logosFrom the first meeting to the follow-up
08footerCompany
How Calendly compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 72px: larger than 70% of indexed sites (median 60px).
- Type scale
- 1.21×: flatter than 78% of indexed sites (median 1.28×).
- Container
- 1280px: wider than 55% of indexed sites (median 1242px).
- Text contrast
- 16.9:1: lower than 59% of indexed sites (median 17.6:1).
- Page length
- 11,306px: longer than 77% of indexed sites (median 8,217px).
- Corner radius
- Mostly 24px, shared by 7 of 274 indexed sites (3%).
- Calendly Sans
- The only site in the index that loads Calendly Sans.
- Geist
- One of 11 indexed sites that load Geist (4%).
- 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 Calendly use?
Calendly uses Calendly Sans for headings. Geist is used for body text. Wulkan Text is used for other.
What are Calendly's brand colors?
Calendly's website uses a light scheme: background #FCFBF8, surface #F5F3EE, text #071A31, muted text #5F6D77 and borders #FCFBF81A.
How is Calendly's website laid out?
The most common corner radius is 24px, body text is 16px with 1.4 line height, and the page container is 1280px wide.
