---
source: gallery_cal
---

# cal.com — Atmosphere

> Minimalist scheduling tool with monochrome black-and-white UI accented by a single vivid blue for links and icons.

> Extracted by [Coherent](https://getcoherent.design) from `https://cal.com` on 2026-07-24 03:50:45 UTC.
> Mode: `light` · captured in 4521ms · density: `comfortable`

<!-- coherent-extract: v1 -->

## Hero

**Detected via:** `h1` (64px)

> The better way to schedule your meetings

## Color

| Token | Hex | Role | Usage |
|-------|-----|------|-------|
| `#000000` | ![#000000](https://placehold.co/16x16/000000/000000.png) | neutral | body text |
| `#242424` | ![#242424](https://placehold.co/16x16/242424/242424.png) | text | h1 text |
| `#0000ee` | ![#0000ee](https://placehold.co/16x16/0000ee/0000ee.png) | brand | icon text |
| `#292929` | ![#292929](https://placehold.co/16x16/292929/292929.png) | text | p text |
| `#000000` | ![#000000](https://placehold.co/16x16/000000/000000.png) | neutral | button-secondary background |
| `#ffffff` | ![#ffffff](https://placehold.co/16x16/ffffff/ffffff.png) | text | select background |
| `#f4f4f4` | ![#f4f4f4](https://placehold.co/16x16/f4f4f4/f4f4f4.png) | background | body background |
| `#000000` | ![#000000](https://placehold.co/16x16/000000/000000.png) | neutral | button-primary background |
| `#ffffff` | ![#ffffff](https://placehold.co/16x16/ffffff/ffffff.png) | text | button-primary text |
| `#0000ee` | ![#0000ee](https://placehold.co/16x16/0000ee/0000ee.png) | brand | a text |

### Backgrounds

- **page** — `#f4f4f4`

## Typography

**Font families**

- sans-serif
- Times
- Cal Sans
- Cal Sans UI Variable Light
- Cal Sans UI Variable Light Placeholder

**Scale**

| Role | Size | Weight | Line height | Family |
|------|------|--------|-------------|--------|
| display | `64px` | 600 | `70.4px` | Cal Sans |
| h1 | `48px` | 600 | `52.8px` | Cal Sans |
| h2 | `24px` | 600 | `31.2px` | Cal Sans |
| h3 | `20px` | 600 | `20px` | Cal Sans |
| h4 | `18px` | 300 | `23.4px` | Cal Sans UI Variable Light |
| h5 | `16px` | 300 | `24px` | Cal Sans UI Variable Light |
| body | `14px` | 300 | `19.6px` | Cal Sans UI Variable Light |
| small | `12px` | 400 | `normal` | sans-serif |

## Spacing

Scale: `10px` · `12px` · `24px`

## Radius

Scale: `0px` · `2px` · `4px` · `6px` · `7px` · `8px` · `10px` · `12px` · `16px` · `29px` · `40px` · `100px`

## Shadows

- `rgba(0, 0, 0, 0.15) 0px 4px 12px 0px`
- `rgba(255, 255, 255, 0.15) 0px 2px 0px 0px inset`
- `rgba(36, 36, 36, 0.7) 0px 1px 5px -4px, rgba(36, 36, 36, 0.05) 0px 4px 8px 0px`
- `rgba(34, 42, 53, 0.05) 0px 4px 8px 0px`
- `rgb(255, 255, 255) 0px 2px 0px 0px inset`
- `rgba(0, 0, 0, 0) 0px 1px 3px 0px, rgba(0, 0, 0, 0) 0px 0px 2px 0px`
- `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 0px 2px 0px`
- `rgba(0, 0, 0, 0.1) 0px 0.693878px 2.08163px 0px, rgba(0, 0, 0, 0.06) 0px 0px 1.38776px 0px`
- `rgba(19, 19, 22, 0.7) 0px 1px 5px -4px, rgba(34, 42, 53, 0.1) 0px 0px 0px 1px, rgba(34, 42, 53, 0.05) 0px 4px 8px 0px`
- `rgba(0, 0, 0, 0.16) 0px 1px 1.9px 0px inset`
- `rgba(19, 19, 22, 0.7) 0px 1px 5px -4px, rgba(34, 42, 53, 0.08) 0px 0px 0px 1px, rgba(34, 42, 53, 0.05) 0px 4px 8px 0px`

## Gradients

- **linear** — `linear-gradient(rgb(41, 41, 41) 0%, rgb(36, 36, 36) 100%)`
- **linear** — `linear-gradient(rgb(247, 247, 248) 0%, rgb(234, 234, 235) 100%)`
- **linear** — `linear-gradient(rgb(252, 252, 252) 0%, rgb(255, 255, 255) 100%)`
- **radial** — `radial-gradient(50% 50%, rgba(255, 255, 255, 0) 87.1499%, rgb(255, 255, 255) 100%)`

## Breakpoints

Strategy: `mobile-first`

| Name | Min/Max width |
|------|---------------|
| md | `640px` |
| lg | `809px` |
| xl | `1199px` |

## Container widths

- **section** (page) — `100%`

## Borders

- `1px solid #767676`

## Z-index scale

- **z-0** — `0`
- **z-1** — `1`
- **z-2** — `2`
- **z-3** — `3`
- **z-4** — `4`
- **z-5** — `5`
- **z-9** — `9`
- **z-9999** — `9999`

## Voice

Tone: `practical` · `clear` · `straightforward` · `developer-oriented`

- *(hero)* "The better way to schedule your meetings"
- *(meta-description)* "A fully customizable scheduling software for individuals, businesses taking calls and developers building scheduling platforms where users meet users."
- *(body)* "With us, appointment scheduling is easy"
- *(cta)* "Install App"


---
Captured deterministically from computed CSS. Numerical fields (color, motion, spacing) reflect the live site at extraction time.