Cal.com Design System
Light · Generated 14/04/2026 · 62 colors · 41 type tokens · 18 spacing steps · 8 breakpoints
v1.0.0
Color Palette
Background Colors
Black
#000000
Dark Gray 8
#101010
Dark Gray
#242424
White
#FFFFFF
Light Gray
#E0E0E0
Mid Gray
#898989
White 2
#F4F4F4
Dark Blue 2
#374151
Light Purple
#E9DDFD
Dark Blue 5
#262543
Text Colors
Dark Gray 2
#292929
Dark Gray 3
#111111
Blue 2
#6B7280
Blue 3
#9CA3AF
Purple
#7826B1
Purple 2
#AA61F1
Shadow Colors
Dark Blue
rgba(34,42,53,.05)
Dark Gray 5
rgba(19,19,22,.7)
Dark Gray 6
rgba(34,42,53,.08)
Dark Gray 7
rgba(36,36,36,.05)
Dark Blue 3
rgba(34,42,53,.1)
Fill & Gradient Colors
Blue 5
#4285F4
Red 3
#EA4335
Orange
#FBBC04
Green
#34A853
Blue 7
#6349EA
Lt. Purple 2
#C292FF
Red 4
#FF492C
Dark Green
#00AC47
Orange 2
#FFC107
Blue 8
#1967D2
Typography
--font-family-6 · Cal Sans
Cal Sans
Open Scheduling Infrastructure — book time with the people you love to work with, completely free.
Light · 300 Regular · 400 Medium · 500 SemiBold · 600
--font-family-7 · Roboto Mono
Roboto Mono
cal.com/username/30min · booking_id: bk_01HXYZ
Regular · 400 Medium · 500
Open Scheduling
--font-size-5xl · 56px · Cal Sans SemiBold · line-height: 61.6px · letter-spacing: −0.2px
Infrastructure for scheduling
--font-size-4xl · 40px · Cal Sans SemiBold · line-height: 44px
Your scheduling link, your way
--font-size-3xl · 20px · Cal Sans SemiBold · line-height: 30px
Book time with the people you love to work with. Completely free for individuals with no limits on events or bookings.
--font-size-2xl · 18px · Regular · line-height: 24px
Manage availability, set meeting types, and share your link — scheduling made simple for everyone.
--font-size-xl · 16px · Regular · line-height: 21px
30 min · Google Meet · Confirmed for Apr 15, 2026 at 10:00 AM
--font-size-lg · 14px · Regular · line-height: 19.6px
CALENDAR · EVENTS · WORKFLOWS · TEAMS
--font-size-base · 12px · Medium · uppercase label
Line Heights
Tight
11.1px
Snug
12px
Normal
13.88px
Relaxed
15.4px
Loose
16px
LH-8
19.6px
LH-9
21px
LH-11
24px
LH-12
26px
LH-13
30px
LH-14
44px
LH-15
61.6px
Letter Spacing
Cal.com
Tight
−0.2px · display headings, hero
EVENTS · TEAMS · WORKFLOWS
Normal
+0.2px · uppercase labels
Spacing
Spacing Scale
18 tokens — 2px → 96px
2
2.8
3
4
5
6
8
10
12
16
20
24
28
32
40
48
80
96
Borders
Border Radii
SM
2px
MD
4px
LG
6px
Full
8px
R8
12px
R11
16px
R12
29px
R14
100px
R18
9999px
Cal.com uses 18 distinct radius values — from 2px sharp corners up to 9999px full pill, including chat-bubble asymmetric shapes (12px 12px 0px 0px, 12px 12px 12px 0px) and percentage circles (100%).
Border Width
Hairline
1px · ×8
Single 1px border width throughout the system. Applied to cards, inputs, dividers, and interactive elements via --border-width-hairline: 1px.
Shadows / Elevation
Shadow Tokens
6 tokens — from inset pressed to composite layered elevation
Inset
×176
rgba(0,0,0,.16) inset — button depth, pressed states
Raised
×24
3-layer composite — cards, dropdowns, modals
Elevated
×19
2-layer with stronger blur — dialog panels
Floating
×8
3-layer with border outline — popovers, floating panels
Highlight
×7
White inset 2px — top-edge shimmer on dark buttons
Soft Drop
×6
Single-layer ambient — subtle card lift
Z-Index
LayerValueUsage
Base1Base stacking context
Raised2Slightly elevated content, overlapping cards
Sticky3Sticky header bars
Navigation4Navigation overlays
Panel5Side panels, drawers
Overlay9Dropdowns, popovers, tooltips
Modal9999Full-screen modals, dialogs
Absolute Top2147483647Maximum z-index — critical top-layer elements (INT_MAX)
Breakpoints
--breakpoint-xs
640px
Mobile to tablet
--breakpoint-sm
768px
Tablet portrait
--breakpoint-md
809px
Tablet landscape
--breakpoint-xl
810px
Tablet wide
--breakpoint-2xl
1024px
Desktop start
--breakpoint-3xl
1199px
Wide desktop
--breakpoint-lg
809.98px
Upper tablet bound
--breakpoint-bp-8
1199.98px
Upper desktop bound
Opacity
Opacity Tokens
3 tokens — 0.3 · 0.38 · 0.9
Dim
30% · ×23
Muted
38% · ×1
Strong
90% · ×1
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Text TokenBackground TokenRatioWCAG Rating
--color-blue--color-black2.23:1Fail
--color-blue--color-light-gray7.12:1AAA
--color-blue--color-mid-gray2.69:1Fail
--color-blue--color-dark-gray1.65:1Fail
--color-blue--color-white9.4:1AAA
--color-dark-gray-2--color-black1.44:1Fail
--color-dark-gray-2--color-light-gray11.02:1AAA
--color-dark-gray-2--color-mid-gray4.16:1AA Large
--color-dark-gray-2--color-dark-gray1.07:1Fail
--color-dark-gray-2--color-white14.55:1AAA
--color-dark-gray-3--color-black1.11:1Fail
--color-dark-gray-3--color-light-gray14.3:1AAA
--color-dark-gray-3--color-mid-gray5.4:1AA
--color-dark-gray-3--color-dark-gray1.22:1Fail
--color-dark-gray-3--color-white18.88:1AAA
--color-blue-2--color-black4.34:1AA Large
--color-blue-2--color-light-gray3.66:1AA Large
--color-blue-2--color-mid-gray1.38:1Fail
--color-blue-2--color-dark-gray3.21:1AA Large
--color-blue-2--color-white4.83:1AA
--color-blue-3--color-black8.27:1AAA
--color-blue-3--color-light-gray1.92:1Fail
--color-blue-3--color-mid-gray1.38:1Fail
--color-blue-3--color-dark-gray6.11:1AA
--color-blue-3--color-white2.54:1Fail
CSS Variables Reference
Background Colors 19 tokens
Black--color-black#000000
Dark Gray 8--color-dark-gray-8#101010
Dark Gray--color-dark-gray#242424
Light Gray--color-light-gray#E0E0E0
Mid Gray--color-mid-gray#898989
White--color-white#FFFFFF
White 2--color-white-2#F4F4F4
Light Gray 2--color-light-gray-2#D3D3D3
Light Gray 3--color-light-gray-3#E1E2E3
Dark Blue 2--color-dark-blue-2#374151
Light Gray 4--color-light-gray-4#E5E7EB
Light Purple--color-light-purple#E9DDFD
Light Red--color-light-red#F8D7D8
Light Blue--color-light-blue#D6ECFE
Dark Blue 5--color-dark-blue-5#262543
Text, Border & Fill Colors 18 tokens
Dark Gray 2--color-dark-gray-2#292929
Dark Gray 3--color-dark-gray-3#111111
Blue 2--color-blue-2#6B7280
Blue 3--color-blue-3#9CA3AF
Purple--color-purple#7826B1
Purple 2--color-purple-2#AA61F1
Blue 4--color-blue-4#0099FF
Red--color-red#882C2F
Red 2--color-red-2#D85B5F
Mid Gray 2 (border)--color-mid-gray-2#767676
Blue 5 (Google)--color-blue-5#4285F4
Green (Google)--color-green#34A853
Red 3 (Google)--color-red-3#EA4335
Orange (Google)--color-orange#FBBC04
Blue 7--color-blue-7#6349EA
Light Purple 2--color-light-purple-2#C292FF
Dark Green--color-dark-green#00AC47
Dark Gray 9--color-dark-gray-9#343434
Typography 41 tokens
Cal Sans (display)--font-family-6Cal Sans
Cal Sans UI Light--font-family-3Cal Sans UI Variable Light
Inter (body)--font-family-4Inter
Roboto Mono--font-family-7Roboto Mono
Matter Regular--font-family-5Matter Regular
Times (base)--font-family-baseTimes
Light--font-weight-light300
Regular--font-weight-regular400
Medium--font-weight-medium500
SemiBold--font-weight-semibold600
2XS--font-size-2xs8px
XS--font-size-xs9.71px
SM--font-size-sm10px
Base--font-size-base12px
LG--font-size-lg14px
XL--font-size-xl16px
2XL--font-size-2xl18px
3XL--font-size-3xl20px
4XL Display--font-size-4xl40px
5XL Hero--font-size-5xl56px
Tight (−0.2px)--letter-spacing-tight−0.2px
Normal (+0.2px)--letter-spacing-normal+0.2px
Spacing 18 tokens
Space 1--space-12px
Space 2--space-22.78px
Space 3--space-33px
Space 4--space-44px
Space 5--space-55px
Space 6--space-66px
Space SM--space-88px
Space MD--space-1010px
Space LG--space-1212px
Space XL--space-1616px
Space 20--space-2020px
Space 24--space-2424px
Space 32--space-3228px
Space 40--space-4032px
Space 48--space-4840px
Space 64--space-6448px
Space 80--space-8080px
Space 96--space-9696px
Borders & Radius 19 tokens
Hairline--border-width-hairline1px
SM--radius-sm2px
MD--radius-md4px
LG--radius-lg6px
Full--radius-full8px
R8--radius-r812px
R11--radius-r1116px
R12--radius-r1229px
R14--radius-r14100px
R18--radius-r189999px
+ asymmetric: r9 (12 12 0 0), r10 (12 12 12 0), r15 (100%), r16 (120px), r17 (1000px)
Shadows, Motion, Opacity & Layers 17 tokens
Inset--shadow-sminset 1px 1.9px rgba(.16)
Raised--shadow-md3-layer composite
Elevated--shadow-lg2-layer composite
Floating--shadow-xl3-layer + outline
Highlight--shadow-shadow-5inset white 2px
Soft Drop--shadow-shadow-64px 8px ambient
No motion tokens — duration and easing expressed inline.
Dim--opacity-3030%
Muted--opacity-3838%
Strong--opacity-9090%
Base--z-11
Raised--z-22
Overlay--z-69
Modal--z-79999
Absolute Top--z-82147483647
Design System Preview · Cal.com (Dark) · Generated 14/04/2026 · 62 color tokens · 10 font-size · 10 font-family · 4 font-weight · 15 line-height · 2 letter-spacing · 18 spacing · 18 radius · 1 border-width · 6 shadow · 0 motion · 8 z-index · 8 breakpoints · 3 opacity