--- version: alpha name: Cal.com-design-analysis description: A clean, calendar-software-first marketing interface built on a soft off-white canvas (#f4f4f4) with near-black CTAs and the custom Cal Sans display typeface. The system reads as confident modern SaaS — large rounded white cards float over the canvas holding real product UI fragments (booking widgets, calendar grids, availability toggles), display headlines carry weight-600 Cal Sans, and body copy runs in a lighter Cal Sans UI Variable Light at weight 300. Brand voltage comes from the display type and embedded product chrome rather than from accent color. colors: primary: "#111111" primary-active: "#242424" ink: "#000000" ink-strong: "#141414" muted: "#292929" neutral: "#898989" body: "#374151" muted-cool: "#6b7280" muted-cool-soft: "#9ca3af" canvas: "#f4f4f4" surface-card: "#ffffff" surface-soft: "#f5f5f5" surface-softer: "#f3f4f6" hairline: "#e0e0e0" hairline-soft: "#d3d3d3" hairline-cool: "#e1e2e3" border-gray: "#e5e7eb" surface-dark: "#101010" on-dark: "#ffffff" link: "#0000ee" accent-blue: "#0099ff" typography: display-xl: fontFamily: "Cal Sans, Inter, sans-serif" fontSize: 64px fontWeight: 600 lineHeight: 1.1 letterSpacing: normal display-lg: fontFamily: "Cal Sans, Inter, sans-serif" fontSize: 48px fontWeight: 600 lineHeight: 1.1 letterSpacing: normal title: fontFamily: "Cal Sans UI Variable Light, Inter, sans-serif" fontSize: 18px fontWeight: 300 lineHeight: 1.3 letterSpacing: -0.2px body: fontFamily: "Cal Sans UI Variable Light, Inter, sans-serif" fontSize: 14px fontWeight: 300 lineHeight: 1.4 letterSpacing: normal rounded: xs: 2px sm: 4px md: 8px lg: 12px xl: 16px xxl: 29px pill: 100px full: 9999px spacing: xxs: 4px xs: 8px sm: 10px base: 12px md: 16px lg: 24px xl: 32px xxl: 48px section: 96px components: top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-dark}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 12px 24px button-primary-active: backgroundColor: "{colors.primary-active}" textColor: "{colors.on-dark}" rounded: "{rounded.md}" button-secondary: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.xxl}" padding: 12px 24px nav-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body}" text-link: backgroundColor: transparent textColor: "{colors.link}" typography: "{typography.body}" badge-pill: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.pill}" padding: 8px 12px hero-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 24px booking-widget-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 24px feature-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.title}" rounded: "{rounded.lg}" padding: 24px feature-icon-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.title}" rounded: "{rounded.lg}" padding: 16px testimonial-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 24px duration-pill: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 8px 12px calendar-day-selected: backgroundColor: "{colors.primary-active}" textColor: "{colors.on-dark}" typography: "{typography.body}" rounded: "{rounded.md}" text-input: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: 0px padding: 10px 12px footer: backgroundColor: "{colors.canvas}" textColor: "{colors.muted}" typography: "{typography.body}" padding: 48px --- ## Overview Cal.com's marketing surface is a calm, calendar-software-first interface built on a soft off-white canvas (`{colors.canvas}` — #f4f4f4) rather than pure white. Large rounded white cards (`{colors.surface-card}` — #ffffff) float over that canvas and carry the editorial content, so the page reads as a stack of "product panels" rather than full-bleed bands. The brand voice is confident modern SaaS — near-black CTAs (`{colors.primary}` — #111111), oversized Cal Sans display headlines, and generous whitespace. Type splits cleanly into two roles measured on the page: **Cal Sans** at weight 600 for h1/h2 display headlines, and **Cal Sans UI Variable Light** at weight 300 for h3 titles and body copy. The lighter UI variable face at weight 300 is unusual and distinctly Cal.com — body text reads thin and airy rather than the typical weight-400 SaaS baseline. Component voltage comes from **real product UI fragments shown inside the cards** — the hero's right panel is the actual Cal.com booking widget with a May 2025 calendar grid, time-slot duration pills (15m / 30m / 45m / 1h), and a selected day rendered in dark (`{colors.primary-active}` — #242424). Lower bands show availability toggle rows, booking-overlay calendars, and integration grids. Cal.com shows the product itself rather than illustrations of it. The page is near-monochrome: the only chromatic accents measured are a default-link blue (`{colors.link}` — #0000ee) and a sparse bright blue (`{colors.accent-blue}` — #0099ff). Everything structural is ink, gray, and white over the off-white floor. **Key Characteristics:** - Soft off-white canvas (`{colors.canvas}` — #f4f4f4) instead of pure white; white cards (`{colors.surface-card}`) sit on top to create the panel-on-canvas rhythm. - Near-black primary CTA (`{colors.primary}` — #111111) with a darker pressed state (`{colors.primary-active}` — #242424). CTAs use `{rounded.md}` (8px); the secondary "Sign up with email" button uses a larger `{rounded.xxl}` (29px) pill-ish radius. - Custom **Cal Sans** display headlines at weight 600 (substituted with Inter here — see Typography). - Body and h3 type run in **Cal Sans UI Variable Light** at weight 300 — light, airy, the system's signature reading weight. - Real product UI fragments embedded in cards — booking widget, calendar grid, duration pills, availability toggles. - Hierarchical radius: `{rounded.md}` (8px) for buttons + duration pills, `{rounded.lg}` (12px) for feature/testimonial cards, `{rounded.xl}` (16px) for the hero booking card, `{rounded.pill}` (100px) for badge pills, `{rounded.full}` for avatars. - Soft inset and low-alpha drop shadows on floating cards — never heavy. ## Colors ### Brand & Action - **Primary** (`{colors.primary}` — #111111): The dominant action color — "Sign up with Google", "Get started" CTAs, and the selected calendar day. Pressed state shifts to `{colors.primary-active}` (#242424). - **Ink** (`{colors.ink}` — #000000): The maximum-contrast text tone — display headlines and primary text on the white cards. - **Ink Strong** (`{colors.ink-strong}` — #141414): A near-black neutral used on dark UI chrome and dense interactive surfaces. ### Accent - **Link** (`{colors.link}` — #0000ee): The measured anchor color — appears on raw inline links. Cal.com is near-monochrome, so this default-blue surfaces rarely and should be treated as a fallback link tone. - **Accent Blue** (`{colors.accent-blue}` — #0099ff): A sparse bright blue (3 occurrences) used inside product UI fragments — small highlight moments, never on hero CTAs. ### Text - **Ink** (`{colors.ink}` — #000000): Headlines, primary text. - **Muted** (`{colors.muted}` — #292929): Low-contrast running text and secondary copy on cards. - **Body** (`{colors.body}` — #374151): Default supporting body color. - **Neutral** (`{colors.neutral}` — #898989): Tertiary text — captions, sub-labels, calendar weekday headers. - **Muted Cool** (`{colors.muted-cool}` — #6b7280) and **Muted Cool Soft** (`{colors.muted-cool-soft}` — #9ca3af): Fine-print and disabled/dimmed calendar dates. ### Surface - **Canvas** (`{colors.canvas}` — #f4f4f4): The page floor — a soft off-white, not pure white. - **Surface Card** (`{colors.surface-card}` — #ffffff): The floating white panels — hero card, feature cards, testimonial cards, inputs. - **Surface Soft** (`{colors.surface-soft}` — #f5f5f5): Secondary button fill, duration-pill background, soft inset zones. - **Surface Softer** (`{colors.surface-softer}` — #f3f4f6): Barely-visible inner dividers. - **Surface Dark** (`{colors.surface-dark}` — #101010): A deep near-black surface for dark UI chrome shown inside product fragments. ### Lines - **Hairline** (`{colors.hairline}` — #e0e0e0): The 1px border tone on cards and dividers. - **Hairline Soft** (`{colors.hairline-soft}` — #d3d3d3) and **Hairline Cool** (`{colors.hairline-cool}` — #e1e2e3): Alternate divider tones for nested chrome. - **Border Gray** (`{colors.border-gray}` — #e5e7eb): Input and table border alternative. ### On-Dark - **On Dark** (`{colors.on-dark}` — #ffffff): Text/icon color on near-black CTAs and the selected calendar day. ## Typography ### Font Family The system runs two faces measured directly on the page: **Cal Sans** (the custom geometric display face, weight 600) for h1 + h2, and **Cal Sans UI Variable Light** (weight 300) for h3 titles and body copy. The light UI variable at weight 300 is the system's reading weight — body text feels thin and open rather than the typical weight-400 baseline. The split is strict: - Cal Sans 600 — h1 (64px), h2 (48px) display headlines - Cal Sans UI Variable Light 300 — h3 (18px) titles, body (14px) copy ### Hierarchy | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 64px | 600 | 1.1 | normal | Homepage h1 ("The better way to schedule your meetings") — Cal Sans | | `{typography.display-lg}` | 48px | 600 | 1.1 | normal | Section heads ("Your all-purpose scheduling app") — Cal Sans | | `{typography.title}` | 18px | 300 | 1.3 | -0.2px | h3 card titles, sub-headings — Cal Sans UI Variable Light | | `{typography.body}` | 14px | 300 | 1.4 | normal | Default running-text, button labels, nav links, captions — Cal Sans UI Variable Light | ### Principles Cal Sans 600 is the brand voice for every display headline; the light UI variable at weight 300 carries everything supporting. The boundary is functional — never set body copy at display weight, never set a headline in the light variable. The thin weight-300 body is part of the system's airy, confident feel. Only two distinct display sizes (64 / 48) and two supporting sizes (18 / 14) were measured. Intermediate roles (button vs. nav vs. caption) reuse the 14px body token; their exact weights were not separately measured (see Known Gaps). ### Note on Font Substitutes **Cal Sans** is licensed to Cal.com and not available as a public web font (flagged in fonts_licensed). The documented substitute is **Inter** — use Inter weight 600 for the display roles. For the **Cal Sans UI Variable Light** body face, use **Inter at weight 300** as the open-source approximation. The fallback stack walks `Inter, sans-serif`. The substitution preserves the weight signature (heavy display / light body) even though Cal Sans's geometric character differs from Inter's humanist forms. ## Layout ### Spacing System - **Base unit:** 2–4px grid; the most frequent measured step is 10px (`{spacing.sm}`), followed by 24px (`{spacing.lg}`) and 12px (`{spacing.base}`). - **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 10px · `{spacing.base}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px. - **Card internal padding:** `{spacing.lg}` (24px) for hero, feature, and testimonial cards; `{spacing.md}` (16px) for smaller icon cards. - **Section rhythm:** `{spacing.section}` (96px) is the largest measured step — used between major editorial bands; `{spacing.xxl}` (48px) for secondary gaps. ### Grid & Container - **Editorial body:** Centered content with floating white cards over the off-white canvas. - **Hero band:** Roughly 7/5 split — h1 + sub-head + button stack on the left, booking-widget card on the right. - **Feature grids:** 3-up at desktop ("Connect your calendar / Set your availability / Choose how to meet"), reducing on smaller widths. - **Icon-card grid:** 4-up ("…and so much more!" band). - **Testimonial grid:** Multi-column quote cards. ### Whitespace Philosophy The canvas-plus-floating-card model creates breathing room by separation: each white panel is inset within the off-white floor, so whitespace reads as margin around panels rather than padding inside one continuous band. Section padding reaches 96px at the largest rhythm step, keeping the long-scroll page calm. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat | No shadow — `{colors.canvas}` floor | Page background, top nav | | Card surface | White panel with low-alpha drop shadow | Hero card, feature cards, testimonial cards | | Subtle drop shadow | `rgba(34, 42, 53, 0.05) 0px 4px 8px 0px` plus a 1px ring `rgba(34, 42, 53, 0.08) 0px 0px 0px 1px` | Floating content cards (24 occurrences) | | Soft inset | `rgba(0, 0, 0, 0.16) 0px 1px 1.9px 0px inset` | Inset controls / duration pills (64 occurrences — the most frequent shadow) | | Bright inset highlight | `rgba(255, 255, 255, 0.15) 0px 2px 0px 0px inset` / `rgb(255, 255, 255) 0px 2px 0px 0px inset` | Top-edge highlight on dark CTAs to add a tactile lip | The elevation language is **soft and tactile** — inset highlights on buttons, faint drop shadows with a 1px hairline ring on floating cards. No heavy shadows, no glassmorphism. The white-on-off-white panel separation does most of the depth work. ### Decorative Depth - Embedded product fragments (calendar grid, availability toggles) carry their own internal chrome shadows — these are product UI, shown as content, not system tokens. - The dark CTAs use the white inset-highlight shadow to read as a slightly raised, pressable surface. ## Shapes ### Border Radius Scale | Token | Value | Use | |---|---|---| | `{rounded.xs}` | 2px | Smallest UI accents, inner chrome (35 occurrences) | | `{rounded.sm}` | 4px | Small inline controls, tags (39 occurrences) | | `{rounded.md}` | 8px | Primary CTA buttons, duration pills, calendar day cells (85 occurrences — the dominant radius) | | `{rounded.lg}` | 12px | Content cards — feature cards, testimonial cards (63 occurrences) | | `{rounded.xl}` | 16px | Hero booking-widget card (48 occurrences) | | `{rounded.xxl}` | 29px | Larger pill-ish buttons (the "Sign up with email" secondary CTA) (32 occurrences) | | `{rounded.pill}` | 100px | Badge pills ("Cal.com launches v6.5"), large rounded chips (61 occurrences) | | `{rounded.full}` | 9999px | Avatars, fully-round icon buttons (7 occurrences) | ### Photography Geometry Avatar photos (testimonial rows, booking-widget host) render as full circles (`{rounded.full}`). Product UI fragments inside cards retain their native chrome radii. ## Components ### Top Navigation **`top-nav`** — Transparent-over-canvas nav bar. Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body}`. Carries the "Cal.com" wordmark at left, a horizontal menu (Solutions, Enterprise, Cal.ai, Developer, Resources, Pricing) center, and a right cluster with a "Sign in" text link plus the dark "Get started" `{component.button-primary}`. **`nav-link`** — Inline nav menu items in `{colors.ink}`, type `{typography.body}`, transparent background. ### Buttons **`button-primary`** — The signature near-black CTA ("Sign up with Google", "Get started"). Background `{colors.primary}` (#111111), text `{colors.on-dark}`, type `{typography.body}`, rounded `{rounded.md}` (8px), padding 12px × 24px (derived from measured spacing tokens). Carries a white inset-highlight shadow on its top edge for a tactile lip. Pressed state `button-primary-active` shifts to `{colors.primary-active}` (#242424). **`button-secondary`** — The "Sign up with email" CTA. Background `{colors.surface-soft}` (#f5f5f5), text `{colors.ink}`, type `{typography.body}`, larger rounded `{rounded.xxl}` (29px), padding 12px × 24px. **`text-link`** — Inline anchor links in `{colors.link}` (#0000ee), type `{typography.body}`, transparent background. ### Cards & Containers **`hero-card`** — The large white panel that holds the entire hero band, floating over the canvas. Background `{colors.surface-card}`, rounded `{rounded.xl}` (16px), internal padding `{spacing.lg}` (24px), with the soft card drop shadow. **`booking-widget-card`** — The hero's right-side artifact: the actual Cal.com booking widget showing a host avatar, event title ("Photoshoot"), duration pills, location, timezone selector, and a May 2025 calendar grid. Background `{colors.surface-card}`, rounded `{rounded.xl}`, padding `{spacing.lg}`. This is real product chrome shown as content, not an illustration. **`feature-card`** — Used in the 3-up "appointment scheduling is easy" grid. Background `{colors.surface-card}`, rounded `{rounded.lg}` (12px), padding `{spacing.lg}` (24px). Carries an h3 title in `{typography.title}` and body copy in `{typography.body}`, plus an embedded product fragment. **`feature-icon-card`** — The smaller 4-up cards in the "…and so much more!" band. Background `{colors.surface-card}`, rounded `{rounded.lg}`, padding `{spacing.md}` (16px). An icon over a short `{typography.title}` label. **`testimonial-card`** — Customer-quote cards ("More elegant than Calendly…"). Background `{colors.surface-card}`, rounded `{rounded.lg}`, padding `{spacing.lg}`. Quote in `{typography.body}` over an avatar + name + role row. ### Tags / Badges **`badge-pill`** — The "Cal.com launches v6.5" announcement chip above the h1. Background `{colors.surface-card}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.pill}` (100px), padding 8px × 12px. With a thin hairline border. ### Product-UI Fragments **`duration-pill`** — The 15m / 30m / 45m / 1h selector inside the booking widget. Background `{colors.surface-soft}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.md}`, padding 8px × 12px. The selected pill flips to a white-fill chip with inset shadow. **`calendar-day-selected`** — The active day in the booking widget's month grid. Background `{colors.primary-active}` (#242424), text `{colors.on-dark}`, rounded `{rounded.md}`. Inactive/dimmed dates use `{colors.muted-cool-soft}`. ### Inputs & Forms **`text-input`** — Measured input control. Background `{colors.surface-card}` (#ffffff), text `{colors.ink}`, type `{typography.body}`, rounded 0px (measured — the raw input radius is square; styled form fields elsewhere likely apply a token radius), padding 10px × 12px (derived from measured spacing). ### Footer **`footer`** — Light footer that closes the page on the same canvas tone. Background `{colors.canvas}`, text `{colors.muted}`, type `{typography.body}`, padding `{spacing.xxl}` (48px). Carries the "Cal.com" wordmark and column link lists (Solutions / Use Cases / Resources / Company). Cal.com keeps the footer light rather than inverting to dark. ## Do's and Don'ts ### Do - Reserve `{colors.primary}` (#111111) for primary CTAs, with `{colors.primary-active}` (#242424) for the pressed state and the selected calendar day. - Float white cards (`{colors.surface-card}`) over the off-white canvas (`{colors.canvas}`) — the panel-on-canvas separation is the system's signature layout. - Use Cal Sans 600 for every display headline; use Cal Sans UI Variable Light 300 for h3 titles and body. Keep the heavy/light split strict. - Embed real product UI fragments (booking widget, calendar grid, availability toggles) inside cards rather than drawing illustrations of the product. - Apply the soft inset-highlight shadow on dark CTAs for the tactile pressable lip. - Keep avatars as full circles (`{rounded.full}`). - Use `{rounded.md}` (8px) as the workhorse radius for buttons and small controls; `{rounded.lg}` for content cards; `{rounded.xl}` for the hero booking card. ### Don't - Don't set the page background to pure white — the canvas is deliberately off-white (#f4f4f4) so white cards read as floating panels. - Don't bold the body copy beyond weight 300 (Cal Sans UI Variable Light) — the airy thin weight is intentional. - Don't bold display headlines beyond 600. - Don't use accent blue (`{colors.accent-blue}`, `{colors.link}`) on primary CTAs — the action layer is monochrome near-black. - Don't apply heavy shadows; the system uses low-alpha drop shadows with a 1px hairline ring and subtle insets only. - Don't add hover-state styling beyond the documented pressed state. ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile | < 768px | Hamburger nav; hero h1 64→~32px (derived — exact mobile size not measured); booking-widget card stacks below content; feature grids 1-up; footer columns collapse to 1 | | Tablet | 768–1024px | Top nav tightens; feature cards 2-up; icon-card grid wraps | | Desktop | 1024–1440px | Full top-nav; 3-up feature cards; 4-up icon cards; hero 7/5 split | | Wide | > 1440px | Same as desktop with more outer breathing room on the canvas | ### Touch Targets - `{component.button-primary}` reaches a comfortable tap height with 12px vertical padding on the 14px label. - `{component.duration-pill}` and `{component.calendar-day-selected}` are small inside the booking widget; their effective tap areas depend on the embedded product chrome. - Exact measured heights for buttons and inputs were not captured (see Known Gaps). ### Collapsing Strategy - Hero 7/5 split collapses to single column — h1 + sub-head + buttons first, then the booking-widget card below. - Feature grids reduce columns (3 → 2 → 1) rather than scaling cards down. - Floating white cards retain their radius and padding at every breakpoint; the canvas margin shrinks first. ### Image Behavior - Product UI fragments inside cards keep native aspect ratios; the cards resize. - Avatar photos crop to circles at every breakpoint. ## Iteration Guide 1. Focus on ONE component at a time. Reference its YAML key directly (`{component.feature-card}`, `{component.booking-widget-card}`). 2. Variants of an existing component (`-active`, `-disabled`) live as separate entries in `components:`. 3. Use `{token.refs}` everywhere — never inline hex in components. 4. Never document hover. Default and Active/Pressed states only. 5. Display stays Cal Sans 600; body stays Cal Sans UI Variable Light 300. The two-weight split does not blur. 6. The page floor stays off-white (`{colors.canvas}`); content stays on floating white cards (`{colors.surface-card}`). 7. When in doubt about emphasis: bigger Cal Sans before bolder. ## Known Gaps - **Cal Sans** and **Cal Sans UI Variable Light** are licensed to Cal.com and not available as public web fonts; Inter (weight 600 for display, weight 300 for body) is documented as the substitute. - Only four typographic roles were measured (h1 64, h2 48, h3 18, body 14). Distinct button, nav-link, and caption weights/sizes were not separately captured — components reuse the 14px body token as the best available match. - Letter-spacing was measured as "normal" on h1/h2/body and -0.2px on h3 only; the display headlines' visual tracking may differ in the live custom font. - Button and input heights were not measured; padding values (12px × 24px on buttons, 10px × 12px on inputs) are derived from the measured spacing scale. - The measured `input` component reports a 0px radius — likely a raw, unstyled field; styled form fields on the pricing/booking flows may apply a token radius. Form focus/error/disabled states were not extracted. - The browser-default link color (`{colors.link}` — #0000ee) and the sparse `{colors.accent-blue}` (#0099ff) appear at low frequency; their exact roles inside product fragments need a closer capture. - Mobile display type sizes are derived, not measured. - Animation and transition timings (calendar slot picker, availability toggles, integration grid reveals) are out of scope. - The pricing and features-collective-events pages were captured but produced no page-specific component measurements beyond the shared system tokens.