Design teardown
Cal.com
A gray page with a floating white nav, a large white product panel, and short sentence-case lines: a pill, a large title, one muted sentence, then a dark button beside a gray one.
cal.com
Design character
Quiet product canvas
The page is a light gray stage with white rounded panels. Headlines are large, soft, and near-black. Support lines are one sentence in gray. Actions are a near-black button and a pale gray pair. The scheduling mock sits beside the first headline, then later sections center a title over a row of cards.
Typography
Display titles use Cal Sans at a tight 1.1 line height. Interface and body copy use Cal Sans UI at a light weight, with slightly tight tracking on controls. The embedded calendar uses Inter. Step numbers use Roboto Mono. Headlines run about three to nine words. Support lines run about twelve words, one or two sentences. Feature blurbs are two short sentences in the second person. Quotes are a few conversational sentences.
Color system
The stage is warm gray, panels are white, and type is near-black or a single muted gray. The primary action is a near-black vertical gradient with white type. The quiet action is a pale gray gradient with a light border. The only stronger gray in the product mock is the selected day.
Spacing and geometry
Spacing is built on 4px. The page is airy: large top padding on the hero, wide gaps between a title and its buttons, and roomy card padding. Controls are compact, about 36px tall.
Layout
A fixed nav sits 8px from the top over a gray page. The first screen is a white panel, about 1176px wide, split into a left text column near 500px and a scheduling mock. Later sections center a pill, a title, one gray line, and a button pair, then a grid of white cards. The footer is a multi-column link list on the same gray, under a closing white panel.
Motion
The page does not use decorative CSS motion. Buttons report a transition on all properties at 0s, so the press state is the inset highlight rather than a timed fade. The scheduling mock and the logo row change their contents between views, swapping the sample booking and the row of marks. The nav stays fixed while the long page scrolls.
UI fingerprint
- Gray stage, white panels The page is #f4f4f4. Content sits in white cards with 12px or 16px corners and a soft #242424 shadow.
- Floating nav A 57px white bar with 16px radius is fixed 8px from the top, with a dark button at the right.
- Near-black pair The main button is a #292929 to #242424 gradient, 12px radius, white type, and a 2px white inset highlight. The second button is pale gray.
- Product beside the title The first screen puts a live-looking calendar mock in the same white panel as a short left-hand headline.