Cal.com

graphite calendar on paper white

SaaS Light light minimal monochrome precise friendly typographic Built with Framer, Svelte

A calm, monochrome product site that feels like a good paper planner: pale grey canvas, bright white cards, and heavy, tightly set geometric headlines that sound confident without shouting. The most distinctive thing is the contrast between the dense, chunky Cal Sans display type and very light (300) body copy, so pages look punchy yet airy. Actual product UI, such as booking widgets, calendars and toggles, stands in for illustration.

It is built almost entirely from greys. The #f4f4f4 page is framed by faint vertical hairline guides, and content sits in #ffffff panels with 16px radii and a soft two-part shadow (a crisp 1px contact edge plus a diffuse 4–8px blur). Primary actions are near-black #242424 with a subtle inner highlight and a trailing chevron. Secondary actions are pale grey bars with a white inner top highlight. Colour shows up only in small doses: #0099ff on 'Save 25%' tags and third-party review stars and logos. Spacing sits on a 4px grid, with 8–12px inside components and 64–96px between sections.

https://cal.com

Colors

Click a swatch to copy

Typography

  • display
    Cal Sans
    400 · 600 · 900 · falls back to Manrope, Plus Jakarta Sans, system-ui, sans-serif
    Chunky geometric grotesk used for all marketing headlines (h1 64px, h2 48px), prices and pull-quotes. Letter-spacing stays normal because the face is already tightly fitted. Use 1.1 line-height so headlines read as solid blocks.
  • body
    Cal Sans UI Variable Light
    300 · falls back to Inter, DM Sans, system-ui, sans-serif
    Workhorse text face at weight 300 for paragraphs, nav, links, card titles and UI labels. Card titles at 18px use -0.2px tracking. Its thin weight against the heavy display face is the signature contrast. Docs switch to Inter 400/500/600, and blog prose uses Matter Regular.
  • accent
    Inter
    400 · 500 · 600 · falls back to system-ui, -apple-system, sans-serif
    Docs site only: h1 36px/600 with -0.9px tracking, h2 24px/600 with -0.6px, body 16px/1.75. Primary colour there is #111827 / #171717.
  • mono
    Paper Mono
    400 · 500 · falls back to Roboto Mono, JetBrains Mono, ui-monospace, monospace
    Inline code and event constants such as BOOKING_REASSIGNED at 16px/1.5. Tiny uppercase micro-labels (e.g. 'YEARLY') also use it.
Display
64px / 1.1
600 · normal
Cal.com
H2
48px / 1.1
600 · normal
Cal.com
H3 / Price
32px / 1.2
600 · normal
Graphite calendar on paper white
Quote / Card headline
24px / 1.3
600 · normal
Graphite calendar on paper white
Feature title
18px / 1.3
300 · -0.2px
The quick brown fox jumps over the lazy dog
Lead
18px / 1.5
300 · normal
The quick brown fox jumps over the lazy dog
Body
16px / 1.5
300 · normal
The quick brown fox jumps over the lazy dog
Small / Button
14px / 1.4
400 · normal
The quick brown fox jumps over the lazy dog
Mono
16px / 1.5
400 · normal
The quick brown fox jumps over the lazy dog

Spacing & Shape

Spacing
Base unit
4px
Density
comfortable
Container
1280px
Section gap
96px
Card padding
24px
2
4
8
10
12
16
20
24
32
48
64
96
Radius
  • Hero panel, feature and pricing cards 16px
  • Inner panels, inputs, booking widget, testimonial cards 12px
  • Buttons, calendar day cells, segmented controls 8px
  • Small chips, tags, icon tiles 4px
  • Announcement pills and toggles 9999px
  • Avatars 100%
Shadows
Card lift Default white cards and the hero panel: a crisp contact edge plus a faint diffuse halo, never a heavy drop
rgba(36, 36, 36, 0.7) 0px 1px 5px -4px, rgba(36, 36, 36, 0.05) 0px 4px 8px 0px
Card lift + ring Larger feature cards that need a 1px ring to separate from white-on-white contexts
rgba(19, 19, 22, 0.7) 0px 1px 5px -4px, rgba(34, 42, 53, 0.08) 0px 0px 0px 1px, rgba(34, 42, 53, 0.05) 0px 4px 8px 0px
Dark button gloss Inner top highlight on #242424 primary buttons, giving a slightly bevelled key feel
rgba(255, 255, 255, 0.15) 0px 2px 0px 0px inset
Light button bevel Inner top highlight on pale grey secondary buttons and segmented options
rgb(255, 255, 255) 0px 2px 0px 0px inset
Pressed well Recessed tracks for toggles, segmented duration pickers and inputs
rgba(0, 0, 0, 0.16) 0px 1px 1.9px 0px inset

