# Cal.com design system: colors, fonts and tokens

> Cal.com's website (cal.com) uses a light interface with #0000ee as its primary color and Inter as the main typeface, with Cal Sans UI Variable Light alongside it. designlang measured 11 font sizes from 8px to 64px, 5 spacing values, 11 corner radii.

Source: https://cal.com, captured 25 June 2026. Page: https://designlang.app/design-system/cal

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#0000ee` | 448 |
| Secondary | `#0099ff` | 6 |
| Accent | `#d6ecfe` | 1 |

Neutrals: `#000000`, `#242424`, `#898989`, `#e5e7eb`, `#ffffff`, `#111111`, `#f4f4f4`, `#374151`, `#d3d3d3`, `#808080`

Backgrounds: `#f4f4f4`, `#ffffff`, `#f8f9fa`

## Fonts

- Inter (sans), 247 elements
- Cal Sans UI Variable Light (sans), 233 elements
- Cal Sans (sans), 43 elements
- Matter Regular (sans), 43 elements
- Matter Medium (sans), 24 elements
- Matter SemiBold (sans), 8 elements
- Roboto Mono (mono), 3 elements
- CUSTOMV2;Cal Sans UI Regular (sans), 2 elements

## Type scale

| Size | Weight | Line height | Tracking | Used on |
|---|---|---|---|---|
| 64px | 600 | 70.4px | normal | h1 |
| 48px | 600 | 52.8px | normal | h2 |
| 24px | 600 | 31.2px | normal | p |
| 20px | 600 | 20px | 0.2px | p |
| 18px | 300 | 23.4px | -0.2px | h3, p |
| 16px | 400 | normal | normal | html, head, meta, title |
| 14px | 300 | 19.6px | normal | p, a, h3, div |
| 12px | 400 | normal | normal | body, script, noscript, button |
| 10px | 400 | 14px | normal | p |
| 9.71px | 500 | 11.1px | normal | p |
| 8px | 400 | 11.2px | normal | p |

## Spacing

1px, 40px, 48px, 80px, 96px

## Radii

2px, 6px, 10px, 16px, 29px, 40px, 100px, 120px, pill, pill, pill

## Motion

Feel: mixed. Durations: 300ms.

## Audit

Overall 78/100 (grade C).

- Color Discipline: 80/100
- Typography Consistency: 50/100
- Spacing System: 100/100
- Shadow Consistency: 78/100
- Border Radius Consistency: 65/100
- Accessibility: 100/100
- CSS Tokenization: 100/100

## CSS variables

```css
:root {
  --color-primary: #0000ee;
  --color-secondary: #0099ff;
  --color-accent: #d6ecfe;
  --color-background: #f4f4f4;
  --color-text: #000000;
  --color-neutral-1: #000000;
  --color-neutral-2: #242424;
  --color-neutral-3: #898989;
  --color-neutral-4: #e5e7eb;
  --font-primary: "Inter", sans-serif;
  --font-secondary: "Cal Sans UI Variable Light", sans-serif;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 10px;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/cal-com/cal-com-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/cal-com/cal-com-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/cal-com/cal-com-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/cal-com/cal-com-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/cal-com/cal-com-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/cal-com/cal-com-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/cal-com/cal-com-DESIGN.md)

Regenerate: `npx designlang cal.com`