# Cal.com — Marketing Site Design Spec

> Source: cal.com (live DOM, computed styles; built on Framer), 2026-07-08 (desktop 1512px).
> Coverage: marketing home + nav + hero + booking demo card. Dashboard: pending login (`needs-dashboard`). Responsive: breakpoints inferred (Framer); mobile rendering not verified.

## 1. Visual Theme & Atmosphere

Bright, calm, near-monochrome scheduling product. The page floats a white content panel on a light warm-gray canvas, with the whole hero set in Cal Sans — a friendly, rounded geometric display face that is the single strongest brand signal. There is almost no chrome color: everything is black text, gray secondary text, white surfaces, and black pill buttons. Buttons carry a subtle top-lit inset highlight that gives them a soft physical "key-cap" quality. It reads as open-source-clean and approachable rather than corporate. Feels: bright, rounded, calm, approachable.

## 2. Color Palette & Roles

### Neutrals (light theme)
| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#f4f4f4` | Page background (warm light gray) |
| surface | `#ffffff` | Content panel, cards, demo booking card |
| surface-100 | `#f5f5f5` | Badge pill, inset chips |
| text-primary | `#242424` | Headings, body |
| text-muted | `#898989` | Subheads, captions, secondary copy |
| btn-dark | `#0a0a0a`–`#141414` | Primary button fill (near-black) |
| btn-light-top | `#f7f7f8` | Secondary button gradient top |
| btn-light-bottom | `#eaeaeb` | Secondary button gradient bottom |
| chip-fill | `rgba(14,14,14,.07)` | Ghost/switcher fill (e.g. language) |
| chip-border | `rgba(20,20,20,.15)` | Ghost/switcher border |

### Accent
Effectively none — the palette is monochrome black / white / gray. Color appears only in third-party marks (Trustpilot green, Google "G") and product screenshots, never in the brand chrome itself.

Rule: brand chrome is monochrome; primary = black, everything else is gray on white.
Rule: buttons get a light inset top-highlight rather than a colored border.

## 3. Typography Rules

- Display/heading stack: `"Cal Sans", ui-sans-serif, system-ui, sans-serif` — the signature rounded geometric brand face.
- Body/UI stack: `"Cal Sans UI Variable Light", "Cal Sans", Inter, system-ui, sans-serif` (a lighter variable cut used for body).
- Body: 16px / 24px / weight 300 / `#898989` for supporting copy.

| Role | Size/Line | Weight | Family |
|---|---|---|---|
| Display (h1) | 64 / 70.4 | 600 | Cal Sans |
| Section (h2) | 48 / 52.8 | 600 | Cal Sans |
| Feature title (h3) | 18 / 23.4 | 300 | Cal Sans UI Variable Light |
| Body / sub | 16 / 24 | 300 | Cal Sans UI Variable Light |
| UI / nav | 14 | 300–400 | Cal Sans UI Variable Light |

Patterns: display leading is tight (~1.1×). Body copy runs unusually light (weight 300). Case is normal — no all-caps eyebrows.

## 4. Component Stylings

### Buttons
- **Primary (dark)**: near-black fill (`#0a0a0a`–`#141414`), white text, radius 12px, ~36–48px tall, padding `8px 12px`. Signature inset top-highlight: `box-shadow: rgba(255,255,255,.15) 0 2px 0 0 inset`. Used for "Get started", "Sign up with Google".
- **Secondary (light)**: `linear-gradient(#f7f7f8, #eaeaeb)`, dark text, radius 12px, inset highlight `rgb(255,255,255) 0 2px 0 0 inset`, subtle 1px border. Used for "Sign up with email".
- **Ghost / switcher**: bg `rgba(14,14,14,.07)`, border 1px `rgba(20,20,20,.15)`, radius 8px, h ~34px, text `#292929`.

### Badge / pill
- bg `#f5f5f5`, radius 9999px (full pill), soft shadow `rgba(34,42,53,.05) 0 4px 8px`, small chevron, 12px text. Used for the "Cal.com launches vX" announcement.

### Cards / panels
- White bg, generous corner radius (~16–20px), soft ambient shadow, comfortable padding. The hero's live booking demo card shows an avatar, event title, duration segmented control (15m/30m/45m/1h), location row, and a month calendar grid — dense but airy.

### Calendar grid (signature product component)
- Day cells with muted labels (SUN…SAT), selectable days as soft rounded squares, hover/selected = light gray fill, current day marked with a small dot.

## 5. Layout Principles

