Typography
scale ratio 1.295- Cal Sanscss: calSansdisplay + body400 500 70094%
- SF Pro (system-ui)css: -apple-systemother400 500 6005%
- Menlocss: ui-monospacemono400 5000%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Cal Sans | 80px | 700 | 1.08 | -0.01em |
| title | Cal Sans | 19px | 500 | 1.28 | 0em |
| body | Cal Sans | 17px | 400 | 1.45 | 0em |
| body-sm | Cal Sans | 15px | 400 | 1.45 | 0em |
| label | Cal Sans | 14px | 400 | 1.45 | 0em |
| mono | Menlo | 12px | 400 | 1.8 | 0em |
Type scale
Aa12Aa12.5Aa13Aa14Aa15Aa17Aa18Aa19Aa20Aa24Aa56Aa80
- Body size
- 17px / 1.45
- Display size
- 80px
- Display tracking
- -0.01em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 15.52:1
- Muted on bg
- 3.50:1
- Accent on bg
- 15.52:1
- Dark mode
- follows system
Declared accent tokens
- --color-hp-accent#CC4510painted
- --color-hp-accent-ink#A83A0Cnot on page
Space, shape & depth
Spacing scale
- 2
- 4
- 6
- 8
- 10
- 11
- 12
- 14
- 16
- 20
- 24
- 40
- 60
- 128
Corner radii
689101214182022pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 128px
Components
exact computed valuesbutton-primary
Get started
- backgroundColor
- #242424
- textColor
- #FFFFFF
- rounded
- 12px
- padding
- 1px 14px
- height
- 36px
- fontFamily
- Cal Sans
- fontSize
- 14px
- fontWeight
- 500
- border
- 1px solid #242424
- shadow
- oklab(0.999994 0.0000455678 0.0000200868 / 0.16) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0,
button-secondary
Sign up with Microsoft
- textColor
- #242424
- rounded
- 14px
- padding
- 0px 15px
- height
- 64px
- fontFamily
- Cal Sans
- fontSize
- 20px
- fontWeight
- 500
- border
- 1px solid #E5E7EB
- 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
card
- rounded
- 20px
- padding
- 24px
- 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
input
- rounded
- 0px
- height
- 38px
- padding
- 4px 0px
Layout & motion
- Container
- 1320px
- Grid columns
- 2
- Hero
- centered+media-below
- Navigation
- top-sticky+blur
- Page height
- 16,622px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 100ms 150ms 200ms 600ms
- Transitions
- 348
- Keyframes
- 3
- Stack
- next.js, tailwind, shadcn/ui, storyblok, posthog, vercel, cloudflare
Page sections (18)
section labels are heuristic
01nav
02heroWhere people find the time to meet
03stats?
04features?Now it's one link. Finding a time took a week of emails.
05feature detail?wherever you ask. One assistant,
06features?Bookings since September
07features?every way people meet. One calendar for
08features?in sync with your meetings. All your key tools
09feature detail?a calendar. Give your agents
10feature detail?that meet at scale. Trusted by teams
11testimonialsKiaora runs mission-critical healthcare scheduling across states. Kiaora
12feature detail?love Cal.com. See why our users
13testimonials
14feature detail?Events takes the whole room. Hosting more than a meeting?
15stats?actually adopts. Scheduling the whole company
16faqquestions. Frequently asked
17logosScheduling for absolutely everyone.
18footer
How Cal.com compares
- Body text
- 17px: larger than 65% of indexed sites (median 16px).
- Largest heading
- 80px: larger than 80% of indexed sites (median 60px).
- Type scale
- 1.29×: steeper than 55% of indexed sites (median 1.28×).
- Container
- 1320px: wider than 77% of indexed sites (median 1242px).
- Text contrast
- 15.5:1: lower than 70% of indexed sites (median 17.6:1).
- Page length
- 16,622px: longer than 94% of indexed sites (median 8,217px).
- Corner radius
- Mostly 8px, shared by 21 of 274 indexed sites (8%).
- Cal Sans
- The only site in the index that loads Cal Sans.
- 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 Cal.com use?
Cal.com uses Cal Sans (loaded as "calSans") for headings and body text.
What are Cal.com's brand colors?
Cal.com's website uses a light scheme: background #FFFFFF, surface #F3F4F6, text #242424, muted text #858993 and borders #E5E7EB.
How is Cal.com's website laid out?
The most common corner radius is 8px, body text is 17px with 1.45 line height, and the page container is 1320px wide.
