Cal.com

Item: Cal.com
Rating: 7.1

Customizable scheduling software for individuals, businesses and developers.

7.1/10MABTU rating

DESKTOP · 1440 × 8,140/ ↗

MOBILE · 390

Section outline · Home

01heroThe better way to schedule your meetings796
02stepsWith us, appointment scheduling is easy868
03features gridYour all-purpose scheduling app1,238
04stats…and so much more!569
05features gridSee why our users love Cal.com1,387
06faqFrequently asked questions652

Rating · Home

Visual design7.6

UX & clarity7.8

Originality6.9

Craft & consistency7.7

Motion6.0

Performance & a11y7.0

This page scores 7.3; the site score weights the home page double.

Main colours

Light·off white background·mono

Typography

Cal Sansheading · sans · self-hosted Cal Sans UIbody · sans · google

Stack & style

Framer Google Fonts React

Minimal Gradient-heavy Monochrome Rounded / soft Dark tech Product-UI-led Booking widget FAQ accordion Marquee Process steps Stats band

Also: PostHog, Cloudflare

Design DNA

Pale grey #F4F4F4 canvas with every band sitting in a white rounded card framed by hairline guide lines and small cross marks at the corners. Headlines in tight Cal Sans (hero ~64px, three lines, left-aligned), body in grey #898989, near-black #242424 pill buttons with chevrons. The hero pairs copy with a working booking widget (duration pills, month grid with dark selected day) instead of a screenshot. Sections open with a tiny icon eyebrow chip, centred heading, dark + ghost button pair, then numbered 01/02/03 cards holding miniature UI fragments. Colour is almost absent; blue appears only in small Save chips.

Worth borrowing

Put an interactive product widget, here a real booking calendar, in the hero where a static screenshot would normally go.
Frame each band as a white rounded card on a grey ground with hairline guide lines and corner cross marks for a blueprint feel.
Open every section with a tiny icon eyebrow chip, a centred heading and a dark plus ghost button pair so the rhythm stays predictable.