Light interfaceMeasured cal.com

Cal.com

A clean, no-nonsense scheduling tool that feels simple and trustworthy.

This page is styled with Cal.com’s own measured values. It is a private reference for AltLeads; their logo, brand and company-only fonts belong to them.

Colours

Each role is a value read from their live website, checked against their screenshots.

Background#FFFFFF
Page behind everything

Surface#F4F4F4
Cards, panels, menus

Text#242424
Headings and body

Muted text#898989
Secondary info

Line#E5E7EB
Dividers and outlines

Accent#242424
Main button, links, selection

On accent#FFFFFF
Text on the accent

Contrast

Text on background 15.5:1Muted on background 3.5:1Text on accent 15.5:1

Every colour found on their site

#898989#242424#292929#101010#374151#FFFFFF#F4F4F4#E5E7EB#F3F4F6#E1E2E3#F5F5F5

Typography

Headings use Cal Sans (company-only; shown here with the free look-alike Inter). Body text uses Cal Sans UI Variable Light (company-only; shown with Inter).

h1	Cal Sans · 64px · 600	The better way to schedule your meetings
h2	Cal Sans · 48px · 600	With us, appointment scheduling is easy
h3	Cal Sans UI Variable Light · 18px · 300 · -0.2px	Connect your calendar
p	Cal Sans UI Variable Light · 14px · 300	Solutions

Corners & shadows

Corner sizes used

4px

2px

12px

pill

8px

16px

Shadows

Shadow 1

Shadow 2

Shadow 3

Components, rebuilt from their values

Live and clickable. Built by us from the numbers above, not copied from their code. Sample CRM data.

Buttons

Navigation

WorkspaceCompanies Contacts Meetings

Disposition

InterestedCallbackBengaluru

Hide do-not-call

Next call

Licious · Admin head

Wants a proposal before the cafeteria contract renews in March.

Tabs

Table

Company	Owner	Status	Last touch
Zomato Food tech · Gurugram	PR	Callback	18 days ago
Licious Food tech · Bengaluru	RM	Interested	Today
Delhivery Logistics · Gurugram	AS	No answer	35 days ago

Toast

Call logged · callback on Friday

Real components from their site

Cropped from Cal.com’s live website. Click to enlarge.

Tags and badges · 4

Cal.com Tags and badges: 15m — fill #FFFFFF · corners 6px · sans-serif 12px

Cal.com Tags and badges: 01 — fill #E5E7EB · corners 8px · sans-serif 12px

Cal.com Tags and badges: 8:30 am — fill #FFFFFF · corners 8px · sans-serif 12px

Cal.com Tags and badges: 12h — fill #FFFFFF · corners 6px · sans-serif 12px

Cards and panels · 6

Cal.com Cards and panels: 01 — fill #FFFFFF · corners 16px · sans-serif 12px

Cal.com Cards and panels — fill #FFFFFF · corners 12px · sans-serif 12px

Cal.com Cards and panels: May — fill #FFFFFF · corners 12px · sans-serif 12px

Cal.com Cards and panels: "Just gave it a go and it's definitely t — fill #FFFFFF · corners 16px · sans-serif 12px

Icons

23 icons copied exactly from their site’s code.

Product screens

10 real screens from web image search, each linked to where it was found.

Cal.com product screen: 2288 × 1176 — 2288 × 1176

Cal.com product screen: 3024 × 1716 — 3024 × 1716

Cal.com product screen: 1024 × 609 — 1024 × 609

Cal.com product screen: 1120 × 940 — 1120 × 940

Cal.com product screen: 2400 × 1260 — 2400 × 1260

Cal.com product screen: 3496 × 2346 — 3496 × 2346

Cal.com product screen: 1700 × 817 — 1700 × 817

Cal.com product screen: 1600 × 723 — 1600 × 723

Do & don’t

What makes it Cal.com

A bold rounded display font for headlines, plain sans for everything else
Mostly black-and-white with grey cards, almost no colour
Calendar and time-slot cards with soft shadows and rounded corners

Use plenty of white space around a single bold headline
Keep buttons solid black with white text for the main action
Show real calendar/time-slot UI to make the product feel tangible

Don’t

Don't add bright colours to buttons or badges
Don't use heavy drop shadows
Don't crowd the page with many competing actions

For AltLeads: Borrow the plain, high-contrast black-and-white button style for primary CRM actions like 'Book call' so they feel obvious and trustworthy.

Copy the tokens

Paste into any project to try this look.

/* Cal.com · values measured from https://cal.com/ · reference only, their brand belongs to them */
:root {
  --bg: #FFFFFF;
  --surface: #F4F4F4;
  --text: #242424;
  --muted: #898989;
  --line: #E5E7EB;
  --accent: #242424;
  --on-accent: #FFFFFF;
  --radius-button: 4px;
  --radius-card: 16px;
  --radius-small: 2px;
  --button-height: 40px;
  --font-heading: "Cal Sans", "Inter", system-ui, sans-serif;
  --font-body: "Cal Sans UI Variable Light", "Inter", system-ui, sans-serif;
  --shadow: rgba(0, 0, 0, 0.16) 0px 1px 1.9px 0px inset;
}