Cal.com design system

Cal.com's website (cal.com) uses a light interface with #0000ee as its primary color and Inter as the main typeface, with Cal Sans UI Variable Light alongside it. designlang measured 11 font sizes from 8px to 64px, 5 spacing values, 11 corner radii.

Captured 25 June 2026Light UI3,541 elements read

Download tokens Read it yourself

Cal.com colors

The brand roles and neutrals cal.com renders, with how many elements use each one.

Brand colors

Primary#0000ee448 uses
Secondary#0099ff6 uses
Accent#d6ecfe1 uses

Neutrals

#0000005,450 uses
#242424384 uses
#898989356 uses
#e5e7eb313 uses
#ffffff195 uses
#111111190 uses
#f4f4f465 uses
#37415158 uses
#d3d3d348 uses
#80808010 uses

Backgrounds

#f4f4f4
#ffffff
#f8f9fa

Text colors

#00000019.09:1 on #f4f4f4
#ffffff1.1:1 on #f4f4f4
#0000ee8.54:1 on #f4f4f4
#29292913.23:1 on #f4f4f4
#11111117.17:1 on #f4f4f4
#24242414.11:1 on #f4f4f4
#8989893.18:1 on #f4f4f4
#10101017.3:1 on #f4f4f4

Contrast checks (WCAG 2.1)

Text and background pairs found together on the page; 100% of them pass.

Text	Background	Ratio	Result
`#ffffff`	`#000000`	21:1	AAA
`#374151`	`#f8f9fa`	9.78:1	AAA

Cal.com fonts and type scale

Every font family and size in use, read from computed styles rather than the CSS source.

Font families

Inter: sans, body (247 elements)
Cal Sans UI Variable Light: sans, most text (233 elements)
Cal Sans: sans, most text (43 elements)
Matter Regular: sans, body (43 elements)
Matter Medium: sans, body (24 elements)
Matter SemiBold: sans, headings (8 elements)
Roboto Mono: mono, body (3 elements)
CUSTOMV2;Cal Sans UI Regular: sans, body (2 elements)

Body text: 14px at weight 300, line height 19.6px.

Weights in use: 400, 300, 500, 600.

Type scale

Size	Weight	Line height	Tracking	Used on
64px	600	70.4px	normal	h1
48px	600	52.8px	normal	h2
24px	600	31.2px	normal	p
20px	600	20px	0.2px	p
18px	300	23.4px	-0.2px	h3, p
16px	400	normal	normal	html, head, meta, title
14px	300	19.6px	normal	p, a, h3, div
12px	400	normal	normal	body, script, noscript, button
10px	400	14px	normal	p
9.71px	500	11.1px	normal	p
8px	400	11.2px	normal	p

Spacing and radii

Spacing scale

1px
40px
48px
80px
96px

Corner radii

2px
6px
10px
16px
29px
40px
100px
120px
pill

Medium radii lead, with a few larger ones. 11 distinct box shadows.

Motion

The motion reads as mixed.

Durations

md: 300ms

Easing

custom (11 uses): cubic-bezier(0.4, 0, 0.2, 1)

Design system audit

designlang scores how consistently a site uses its own values. How the audit works.

Overall

78/100, grade C

Components found: buttons (4), cards (155), inputs (1), links (120), badges (1), avatars (30).

By category

Color Discipline	80/100
Typography Consistency	50/100
Spacing System	100/100
Shadow Consistency	78/100
Border Radius Consistency	65/100
Accessibility	100/100
CSS Tokenization	100/100

9 font families — consider limiting to 2 (heading + body)
13 !important rules — prefer specificity over overrides
75% of CSS is unused — consider purging
7947 duplicate CSS declarations

Download the tokens

The files designlang wrote for cal.com. Run it yourself for a fresh read: npx designlang cal.com.

The core values as CSS variables

:root {
  --color-primary: #0000ee;
  --color-secondary: #0099ff;
  --color-accent: #d6ecfe;
  --color-background: #f4f4f4;
  --color-text: #000000;
  --color-neutral-1: #000000;
  --color-neutral-2: #242424;
  --color-neutral-3: #898989;
  --color-neutral-4: #e5e7eb;
  --font-primary: "Inter", sans-serif;
  --font-secondary: "Cal Sans UI Variable Light", sans-serif;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 10px;
}

Read cal.com yourself

Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.

Get started CLI reference

Brands with a similar design

All design systems

Notion design system

Light UI, NotionInter, #455dd3

Clerk design system

Light UI, geistNumbers, #6c47ff

Webflow design system

Light UI, WF Visual Sans Variable, #146ef5

Postman design system

Light UI, inter, #e05320

Quick answers

What font does Cal.com use?

cal.com sets most of its text in Inter (247 elements), with Cal Sans UI Variable Light, Cal Sans and Matter Regular alongside it. designlang read this from the computed styles of the live page on 25 June 2026.

What are Cal.com's brand colors?

The brand roles on cal.com are primary #0000ee, secondary #0099ff and accent #d6ecfe, on a #f4f4f4 background. The neutrals used most are #000000, #242424 and #898989.

How do I use the Cal.com design system in my own app?

Download the DTCG tokens, Tailwind config or CSS variables on this page, or run npx designlang cal.com for a fresh read. To apply the look to an existing repo, Retheme maps the tokens onto your Tailwind or shadcn theme and opens a pull request.

Is this the official design system?

No. It is measured from cal.com's public pages on 25 June 2026, so it shows what the site renders, not Cal.com's internal source files. Cal.com is a trademark of its owner and is not affiliated with designlang.

Measured from the public pages of cal.com on 25 June 2026. Cal.com is a trademark of its owner; designlang is not affiliated with it. More: the full Cal.com brand kit, the token extraction guide and the markdown version of this page.