# Cal Design System

> High-contrast utility meets architectural minimalism, defined by stark black ink on a pure white canvas with precise geometric spacing.

**Source:** https://cal.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Cal.com employs a "monochrome-plus" aesthetic where the interface is almost entirely achromatic (#ffffff, #111111, #242424) until a functional action or link is required. The primary brand accent is a high-saturation blue (#0000ee), used exclusively for interactive text and specific UI highlights. Typography is the primary brand carrier, pairing the geometric character of **Cal Sans** for headlines with the utilitarian clarity of **Inter** for UI controls. Layouts are governed by a strict 4px base unit, utilizing generous 64px and 80px vertical rhythms to separate major content blocks.

## Signature DNA
1. **The "Cal Sans" Header** (Geometric, high-contrast headings at weight 600 used for all primary communication across the homepage and pricing pages).
2. **Ink-on-Paper Contrast** (The use of #111111 text on a #ffffff background provides a maximum readability ratio, mimicking professional stationery).
3. **Functional Blue** (The specific use of #0000ee as a "hyper-link" blue that signals interactivity without being used for decorative elements).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Page background and primary surface | 590 | 1.0 | computed_style |
| `{color.ink.primary}` | `#111111` | Primary text, borders, and dark surface fills | 184 | 1.0 | brand_page |
| `{color.ink.secondary}` | `#242424` | Secondary headings and UI text | 127 | 1.0 | brand_page |
| `{color.ink.muted}` | `#898989` | Deemphasized text and secondary icons | 443 | 1.0 | brand_page |
| `{color.surface.soft}` | `#f4f4f4` | Section backgrounds and input fills | 65 | 1.0 | brand_page |
| `{color.border.light}` | `#e1e2e3` | Subtle dividers and card outlines | 69 | 1.0 | brand_page |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent.blue}` | `#0000ee` | Primary interactive text and link color | 127 | 0.8 | computed_style |
| `{color.accent.sky}` | `#0099ff` | Secondary accent (decorative_only) | 13 | 0.8 | computed_style |
| `{color.accent.gray}` | `#374151` | Tertiary UI elements | 9 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Cal Sans | 600 | Display & Headings | Montserrat (SemiBold) | Proprietary |
| Cal Sans UI Variable Light | 300 | Subheadings & Body | Inter (Light) | Proprietary |
| Inter | 400, 500, 600 | UI Labels & Body | Inter (Google Fonts) | SIL OFL |
| Roboto Mono | 600 | Technical labels | JetBrains Mono | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.xl}` | 64px | 70.4px | normal | 600 | Hero H1 | `h1.framer-text` |
| `{type.display.lg}` | 48px | 52.8px | normal | 600 | Section Headers | `h2.framer-text` |
| `{type.heading.md}` | 32px | 38.4px | normal | 600 | Feature Titles | `h3.framer-text` |
| `{type.heading.sm}` | 24px | 31.2px | normal | 600 | Card Titles | `p.framer-text` |
| `{type.body.lg}` | 18px | 27px | -0.2px | 300 | Intro Paragraphs | `p.framer-text` |
| `{type.body.md}` | 16px | 24px | normal | 300 | Default Body | `p.framer-text` |
| `{type.body.sm}` | 14px | 21px | -0.2px | 300 | Small Body/Lists | `p.framer-text` |
| `{type.ui.label}` | 14px | 16px | normal | 500 | Button/Control Labels | `p.framer-text` |
| `{type.caption}` | 12px | 16.8px | normal | 300 | Meta data | `p.framer-text` |

### Principles
1. **Display is always Cal Sans.** Never use Inter for headlines larger than 20px.
2. **Lightweight Body.** Running text uses the 300 weight of Cal Sans UI Variable for an airy, modern feel.
3. **Mono for Meta.** Technical or status-based labels use Roboto Mono at weight 600 to distinguish from prose.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 379 |
| `{space.sm}` | 12px | 401 |
| `{space.md}` | 20px | 32 |
| `{space.lg}` | 32px | 6 |
| `{space.section}` | 64px | 74 |
| `{space.hero}` | 80px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Main surfaces / Sections | 1614 occurrences |
| `{radius.sm}` | 8px | Feature cards / Inputs | 37 occurrences |
| `{radius.md}` | 12px | Pricing cards / UI containers | 84 occurrences |
| `{radius.lg}` | 16px | Large content blocks | 29 occurrences |
| `{radius.pill}` | 9999px | Buttons / Badges | 8 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.inset}` | `rgba(0, 0, 0, 0.16) 0px 1px 1.9px 0px inset` | Input fields / Recessed UI | 64 occurrences |
| `{shadow.card}` | `rgba(36, 36, 36, 0.7) 0px 1px 5px -4px, rgba(36, 36, 36, 0.05) 0px 4px 8px 0px` | Floating cards | 24 occurrences |
| `{shadow.button}` | `rgba(255, 255, 255, 0.15) 0px 2px 0px 0px inset` | Primary buttons (glossy effect) | 18 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** All
**Spec:** Background `{color.ink.primary}` (#111111) / Text `{color.canvas}` (#ffffff) / Radius `{radius.pill}` (9999px) / Padding 12px 24px / Shadow `{shadow.button}`
**States observed:** Default | Hover: captured

#### Ghost Button
**Role:** Secondary actions
**Pages observed:** All
**Spec:** Background transparent / Text `{color.ink.primary}` (#111111) / Border 1px `{color.border.light}` (#e1e2e3) / Radius `{radius.pill}` (9999px)

### Tier 2: Patterns

#### Feature Card
**Role:** Benefit highlights
**Pages observed:** Homepage
**Spec:** Background `{color.canvas}` (#ffffff) / Radius `{radius.md}` (12px) / Shadow `{shadow.card}` / Padding 24px

#### Pricing Tier Card
**Role:** Subscription selection
**Pages observed:** Pricing
**Spec:** Background `{color.canvas}` (#ffffff) / Border 1px `{color.border.light}` (#e1e2e3) / Radius `{radius.md}` (12px) / Padding 32px

### Tier 3: Surface-specific

#### FAQ Accordion
**Role:** Information disclosure
**Pages observed:** Homepage
**Spec:** Background transparent / Text `{color.ink.primary}` (#111111) / Border-bottom 1px `{color.border.light}` (#e1e2e3) / Typography `{type.heading.sm}` (20px/600)

#### Integration Badge
**Role:** App store ecosystem
**Pages observed:** Homepage
**Spec:** Background `{color.surface.soft}` (#f4f4f4) / Radius `{radius.sm}` (8px) / Padding 8px 12px

## Layout
| Property | Value |
|---|---|
| Max-width | 1200px |
| Section Padding | 80px (Vertical) |
| Grid Gutter | 24px |

## Do's
- Use `#0000ee` for all text-based links to ensure functional consistency.
- Apply `Cal Sans` at weight 600 for all display headings.
- Maintain a white background (`#ffffff`) for the primary content canvas.
- Use `{radius.pill}` for all primary action buttons.
- Separate major sections with exactly 64px or 80px of whitespace.

## Don'ts
- **Wrong:** Using `#0000ee` as a background fill for buttons. **Right:** Use `#111111`. **Reason:** The blue is reserved for text-level interactivity.
- **Wrong:** Using a sub-brand color (like an orange or green) for parent-level navigation. **Right:** Use `#111111`.
- Do not use `Inter` for headlines larger than 20px.
- Do not use shadows on foundational section backgrounds; keep the canvas flat.

## Quick start

### CSS Custom Properties
```css
:root {
  --cal-white: #ffffff;
  --cal-black: #111111;
  --cal-gray-muted: #898989;
  --cal-blue-link: #0000ee;
  --cal-font-display: "Cal Sans", sans-serif;
  --cal-font-body: "Inter", sans-serif;
  --cal-radius-pill: 9999px;
  --cal-radius-card: 12px;
}
```

## Known gaps
- Hover and Active states for secondary navigation items were not fully captured in the computed style logs.
- Mobile-specific breakpoint transitions for complex pricing tables were not detailed in the source evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://cal.com | 1440px | 2026-06-06 |
| Pricing | https://cal.com/pricing | 1440px | 2026-06-06 |
| About | https://cal.com/about | 1440px | 2026-06-06 |