# Cal.com — DESIGN.md

A calm grey-and-white scheduler where the calendar itself is the interface.

Independent reference guide from browser captures and computed styles. Not an official brand guide. Values describe the captured desktop states; responsive rules below are implementation recommendations.

Captured: 2026-09-24

## Agent task
Build an original interface using this visual language. Inspect the existing stack and conventions first. Use the included screenshots to understand hierarchy, composition and density. Keep your own branding and content.

## Font
Observed families: **Cal Sans** for marketing headings, **Cal Sans UI Variable Light** for marketing text and **Inter** on the booking page. The App Store resolves to CSS family aliases (fontSans, fontHeading) whose face was not identified. A family name is not a bundled font licence. Use an available, licensed installation or a system sans-serif fallback.

## Marketing — Light, card-on-canvas

### Observed palette
- Canvas: `#f4f4f4`
- Card: `#ffffff`
- Heading text: `#242424`
- Body and nav text: `#292929`
- Secondary text: `#898989`
- Primary button gradient: `#292929 → #242424`
- Secondary button gradient: `#f7f7f8 → #eaeaeb`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Hero heading (Cal Sans) | 64px / 70.4px | 600 | normal |
| Section heading (Cal Sans) | 48px / 52.8px | 600 | normal |
| Card title | 18px / 23.4px | 300 | −0.2px |
| Lead and card body | 16px / 24px | 300 | normal |
| Nav link | 14px / 19.6px | 300 | normal |
| Button label | 14px / 20px | 300 | normal |
| Section badge | 12px / 12px | 300 | normal |

### Layout & hierarchy
- Every section is a white card with a 16px radius on a #f4f4f4 canvas, framed by thin vertical and horizontal guide lines with small plus marks at the joins.
- Centred section headers follow one pattern: a small pill badge ("How it works", "Benefits", "FAQ"), a 48px Cal Sans heading, one grey sentence, then a dark Get started and a light Book a demo button.
- The hero splits 50 / 50: headline, sign-up buttons and "No credit card required" on the left; a booking widget that bleeds off the card edge on the right, with review ratings under it.

### Components & behavior
- Primary button: 36px high, 12px radius, #292929 → #242424 vertical gradient, white 14px / 300 label, trailing chevron.
- Secondary button: same size and radius with a #f7f7f8 → #eaeaeb gradient and dark label.
- Feature cards: white, 16px radius, 24px padding, a monospace-style number chip (01, 02, 03), title, grey body and an illustration at the bottom.
- FAQ is a single-column accordion of rows with plus icons; the first row is open on the homepage.

## Product — Light, neutral booking surface

### Observed palette
- Canvas: `lab(98.26 0 0) (≈ #fafafa, converted)`
- Card and slot fill: `#ffffff`
- Strong text: `#070a0d`
- Body text: `#3c3e44`
- Muted text: `#6b7280`
- Bookable day: `#e5e7eb`
- Selected day and Confirm: `#292929`
- Input and slot border: `#d1d5db`
- App Store text and Install button: `lab(15.204 0 0) (≈ #262626, converted)`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Event title | 20px / 28px | 600 | normal |
| Month label | 16px / 24px | 600 | normal |
| Description and meta | 14px / 20px | 400 (meta 500) | normal |
| Day number | 14px / 20px | 500 (unavailable 300) | normal |
| Slot and button label | 14px / 14px | 500 | normal |
| Form label | 14px / 14px | 500 | normal |
| Legal line | 12px / 16px | 400 | normal |
| App Store title | 20px / 28px | 700 | 0.5px |
| App detail name | 30px / 36px | 700 | normal |

### Layout & hierarchy
- The booking page is one bordered card centred on a light grey canvas: event details, month calendar and a scrolling slot column side by side; view and overlay controls float at the top right of the page.
- Week and column views go full-bleed: event details and a mini calendar move into a left rail and the calendar or day columns fill the rest.
- The App Store is a single column: title and search, then horizontally scrolling rows (category photo tiles, Most popular, Recently added) with arrow buttons; category pages switch to a three-column card grid.

