---
site: "Cal.com | Scheduling Software for Online Bookings"
url: "https://cal.com"
generated_at: "2026-06-25T08:26:30.335Z"
generator: "designlang@13.0.0"
intent: landing
material: material-you
library: vuetify
tokens:
  colors:
    primary: "#0000ee"
    secondary: "#0099ff"
    accent: "#d6ecfe"
    background: "#f4f4f4"
    foreground: "#000000"
  typography:
    sans: Inter
    mono: Roboto Mono
    base: 14
  spacing:
    base: 4
    scale: "[1, 40, 48, 80, 96]"
  radii:
    xs: 2
    md: 10
    lg: 16
    full: 40
  shadows:
    xs: "rgba(0, 0, 0, 0.16) 0px 1px 1.9px 0px inset"
---

# Overview

A **landing** page (heuristic confidence 0.45), dressed in **material-you** material (0.45).

Component library appears to be **vuetify** (0.9).

> "Cal.com | Scheduling Software for Online Bookings"

The author writes in a **neutral** voice; headings tend to be **unknown** case and **tight**.

Reading order detected on the source: `content → testimonial → content`.

Source: <https://cal.com>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#0000ee` | 448 |
| secondary | `#0099ff` | 6 |
| accent | `#d6ecfe` | 1 |
| background | `#f4f4f4` | — |
| foreground | `#000000` | — |

**Neutrals:** `#000000` · `#242424` · `#898989` · `#e5e7eb` · `#ffffff`

**Total unique colors detected:** 26.

# Typography

**Families**
- `Inter` · 247 uses
- `Cal Sans UI Variable Light` · 233 uses
- `Times` · 65 uses
- `Cal Sans` · 43 uses

**Body size:** `14px` / line-height `19.6px`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `64px` | `600` | `70.4px` |
| h2 | `48px` | `600` | `52.8px` |
| h3 | `18px` | `300` | `23.4px` |
| h4 | `16px` | `400` | `normal` |

# Layout

**Spacing base:** `4px` increments.
**Scale:** `1px` · `40px` · `48px` · `80px` · `96px`

**Layout primitives:** 5 grid containers · 1263 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

**Shadow scale**
- `xs` — `rgba(255, 255, 255, 0.15) 0px 2px 0px 0px inset`
- `xs` — `rgb(255, 255, 255) 0px 2px 0px 0px inset`
- `xs` — `rgba(0, 0, 0, 0.1) 0px 0.693878px 2.08163px 0px, rgba(0, 0, 0, 0.06) 0px 0px 1.38776px 0px`
- `xs` — `rgba(0, 0, 0, 0.16) 0px 1px 1.9px 0px inset`
- `sm` — `rgba(0, 0, 0, 0) 0px 1px 3px 0px, rgba(0, 0, 0, 0) 0px 0px 2px 0px`
- `sm` — `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 0px 2px 0px`

**Z-index layers:** 9 · ⚠ 1 issue(s)

# Shapes

**Radius scale**
- `xs` — `2px`
- `md` — `6px`
- `md` — `10px`
- `lg` — `16px`
- `full` — `29px`
- `full` — `40px`

# Components

**Detected patterns:** `buttons` · `cards` · `inputs` · `links` · `badges` · `avatars`


# Do's and Don'ts

**Do's**
- Write headings in **unknown** case, **tight** length.
- Address the reader with the pronoun posture **third-person**.
- Stay inside the **material-you** material — match shadow and radius habits.

**Don'ts**
- Don't 9 font families — consider limiting to 2 (heading + body).
- Don't 13 !important rules — prefer specificity over overrides.
- Don't 75% of css is unused — consider purging.
- Don't 7947 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v13.0.0 from <https://cal.com>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._