# Cal.com homepage design spec (free) - Site: cal.com - Captured: 2 Oct 2026, at 1440x900 desktop and 390x844 phone widths - Independent analysis by iter0. Not affiliated with, endorsed by or sponsored by Cal.com. - Licence: free to use as a pattern guide for your own site. It describes layout, proportion, type scale and colour roles. Do not copy Cal.com's name, logo, wording, imagery or artwork. - Contents: 1. Hero, 2. Navigation, 3. Signature component. - Build your own site from this spec: https://iter0.com/build --- # Hero craft specification Evidence provenance: Based on the supplied desktop and 390px screenshots and desktop computed-style extraction. The extraction measures hero text and actions; the screenshots show the surrounding panel and phone layout. CRAFT ARCHETYPE: product-UI-led ## The big idea Pair a prominent scheduling proposition and signup actions with a product-interface preview. On desktop, the text and preview occupy neighboring areas; at phone width, the text and actions precede the preview in a vertical sequence. ## Layers - The desktop screenshot shows a white rounded hero panel, with the headline and signup content on the left and a scheduling preview on the right. The extracted headline starts at x=196, y=253 and measures 500×211px. - Set the headline at 64px with 70.4px line-height and the supporting paragraph at 16px with 24px line-height, matching the extraction. - The announcement pill measures 164×24px. The primary and secondary signup actions each measure 480×36px in the desktop extraction; stack them beneath the supporting text. - The desktop preview includes appointment details and a calendar. Keep it visibly beside the text at desktop size; do not replace it with unrelated decorative imagery. ## Type Use a display face with approximately 600 weight for the headline. Keep supporting copy lighter and muted. Action labels are 14px with 20px line-height in the extraction. ## Colour The extracted headline color is RGB(36, 36, 36); supporting text is RGB(137, 137, 137). The primary action uses a dark gradient and white label; the secondary action uses a light gradient and dark label. The screenshot shows a light neutral page surrounding the white panel. ## States and motion The extracted action styles report an all-property transition but no duration or demonstrated hover state. Treat hover and animation behavior as unknown. ## Do NOT copy or add Do not copy source wording, names, logos, customer identities, or calendar labels and data. Do not invent interaction states, statistics, or phone-specific behaviors not shown in the evidence. ## Checks you can run At desktop size, check for a 64px/70.4px headline, 16px/24px supporting text, a 164×24px announcement pill, and two 480×36px actions. Confirm the scheduling preview sits beside the text. ## Phone at 390px The supplied phone screenshot shows a white rounded hero card inset about 24px from either side, approximately 342px wide. Its headline and supporting text precede two stacked, full-width signup actions; the extracted desktop action dimensions do not establish phone action dimensions. The reassurance line follows the actions, and the appointment preview begins below it, continuing past the screenshot’s lower edge. The phone screenshot shows a top bar with the brand, account link, primary action, and menu icon. Preserve the visible vertical order and allow scrolling; do not infer the menu’s trigger or behavior. --- # Navigation craft specification Evidence provenance: Based on the desktop and 390px screenshots and measured desktop and phone element bounds. The phone extraction also includes menu-panel content; that extraction does not establish how the panel was opened. CRAFT ARCHETYPE: type-led ## The big idea Use a restrained header with the brand at the left, destination links across the desktop row, and account access plus a prominent action at the right. At phone width, the supplied screenshot shows a compact header with the brand, account link, action, and menu icon. ## Layers - The desktop extraction places a measured destination label at x=380, y=27, 62×20px. Other destination labels include 68×20px and 67×20px examples. Their measured text size is 14px. - The measured desktop action is 121×36px with a 12px radius, 8px gap, and 8px vertical by 12px horizontal padding. The account link measures 45×16px. - In the phone screenshot, the brand begins around x=16; the account link is at x=155, y=23 and measures 45×16px in the phone extraction. The action is at x=209, y=13 and measures 121×36px. A menu icon is visible at the right. - Keep the desktop destinations in a single row as shown. Do not assume the extracted phone menu-panel content is visible in the supplied phone screenshot. ## Type Destination labels are 14px with 19.6px line-height and RGB(41, 41, 41) in the desktop extraction. The account link is 14px and RGB(17, 17, 17). The action label is 14px with 20px line-height and white text. ## Colour The desktop header has a light, unobtrusive background. The measured action uses a dark gradient from RGB(41, 41, 41) to RGB(36, 36, 36), a 12px radius, and a subtle inset highlight. Avoid adding a colored bar or divider not supported by the screenshot. ## States and motion The measured action has an all-property transition, but no duration or hover appearance is supplied. The phone extraction contains menu-panel entries, but neither the screenshots nor measurements establish how that state is triggered. Do not invent dropdown behavior, sticky behavior, or animation. ## Do NOT copy or add Do not copy the source brand, logo, destination labels, or exact identity-bearing content. Do not add a search field, badge, sticky behavior, or animated menu without separate evidence. ## Checks you can run At desktop size, check that destination labels are 14px and remain on one row, and that the main action is 121×36px with a 12px radius. At 390px, check the brand’s approximately 16px left inset, the 45×16px account link, the 121×36px action, and the visible menu icon. --- # Feature-grid craft specification Evidence provenance: Based on the supplied below-fold screenshot at scroll position 900 and its measured section typography and card headings. Card widths, gaps, and appearance are estimated from the screenshot; the extraction does not provide card bounds. CRAFT ARCHETYPE: product-UI-led ## The big idea Introduce a scheduling process with a centered section heading, supporting text and actions, followed by three aligned feature cards. Each card pairs a short heading and description with a distinct product-interface visual. ## Layers - The below-fold extraction measures the section heading at x=240, y=170, 960×53px, with 48px type and 52.8px line-height. Supporting text begins at x=450, y=235 and measures 540×48px. - The screenshot shows two adjacent actions beneath the introduction; the extraction measures them at 121×36px and 131×36px. - The three cards appear side by side in the screenshot. Their visible widths are approximately 242–243px with roughly 9–10px gaps; these are screenshot estimates, not extracted card bounds. - Each card has a heading and description above a distinct interface illustration. Extracted card headings are 18px with 23.4px line-height; descriptions are 16px with 24px line-height. - The visuals shown are a connection diagram, availability controls, and a meeting interface. Use original product visuals rather than tracing the supplied artwork. ## Type Use 48px/52.8px typography for the section heading, 18px/23.4px for card headings, and 16px/24px for descriptions. Extracted headings use RGB(36, 36, 36); descriptions use RGB(137, 137, 137). ## Colour The screenshot shows a light neutral canvas, white cards, subtle borders, and soft shadows. Keep headings dark and descriptions muted; avoid large saturated surfaces unsupported by the reference. ## States and motion The supplied below-fold evidence does not establish card hover behavior, animation, or timing. Treat these as unknown; do not add effects based on assumption. ## Do NOT copy or add Do not copy source wording, product names, interface labels, logos, or customer identities. Do not invent metrics, testimonials, pricing, or additional cards. Use original illustrations. ## Checks you can run Verify three side-by-side cards in the supplied desktop view; a 48px/52.8px section heading; 18px/23.4px card headings; 16px/24px descriptions; and two introduction actions measuring 121×36px and 131×36px. Treat card widths and gaps as visual estimates, not computed measurements.