# 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
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
Email address
Email (focused)
Booking title
Custom message
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

Name | Width | Key Changes
--- | --- | ---
Mobile | < 768px | Hamburger nav; hero h1 64→32px; hero-art stacks below; feature grids 1-up; pricing 1-up.
Tablet | 768–1024px | Top nav tightens; nav-pill-group wraps; feature cards 2-up; pricing 2-up.
Desktop | 1024–1440px | Full top-nav; 3-up feature cards; 4-up pricing tiers.
Wide | > 1440px | Same as desktop with more breathing room; max content 1200px.

375
mobile
600
small phone
768
tablet
1024
laptop
1280
desktop
1440
wide

#### Touch Targets

- Primary CTA at min 40 × 40px.
- Icon button at 36 × 36 — slightly under 44, visually centered.
- Text input height 40px.

#### Collapsing Strategy

- Top nav collapses to hamburger at < 768px.
- Hero 7-5 grid → single-column on mobile.
- Feature grids reduce columns rather than scaling.
- Pricing tier cards collapse 4 → 2 → 1; featured stays distinct.
- Nav-pill-group wraps to multi-row on tablet.