- Content lives inside a centered white panel (max ~1180px) floating on the `#f4f4f4` canvas, with rounded top corners and a hairline edge.
- Hero: two-column — left headline (64px Cal Sans) + light-300 subhead + stacked dual CTA (black primary, light secondary) + "No credit card required"; right a live booking demo card.
- Trust row: Trustpilot + rating logos beneath the CTAs.
- Nav: transparent over the panel, ~72px tall; logo left ("Cal.com" wordmark), center dropdown links (Solutions/Enterprise/Cal.ai/Developer/Resources/Pricing), right "Sign in" text + black "Get started" pill.
- Generous whitespace and 4/8px spacing rhythm.

## 6. Depth & Elevation

- Radii: buttons 12px, switcher chips 8px, badges 9999px (pill), cards ~16–20px.
- Elevation: soft, low-contrast ambient shadows (`rgba(34,42,53,.05) 0 4px 8px` on pills; larger diffuse shadows on cards) plus the characteristic inset top-highlight on buttons.
- Control heights: buttons ~36–48px; switcher ~34px.

## 7. Motion

- Framer-driven; gentle. Micro-transitions on hover (color/background/transform) and scroll-in fades/rises for sections. No aggressive parallax on the hero.
- The booking demo card animates its selection state (duration + calendar day) as a live product preview.
- (Exact durations/easings not fully captured — Framer inlines them per-component.)

## 8. Backgrounds, Effects & WebGL

- Flat light canvas `#f4f4f4` with a white content panel; no WebGL/canvas, no background video.
- Depth comes from soft ambient shadows and button inset highlights, not gradients — the only gradient is the subtle light button fill (`#f7f7f8 → #eaeaeb`).
- No grain, blur, or blend-mode effects observed in the hero.

## 9. Do's and Don'ts

### Do
- Float a white content panel on a warm light-gray `#f4f4f4` canvas.
- Set headlines in Cal Sans (rounded geometric), weight 600, at ~1.1 leading; keep body copy light (weight 300) in gray `#898989`.
- Make the primary button black with white text, radius 12px, and a `rgba(255,255,255,.15) 0 2px 0 inset` top-highlight.
- Make the secondary button a light `#f7f7f8→#eaeaeb` gradient with the same inset highlight.
- Use full-pill badges (`#f5f5f5`, radius 9999px) with a soft `rgba(34,42,53,.05)` shadow for announcements.
- Keep everything monochrome — black, white, gray only.
- Use soft low-contrast ambient shadows on cards; keep lots of whitespace.

### Don't
- Don't introduce a brand accent color — the chrome is monochrome.
- Don't use heavy body weights; supporting copy is light (300).
- Don't use hard/dark borders; depth is shadow + inset-highlight, not outline.
- Don't set the display type in a generic sans — Cal Sans (rounded geometric) is the brand.
- Don't crowd the hero — the white panel and generous spacing are the look.

## 10. Responsive Behavior

- Framer breakpoints (desktop / tablet / phone). Nav collapses to a hamburger; hero stacks to single column with the demo card below.
- Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#f4f4f4` · Surface `#ffffff` · Text `#242424` · Muted `#898989` · Primary btn `#0a0a0a` · No accent (monochrome)
- Fonts: Cal Sans (display, 600) + Cal Sans UI Variable Light (body, 300) · Body: 16/24 · Radius: 12px button / ~16px card / 9999px pill
- Primary btn: black + `rgba(255,255,255,.15) 0 2px 0 inset` · Secondary: `linear-gradient(#f7f7f8,#eaeaeb)` + white inset

<cal-com_design_language>
Use the Cal.com design language: a bright, near-monochrome scheduling aesthetic. Float a white content panel on a warm light-gray #f4f4f4 canvas. Text is near-black #242424 with light gray #898989 supporting copy. Headlines are set in Cal Sans — a friendly rounded geometric display face, weight 600, tight ~1.1 leading, up to 64px — while body copy runs unusually light (weight 300) in a lighter variable cut. There is no brand accent color: primary buttons are near-black #0a0a0a with white text at radius 12px, carrying a signature inset top-highlight box-shadow rgba(255,255,255,.15) 0 2px 0 inset for a soft key-cap feel; secondary buttons are a light #f7f7f8→#eaeaeb gradient with the same inset highlight; announcement badges are full pills (#f5f5f5, radius 9999px) with a soft rgba(34,42,53,.05) shadow. Cards are white with generous ~16px radii and low-contrast ambient shadows, never hard borders. Layout is airy with heavy whitespace; the hero pairs a left headline + stacked CTAs with a live booking demo card (segmented duration control + month calendar). Feels: bright, rounded, calm, approachable. Avoid: any brand accent color, heavy body weights, hard dark borders, or a generic sans in place of Cal Sans.
</cal-com_design_language>