Near-monochrome scheduling: a white panel on warm gray, rounded Cal Sans display type, light-weight body, black key-cap buttons, and a live booking calendar card.
Browse Cal.com in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| 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 |
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.
"Cal Sans", ui-sans-serif, system-ui, sans-serif — the signature rounded geometric brand face."Cal Sans UI Variable Light", "Cal Sans", Inter, system-ui, sans-serif (a lighter variable cut used for body).#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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.