Cal.com homepage, decoded: the product beside the headline

This is iter0's independent analysis of the Cal.com homepage as we captured it on 2 Oct 2026, at a 1440px desktop width and a 390px phone width. It is not affiliated with, endorsed by or written with Cal.com. Everything below comes from a design spec we already hold for the page: its measurements, its layout and what the capture did and did not show. There are no screenshots, logos or marketing copy from Cal.com here, and a live site can change at any time.

A white rounded panel sits on a light neutral page. On the left are a small announcement pill (164px by 24px), a 64px headline at weight 600 with 70px line height, a 16px paragraph in muted grey and two stacked actions. On the right is a scheduling preview with appointment details and a calendar. The preview shows the product's actual job right beside the promise, and the spec says not to replace it with unrelated decoration.

A restrained, light header with the brand at the left, a single row of 14px destination links and, on the right, an account link and a dark gradient action, 121px by 36px with a 12px radius. The spec says to avoid a coloured bar or a divider that the screenshot does not show.

Below the hero a centred 48px heading, supporting text and two actions introduce three side-by-side cards of roughly 242px each. Every card has a short heading (18px) and a description (16px) above a different interface picture: a connection diagram, availability controls and a meeting screen. The cards are white with subtle borders and soft shadows on a light neutral canvas.

A display face at about weight 600 for headings, lighter muted copy beneath. The measured headline colour is RGB(36,36,36) and body copy is RGB(137,137,137). The primary action is a dark gradient with a white label and the secondary is a light gradient with a dark label; no saturated surfaces appear.

At 390px the hero card is inset about 24px from each side, around 342px wide. The headline and paragraph come first, then two full-width stacked actions, then a reassurance line, and the appointment preview starts below that and continues past the screen. The header shows the brand, an account link, the action and a menu icon.

What the phone menu shows and how it opens are not evidenced. The card widths in the spec are screenshot estimates rather than measured boxes.

Put a picture of the finished result next to the headline, so the visitor sees what they will get before they read about it. Make the three-card section different on purpose: three different pictures for three different jobs.

We keep a longer craft spec for this page: hero, navigation and signature component, with the measured sizes, a list of what not to copy and checks you can run. It is free to download as a Markdown file, and you can use it as a pattern guide for your own site. It describes layout and proportion, so use your own name, wording and imagery. If you want a site built around the same pattern, give the spec to iter0 and it will build you an original page from it.