Design System Inspiration of Cal.com

A clean, calendar-software-first interface anchored on white canvas with black primary CTAs and custom Cal Sans display typography. Friendly modern SaaS, generous whitespace, soft-rounded cards.

A
Alex · Product Demo
30 min · Google Meet
M
T
W
T
F
S
S
10
11
12
13
14
15
16
17
18
19
20
21
22
23
09:00
10:30
14:00
01 — Color Palette

Monochrome with badge pastels

Black primary CTA + white canvas + light gray cards. Pastel badges add chromatic flourish on avatars and tags — never on hero CTAs.

Brand

primary / ink
#111111
Primary CTA, h1/h2 type. Same hex serves both roles.
primary-active
#242424
Press state on primary buttons.
brand-accent
#3b82f6
Inline links and rare highlights.

Surface

canvas
#ffffff
Default page surface.
surface-soft
#f8f9fa
Nav-pill-group background.
surface-card
#f5f5f5
Feature cards, testimonials, badge pills.
surface-dark
#101010
Footer + featured pricing tier.
hairline
#e5e7eb
1px borders on inputs and content cards.

Text

ink
#111111
Headlines and primary text.
body
#374151
Default running-text.
muted
#6b7280
Sub-headings, breadcrumbs, footer.
on-dark-soft
#a1a1aa
Footer body text — slightly muted white.

Badge Pastels

badge-orange
#fb923c
Avatar fills, rating stars.
badge-pink
#ec4899
Avatar fills.
badge-violet
#8b5cf6
Avatar fills, category tags.
badge-emerald
#34d399
Avatar fills, "available" indicators.
02 — Typography Scale

Cal Sans + Inter

Cal Sans (display, weight 600, negative letter-spacing) handles every headline. Inter (regular + medium) handles body, buttons, nav. Cal Sans substituted with Inter weight 600 here.

display-xl64px / 600 / 1.05 / -2px
Cal Sans
The better way to schedule
display-lg48px / 600 / 1.1 / -1.5px
Your all-purpose scheduling app
display-md36px / 600 / 1.15 / -1px
Don't just take our word for it
display-sm28px / 600 / 1.2 / -0.5px
Smarter, simpler scheduling
title-lg22px / 600 / 1.3 / -0.3px
Teams · $15 / user / month
title-md18px / 600 / 1.4 / 0
Round-robin scheduling
title-sm16px / 600 / 1.4 / 0
Workflow automations
body-md16px / 400 / 1.5 / 0
Set your availability across multiple time zones, sync with all your calendars, and let attendees book directly.
body-sm14px / 400 / 1.5 / 0
Footer body, fine-print legal text — same Inter face at smaller size.
caption13px / 500 / 1.4 / 0
FREE · 14-DAY TRIAL · NO CREDIT CARD REQUIRED
code14px / 400 / 1.5 / 0
JetBrains Mono
cal.com/alex/30min
button14px / 600 / 1.0 / 0
Sign up free
nav-link14px / 500 / 1.4 / 0
Product · Solutions · Resources · Pricing · Enterprise
03 — Button Variants

Black on white, monochrome action layer

Primary stays #111111 with rounded-md corners and weight-600 labels. Secondary is white with hairline outline. The system has no colored buttons.

button-primary
primary / on-primary / md radius / standard
button-primary-active
primary-active background
button-primary-disabled
primary-disabled / muted text
button-secondary
canvas / ink / hairline outline
button-text-link
No background; inline link-style
button-icon-circular
36 × 36 / canvas / hairline / full radius
nav-pill-group
Personal
Teams
Enterprise
Pill-in-pill sub-nav switcher. Active segment is white-canvas inside the surface-soft wrapper.
04 — Cards & Containers

Light gray feature cards + product UI fragments

📅

Calendar sync, unified

Connect Google, Outlook, iCloud, and Exchange. Cal.com keeps your real-time availability in one place.

⚡

Workflow automations

Send reminders, follow-up emails, and post-meeting forms automatically when bookings are confirmed.

🤝

Team round-robin

Share a single link. Cal.com routes incoming bookings between teammates fairly.

Today's bookings
Product demo with Alex
10:30 — 11:00 · Google Meet
Design review
14:00 — 15:00 · Zoom
1:1 with Yusuf
16:30 — 17:00 · In-person
JM
Jamie Morrison
Head of Sales · Notion

"Cal.com replaced four scheduling tools overnight. The team round-robin alone saves us 12 hours / week of back-and-forth."

RP
Rachel Park
Founder · Linear

"The cleanest scheduling product on the market. Open source, infinitely customizable, and just works."

05 — Pricing Tiers

Free

$0
  • Personal scheduling link
  • Unlimited bookings
  • Up to 1 calendar

Pro

$15
  • 3 calendars + workflows
  • Custom branding
  • Round-robin scheduling

Teams

$15 / user
  • Team scheduling links
  • Round-robin and collective
  • SAML SSO

Enterprise

Custom
  • SOC 2 + HIPAA
  • SLA + dedicated success
  • Custom integrations
06 — Form Elements
07 — Badges & Avatars

Pastel badges and avatar fills are the system's only chromatic flourishes. They appear on tags, "available" indicators, and avatar substitutes.

Featured New Beta Available Default
A
B
C
D
E
08 — Spacing Scale

Section rhythm 96px between major bands. Card internal padding 32px.

xxs · 4px
xs · 8px
sm · 12px
md · 16px
lg · 24px
xl · 32px
xxl · 48px
section · 96px
09 — Border Radius Scale
4 · xs
6 · sm
8 · md
12 · lg
16 · xl
pill
full
10 — Elevation & Depth

Soft modern shadows on elevated cards. Color-block contrast for the featured pricing tier. No glassmorphism, no neumorphism.

Flat

Body sections, top nav, hero bands.

Soft card

Feature cards, testimonial cards (surface-card).

Subtle shadow

Pricing tier cards. 0 1px 2px + 0 4px 12px at low alpha.

Featured tier

Dark surface inversion — color contrast does the elevation work.

Card with hairline

White card with 1px hairline outline. Used on product mockups.

Focus ring

3px ink-color at 8% alpha around focused inputs.

11 — Responsive Behavior
NameWidthKey Changes
Mobile< 768pxHamburger nav; hero h1 64→32px; hero-art stacks below; feature grids 1-up; pricing 1-up.
Tablet768–1024pxTop nav tightens; nav-pill-group wraps; feature cards 2-up; pricing 2-up.
Desktop1024–1440pxFull top-nav; 3-up feature cards; 4-up pricing tiers.
Wide> 1440pxSame as desktop with more breathing room; max content 1200px.
375
mobile
600
small phone
768
tablet
1024
laptop
1280
desktop
1440
wide

Touch Targets

Collapsing Strategy