Components

Live previews rendered from recipes
Cal.com Get started
Buttons
Inputs
Tags
New SaaS light New SaaS light
Segmented duration picker
Segmented duration picker
Card
Everything in one ledger

Reconcile every account overnight and close the month in an afternoon instead of a fortnight.

Get started
  • Primary button — Always ends with a small › chevron in muted white. In the hero it runs full width (≈466px) with a Google 'G' icon on the left. On the inverted dark pricing card it flips to a white fill with #242424 text.
  • Secondary button — Soft grey key with a trailing chevron, e.g. 'Sign up with email', 'Book a demo'. On grey sections a white-fill variant ('See feature breakdown') uses the same border.
  • Announcement pill — Sits above hero and section headlines ('Cal.com launches v6.8 ›', 'Pricing', 'How it works') with a tiny leading icon or trailing chevron.
  • Discount tag — The only real use of saturated colour on marketing pages ('Save 25%'), placed next to prices.
  • Feature card — 18px/300 title, #898989 description, then an embedded mini product UI (toggles, dropdowns, calendar) as the visual. Arranged in 3-up or 2×2 grids with 16–24px gaps. A #242424 inverted variant is used for the highlighted pricing tier.
  • Segmented duration picker — Options 15m/30m/45m/1h; the selected option is a white 6px-radius chip with rgba(34, 42, 53, 0.05) 0px 4px 8px lift and #242424 text.
  • Input — Docs 'Ask a question…' bar (60px tall with a round grey send button) and search field with ⌘K hint. Placeholder is #898989.
  • Top navigation — Sticky and transparent over the grey canvas: wordmark left, centred links with small chevrons for dropdowns (Solutions, Developer, Resources), then 'Sign in' text link and a compact dark 'Get started ›' button on the right.

Do / Don't

  • Set every marketing headline in Cal Sans 600 at 1.1 line-height in #242424, and pair it with weight-300 body copy in #898989 for the heavy/light contrast.
  • Place content in #ffffff cards with 16px radius on a #f4f4f4 canvas, using the two-part shadow (1px 5px -4px contact + 4px 8px diffuse).
  • Give primary buttons a #242424 fill, an inset 2px white highlight at 15% opacity, and a trailing › chevron.
  • Use real, interactive-looking product UI (calendars, toggles, duration pickers) as illustrations inside feature cards.
  • Introduce each section with a small grey pill label above a centred headline, a muted subline and a dark + light button pair.
  • Keep saturated colour to tiny accents: #0099ff discount tags and third-party logos or review stars.
  • Add faint vertical guide lines and + crosshairs at section seams for a subtle blueprint frame.
  • Don't introduce a brand hue for buttons or links; the system is graphite on grey and white.
  • Don't use heavy or dark drop shadows, large blurs, or glassmorphism; elevation stays barely perceptible.
  • Don't set body text at weight 400+ in the marketing face; the light 300 weight carries the airy feel.
  • Don't add letter-spacing to Cal Sans headlines or loosen their 1.1 line-height.
  • Don't use sharp corners or pill-shaped primary buttons; buttons are 8px, cards 16px, and only small badges are fully rounded.
  • Don't fill sections with stock photos or colourful illustrations; let the monochrome product UI do the work.
  • Don't place white cards directly on white; keep the #f4f4f4 canvas, or add the 1px rgba(34,42,53,0.08) ring.

Screens

Cal.com | Scheduling Software for Online Bookings /
Pricing | Cal.com /pricing
Cal.com v6.8 - Cal Events, New troubleshooter, AI chat in routing forms & more | Cal.com - Scheduling Software for Online Bookings /blog/calcom-v6-8
Introduction to API v2 - Cal.com Docs /docs/api-reference/v2/introduction
Recurring Events | Cal.com /features/recurring-events
Mobile 390×844
Mobile navigation menu open