### Components & behavior
- Day tile: 59 × 59px, 8px radius; bookable days #e5e7eb with 500 weight, the selected day #292929 with white text, today marked with a dot, unavailable days plain with 300 weight.
- Slot button: 36px high, 10px radius, 1px #d1d5db border, white fill, centred 14px / 500 time.
- Segmented toggles (15m / 30m, 12h / 24h, month / week / column) use a grey pill behind the active item; duration pills are 30px high with a 4px radius.
- Form: 32px inputs with 10px radius and 1px #d1d5db border, 14px / 500 labels with a required asterisk, a ghost Back and a dark Confirm button (32px, 10px radius).

## Implementation recommendations
- Use your own name, logo, copy and sample data. Recreate the visual principles and interaction structure.
- Use semantic HTML, visible focus states, labelled controls and accessible contrast.
- Recommended: use a 4px spacing base, collapse rails on small screens, stack grids and allow tables to scroll.
- Recommended: implement loading, validation, error, success, empty and disabled states; do not infer unobserved backend behavior.
- Use the supplied font only when available and appropriately licensed; otherwise use a system sans-serif fallback.
- Treat desktop measurements as reference values, not a complete responsive specification.

## Interaction inventory
- Team page: Cal.com's own team page: logo, "Team" and "The team behind this very product.", then a bordered list of five event types, each with a duration chip, a scheduling-type chip (Round robin, Collective, seats) and a stack of member avatars. Several event names are internal placeholders (volnei-2, xzc, col). An "OR" divider leads to "Book a team member instead" (not opened, as it lists individuals). The flow starts from the Acme Introductionary Call row. Screenshot: `captures/calcom-product-team.jpg`.
- Booking page, 30m and 12h: The same demo event in a different state from the flow: 30m chosen, the 12h format on and Thu 1 Oct picked, so slots read 1:00am, 1:30am and so on. The small team avatar under the banner links back to the team page. Screenshot: `captures/calcom-product-booking.jpg`.
- App Store: Public App Store: "App store" title and a search field, a carousel of photo tiles for featured categories (Conferencing 24 apps, Automation 21, Analytics 12, Other 12, Calendar 9, Crm 6 ...), then "Most popular" and "Recently added" carousels of app cards, each with an icon, name, two-line description and a full-width Details button. Screenshot: `captures/calcom-product-apps.jpg`.
- App Store search: Typing "zoom" in the search field replaces the carousels with a "Search" heading, a row of category filter pills (All selected) and one result card with the match highlighted in yellow. Screenshot: `captures/calcom-product-search.jpg`.
- App category: Conferencing: A breadcrumb "App store / Conferencing apps" with a back arrow over a three-column grid of app cards (Google Meet, Zoom Video, Microsoft 365/Teams, Discord, Facetime, Jitsi Video, Whereby, Riverside, Skype ...). Screenshot: `captures/calcom-product-category.jpg`.
- App detail: Zoom Video: Two-column detail: a grey media column with screenshots on the left; on the right the app icon and name, a Conferencing badge, "Published by Cal.com", a dark Install app button (not clicked), description, Pricing (Free), Contact links and a disclaimer with a Report app link. Screenshot: `captures/calcom-product-app.jpg`.

## Avoid
- Do not apply the 64px Cal Sans marketing headline scale to the dense booking and App Store screens; they use 14–20px Inter-style text.
- Do not present converted values as exact; the product canvas and App Store text were measured in `lab()` and their hex equivalents are conversions.
- Do not treat screenshots as editable components or original source code.
- Do not assume uncaptured hover states, mobile layouts, signed-in behavior, booking confirmation or rescheduling flows.

## Reference pages
- Homepage: https://cal.com/
- Pricing: https://cal.com/pricing
- Enterprise: https://cal.com/enterprise

## Capture scope
Logged-out desktop journey on Cal.com's own public demo event ("Acme Introductionary Call" on the Cal.com team page): month view, date, time slots, duration, timezone, week and column views, and the booking form captured empty. Nothing was typed or confirmed, so confirmation, rescheduling and every signed-in screen (event types, availability, bookings, settings) are not captured. Slot times depend on the day of capture and the visitor timezone (Europe/London).

## Format inspiration
- https://github.com/voltagent/awesome-design-md
- https://getdesign.md/

The structure is inspired by these resources. The guide text and values come from this independent capture pass. No proprietary source code or font files are included.