Cal.com

Cal.com

Open-source scheduling

An open-source scheduling and booking tool, styled with a clean, neutral interface aimed at developers.

cal.com

Color palette

Accent

Primary#111111

Primary brand color — key actions and emphasis.

Primary Active#242424

Pressed or hover state of its base color.

Primary Disabled#e5e7eb

Accent color used within the product's own UI.

Brand Accent#3b82f6

Accent color used within the product's own UI.

Badge Orange#fb923c

Accent color used within the product's own UI.

Badge Violet#8b5cf6

Accent color used within the product's own UI.

Badge Emerald#34d399

Accent color used within the product's own UI.

Semantic

Success#10b981

Success state.

Warning#f59e0b

Warning state.

Error#ef4444

Error and destructive state.

Neutral

Ink#111111

Primary text color.

Body#374151

Secondary or muted text.

Muted#6b7280

Secondary or muted text.

Muted Soft#898989

Secondary or muted text.

Hairline#e5e7eb

Borders and dividers.

Hairline Soft#f3f4f6

Borders and dividers.

Canvas#ffffff

Page background.

Surface Soft#f8f9fa

Card and panel surfaces.

Surface Card#f5f5f5

Card and panel surfaces.

Surface Strong#e5e7eb

Card and panel surfaces.

Surface Dark#101010

Card and panel surfaces.

Surface Dark Elevated#1a1a1a

Card and panel surfaces.

On Primary#ffffff

Text and icon color on a solid primary fill.

On Dark#ffffff

Text and icon color on a solid primary fill.

On Dark Soft#a1a1aa

Text and icon color on a solid primary fill.

Badge Pink#ec4899

Primary text color.

Type scale

Display Xl
64px · 600 · 1.05
Display Lg
48px · 600 · 1.1
Display Md
36px · 600 · 1.15
Display Sm
28px · 600 · 1.2
Title Lg
22px · 600 · 1.3
Title Md
18px · 600 · 1.4
Title Sm
16px · 600 · 1.4
Body Md
16px · 400 · 1.5
Body Sm
14px · 400 · 1.5
Code
14px · 400 · 1.5
Button
14px · 600 · 1
Nav Link
14px · 500 · 1.4
Caption
13px · 500 · 1.4

Fonts

PrimaryInterWeights 400, 500, 600Fallback: sans-serif
SecondaryCal SansWeights 600Fallback: Inter, sans-serif
CodeJetBrains MonoWeights 400Fallback: ui-monospace, monospace

Spacing & shape

Xxs
4px
Xs
8px
Sm
12px
Md
16px
Lg
24px
Xl
32px
Xxl
48px
Section
96px
Xs
4px
Sm
6px
Md
8px
Lg
12px
Xl
16px
Pill
9999px

Guidelines

  • Reserve Primary for primary actions and emphasis — it is the system's one accent color.
  • Keep type on the documented family set (Inter, Cal Sans, JetBrains Mono).
  • Use one of the documented corner radii (4px, 6px, 8px, 12px, 16px, 9999px) rather than a one-off value.
  • Build spacing from the documented scale (4px, 8px, 12px, 16px, 24px, 32px, 48px, 96px) instead of arbitrary padding.
  • Don't apply Primary as a full-page background or a large fill.
  • Don't introduce a second accent color alongside Primary.
  • Don't mix in an additional typeface beyond the ones documented here.