# cal.com

Source: https://cal.com/
Captured: 2026-09-20
Tags: saas, landing, light, both, minimal, swiss, corporate-clean, calm, trustworthy, confident, technical
Colors: #f9f9f9, #d3d4d4, #b3b3b3, #6e6e6e, #4f4f50, #919192, #2f3133, #181818
Type (h1): Cal Sans · 64px/70.4px · 600 — "The better way to schedule your meetings"
Type (h2): Cal Sans · 48px/52.8px · 600 — "With us, appointment scheduling is easy"
Type (h3): Cal Sans UI Variable Light · 18px/23.4px · 300 · tracking -0.2px — "Connect your calendar"
Type (body): Cal Sans UI Variable Light · 16px/24px · 300 — "A fully customizable scheduling software for individuals, businesses taking call"
Type (small): Cal Sans UI Variable Light · 12px/12px · 300 — "Cal.com launches v6.9"
Type (button): sans-serif · 12px/normal · 400 — "Cal.com launches v6.9"
Button: "Cal.com launches v6.9" — fill #f5f5f5, text #292929, radius 9999px, border 0px, padding 4px 8px 4px 12px, height 24px, type 12px/400
Radii: 4px (37), 2px (35), 100% (5), 12px (4), 6px (4)

## Images

- Hero (desktop): https://media.lvly.design/library/cal-com/hero.webp?v=bf45f86d
- Page crop (mid-1): https://media.lvly.design/library/cal-com/mid-1.webp?v=328abd73
- Page crop (mid-2): https://media.lvly.design/library/cal-com/mid-2.webp?v=9174c152
- Hero (mobile): https://media.lvly.design/library/cal-com/mobile-hero.webp?v=eb340ea1
- Full page (desktop): https://media.lvly.design/library/cal-com/full.jpg?v=f49ce342
- Full page (mobile): https://media.lvly.design/library/cal-com/mobile-full.jpg?v=77f9ee99
- Clip preview (mp4): https://media.lvly.design/library/cal-com/video-eiftq3.preview.mp4?v=2f6e19db

An almost entirely achromatic scheduling landing page that gets its warmth from paper, not pigment: a `#f4f4f4` ground, white panels floating on it at a 12px radius with a wide, nearly invisible shadow, and ink that runs from `#181818` down through `#6e6e6e` to `#b3b3b3`. Faint hairline rules run the full height of the page at the content column's edges and cross a second horizontal rule at a small drafting crosshair, which is the one gesture that turns a soft SaaS page into something that reads as measured and engineered. Type does all the shouting — Cal Sans at 64px/70.4px and weight 600 above a body face that is genuinely light, weight 300 at 16px/24px — so the hierarchy is a weight jump rather than a color or size jump. The hero is a working booking widget rather than a screenshot, and it is the only place on the page where color exists at all: a lilac event block, a purple `@mention`, the borrowed green and orange of third-party rating badges. Everything else is gray, which makes the single near-black CTA pill the loudest object on a 1440px canvas.

## Steal-worthy details

- Hairline rules at `#d3d4d4` run the full page height at the content column's left and right edges, cross a horizontal rule at each section break, and mark the intersection with a small `+` crosshair — a drafting reference that costs two 1px borders and reframes the whole page as measured
- The hero is not laid on the page; it sits inside one raised white panel, 12px radius, inset ~130px from the viewport edge, lifted off `#f4f4f4` by a shadow so diffuse it reads as depth rather than as a shadow
- The hero art is a live, interactive booker — avatar, event title, a 15m/30m/45m/1h segmented control with `1h` selected, location, timezone select, and a real month grid with available days tinted and the selected one filled near-black — instead of a product screenshot
- The weight gap does the hierarchy: headings at 600 (64px/70.4px h1, 48px/52.8px h2, a tight 1.1 ratio) over body at **weight 300**, 16px/24px, in the same family — no color change, no size change, nothing but stroke thickness
- Two CTAs stacked, not side by side, both the exact width of the text column: a solid `#181818` pill carrying the Google glyph, then a `#f5f5f5` pill with `#292929` text at the same size, then a 12px `#919192` reassurance line — a single-file decision ladder instead of a primary/secondary pair competing on one row
- The announcement chip is 24px tall, 12px/400, `#f5f5f5`, fully pilled, with deliberately asymmetric padding — `4px 8px 4px 12px` — so the trailing chevron sits tighter than the leading text
- The header is chromeless over the hero — wordmark and links straight on the ground, no bar, no border — and on scroll it condenses into a detached white rounded bar inset from both edges with its own soft shadow
- Color is quarantined inside product demos and borrowed marks: a lilac event block in the calendar mock, purple `@handle` links in the testimonial wall, the green and orange of Trustpilot, Product Hunt and G2. The page chrome itself never uses a hue

## Style recipe

Build on a light neutral ground, `#f4f4f4`, and put every block of content inside a pure white panel at 12px radius with a very wide, very low-opacity shadow — depth by diffusion, never by a visible edge. Keep the palette strictly achromatic: ink `#181818`, secondary `#6e6e6e`, tertiary `#919192`, disabled `#b3b3b3`, hairlines `#d3d4d4`. Allow no hue in the chrome at all; the only color permitted anywhere is inside a product mock or a third-party logo, and that restriction is the style.

Set headings in a geometric humanist sans at weight 600 with a tight 1.1 line-height — 64px/70.4px for h1, 48px/52.8px for h2 — and set body in the *light* optical cut of the same family, weight 300, 16px/24px. Eyebrows and captions run 12px. Never bump size or color to create hierarchy; move the weight from 300 to 600 and let the stroke contrast carry it. Sub-labels take 18px/23.4px at weight 300 with -0.2px tracking.

Radii form a short ladder and nothing between: 2px and 4px on inner chrome (cells, toggles, segmented controls), 6px on small tiles, 12px on the large raised panels, `9999px` on every button and chip, `100%` on avatars. Buttons are pills only. Primary is a solid `#181818` fill with white text; secondary is `#f5f5f5` with `#292929` text and a `0px` border; both stack full-width in the text column rather than sitting side by side, with a 12px muted reassurance line beneath. Chips are 24px tall with asymmetric padding (`4px 8px 4px 12px`) when they carry a trailing chevron.

Draw a 1px `#d3d4d4` hairline down each edge of the content column for the full scroll length, cross it with a horizontal hairline at every section boundary, and stamp a small `+` at the intersections. This is the one move that makes the style recognizable — it costs almost nothing and turns soft rounded cards into a measured drawing.

Rhythm: one full-bleed panel per idea with generous internal padding, a centered eyebrow pill above each section headline, and a centered `Get started` / `Book a demo` pair under it. For social proof use a three-column masonry of variable-height white cards, each with a circular avatar carrying a small source badge overlapping its bottom-right. Make the header chromeless over the first screen and condense it on scroll into a detached white rounded bar inset from both edges. Motion stays at the level of hover tints and the header's condense — nothing on the page should slide, parallax or bounce.