---
title: "Cal.com design system"
variant: extended
source: https://cal.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/cal-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Cal.com · Design System

> Quiet monochrome, clear paths to a meeting.

**Theme:** light · **Industry:** saas · **Source:** https://cal.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Cal.com pairs a pale gray canvas and bold black typography with white cards that make scheduling interfaces feel approachable. A long, product-led homepage moves from a booking-focused hero into feature explanations, testimonials, FAQs, and a closing CTA.

## North star

Keep the page calm and grayscale, using bold Cal Sans headlines, white rounded product cards, and dark pill CTAs to make each next step obvious.

## Overview

The page is built around a quiet grayscale palette: a #f4f4f4 canvas, white panels, charcoal headings, muted supporting text, and fine gray dividers. The blue accent is scarce in the first viewport, so the overall identity reads as monochrome rather than brightly branded. Cal Sans supplies the prominent, compact headlines, while a light UI sans keeps descriptive copy restrained. A centered, bounded content area organizes the long page into distinct bands, with a spacious hero and dense product examples balanced by generous transitions. White cards hold feature details, testimonials, and interface previews; their rounded corners and subtle shadows add separation without heavy outlines. Product imagery is mostly scheduling UI mockups and small integration marks, with bright calendar states and review badges appearing inside those examples rather than defining the site palette. Repeated dark pill CTAs provide strong, consistent action points.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Quiet Mist | `#f4f4f4` | `--color-quiet-mist` | brand | Main page canvas and pale neutral ground around the white content panels. |
| Soft Graphite | `#898989` | `--color-soft-graphite` | neutral | Muted body copy, supporting descriptions, and secondary interface labels. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Hero panel, feature and testimonial cards, and light button surfaces. |
| Fine Silver | `#d3d3d3` | `--color-fine-silver` | neutral | Subtle borders and hairline separations around panels and page sections. |
| Cal Ink | `#242424` | `--color-cal-ink` | brand | Primary headings, strong text, and dark actions against light surfaces. |
| Booking Blue | `#0099ff` | `--color-booking-blue` | accent | Sparse link accent; not a dominant color in the first viewport. |
| Smoked Charcoal | `#292929` | `--color-smoked-charcoal` | neutral | Near-black gradient and supporting dark text or link details. |
| Deep Label | `#111111` | `--color-deep-label` | neutral | Occasional link and text color for secondary UI labels. |
| Cloud Gray | `#eaeaeb` | `--color-cloud-gray` | neutral | Pale gradient endpoint and minor background details in interface previews. |

### Semantic aliases

`--color-canvas` → `#f4f4f4` (Quiet Mist) · `--color-surface` → `#ffffff` (Paper White) · `--color-text` → `#242424` (Cal Ink) · `--color-text-muted` → `#898989` (Soft Graphite) · `--color-text-subtle` → `#111111` (Deep Label) · `--color-border` → `#d3d3d3` (Fine Silver) · `--color-accent` → `#0099ff` (Booking Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#242424` | `#f4f4f4` | 14.11:1 | AAA |
| `#242424` | `#ffffff` | 15.52:1 | AAA |
| `#898989` | `#f4f4f4` | 3.18:1 | AA-large |
| `#898989` | `#ffffff` | 3.5:1 | AA-large |
| `#111111` | `#f4f4f4` | 17.17:1 | AAA |
| `#111111` | `#ffffff` | 18.88:1 | AAA |
| `#0099ff` | `#f4f4f4` | 2.73:1 | fail |
| `#0099ff` | `#ffffff` | 3:1 | AA-large |

### Gradients

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

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Cal Sans UI Variable Light | `--font-body` | webfont | 300 | Most body copy, captions, and links across the page. | Inter |
| Cal Sans | `--font-display` | webfont | 600, 400 | Display headlines and section headings. | Plus Jakarta Sans |
| Matter Regular | `--font-matter-regular` | webfont | 400 | Small supporting UI text and occasional interface labels. | Inter |
| Inter | `--font-inter` | webfont | 500, 400, 600 | Secondary interface and embedded product-preview text. | Inter |
| Matter SemiBold | `--font-matter-semibold` | webfont | 400 | Emphasized interface labels and compact supporting text. | Inter |

- **Cal Sans UI Variable Light:** Light 300 weight and relaxed line spacing; sentence case, with a quiet supporting hierarchy.
- **Cal Sans:** Measured 600 weight for prominent titles; bold, compact, and generally sentence case.
- **Matter Regular:** Regular sans-serif treatment; subordinate to the Cal Sans headline and body system.
- **Inter:** Measured regular, medium, and semibold weights; used in small utility-style labels.
- **Matter SemiBold:** Semibold emphasis in UI contexts; keep it secondary to the page's large Cal Sans headings.

### Type scale — Augmented Fourth (ratio ≈ 1.414, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 600 | 1.1 | 0 | — | Cal Sans | Oversized hero headline that introduces the scheduling proposition. |
| h1 | 48px | 600 | 1.1 | 0 | — | Cal Sans | Primary hero title and dominant page-level heading. |
| h2 | 24px | 600 | 1.3 | 0 | — | Cal Sans | Section titles for features, testimonials, and FAQs. |
| h3 | 20px | 600 | 1 | 0.01em | — | Cal Sans | Short card titles and nested feature headings. |
| body | 16px | 300 | 1.5 | 0 | — | Cal Sans UI Variable Light | Main explanatory paragraphs and supporting product descriptions. |
| caption | 14px | 300 | 1.4 | 0 | — | Cal Sans UI Variable Light | Compact labels, helper copy, and small card metadata. |
| link | 16px | 300 | 1.5 | 0 | — | Cal Sans UI Variable Light | Text links and secondary actions, typically in restrained UI styling. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 16, 20, 24, 48 px.
- Section rhythm 80px · element gap 10px · card padding 24px · max content width 1048px.

The page uses a centered, bounded content frame, with measured maximum width of 1048px. A spacious hero pairs left-aligned headline, copy, and signup actions with a booking-calendar product preview on the right. Below, full-width section bands alternate with contained white panels, card grids, and centered section introductions. The 80px section gap and comfortable density give the long homepage breathing room, while interface previews and review cards create locally denser areas. Headings and descriptions are predominantly left-aligned within content, with centered alignment for several feature and CTA introductions.

## Shape & elevation

- Radius: button `7px` · card `16px` · media `8px` · link `12px` · xs `2px` · sm `3px` · md `4px` · lg `6px` · xl `7px` · 2xl `8px` · pill `9999px`
- Shadow `inset` (other): `rgba(0, 0, 0, 0.16) 0px 1px 1.9px 0px inset`
- Shadow `md` (card): `rgba(36, 36, 36, 0.7) 0px 1px 5px -4px, rgba(36, 36, 36, 0.05) 0px 4px 8px 0px`
- Shadow `inset-2` (link): `rgba(255, 255, 255, 0.15) 0px 2px 0px 0px inset`
- Shadow `md-2` (other): `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`
- Shadow `sm` (button, link): `rgba(34, 42, 53, 0.05) 0px 4px 8px 0px`
- Shadow `inset-3` (link): `rgb(255, 255, 255) 0px 2px 0px 0px inset`

Cards are separated mainly by white-on-pale-gray contrast, rounded corners, and subtle measured shadows. Fine gray borders and hairlines define panel edges without making the layout feel boxed in. Dark pill CTAs sit distinctly above the page, while the overall surface treatment remains soft rather than heavily layered.

## Imagery

Product imagery is primarily UI mockups: booking pages, calendars, availability controls, and small integration logos. The hero places a detailed scheduling preview beside the main message; later feature cards embed smaller cropped interface examples. Treatment stays bright and restrained, with white surfaces and pale dividers. Trust badges and colorful calendar selections appear within examples, not as the core brand palette.

## Components

### Top navigation

Compact brand-led header with grouped text links, sign-in, and a dark rounded Get started action.

### Hero booking panel

Large white rounded panel pairing a left-aligned headline, supporting copy, signup actions, and a calendar-booking preview.

### Signup actions

Prominent dark pill for Google signup, paired with a lighter email option and subdued reassurance text.

### How-it-works cards

Three white rounded cards explain calendar connection, availability, and meeting choice with compact UI previews.

### Feature preview cards

White product cards combine short feature descriptions with embedded scheduling settings and booking interface examples.

### Testimonial cards

Quote-led white cards use compact identity details and restrained borders or shadows to organize customer proof.

### FAQ list

Stacked question rows use text-first presentation and simple expand/collapse indicators.

### Measured component styles

- **Primary button** (“How it works”): background #ffffff · text #000000 · radius 9999px · padding 4px 12px 4px 8px · 400 12px sans-serif · shadow rgba(34, 42, 53, 0.05) 0px 4px 8px 0px
- **Secondary button** (“Android”): background #fdfdfd · text #0000ee · radius 7px · padding 0px 10px · 400 12px sans-serif
- **Link** (“Get started”): transparent background · text #0000ee · radius 12px · padding 8px 12px · 400 12px sans-serif · shadow rgba(255, 255, 255, 0.15) 0px 2px 0px 0px inset
- **Card** (“01 Connect your calendar We'll handle al”): background #ffffff · text #000000 · radius 16px · padding 24px · 400 12px sans-serif · shadow rgba(36, 36, 36, 0.7) 0px 1px 5px -4px, rgba(36, 36, 36, 0.05) 0px 4px 8px 0px

## Do

- Use #f4f4f4 as the calm page canvas.
- Set primary headings in bold Cal Sans or a close substitute.
- Place product explanations inside clean white cards.
- Use dark pill-shaped CTAs for the main action.
- Keep supporting copy muted and visually subordinate.
- Treat bright colors inside calendar previews as product content.

## Don't

- Do not make vivid blue the dominant page color.
- Do not crowd the hero with decorative imagery.
- Do not add heavy borders around every content block.
- Do not let testimonial cards overpower the product story.
- Do not use oversized shadows or glossy effects.
- Do not invent additional palette values or measured spacing.

## Agent prompt

Build a new Cal.com-style page with a quiet, product-led SaaS visual system. Use Quiet Mist (#f4f4f4) for the page canvas, Paper White (#ffffff) for primary cards, Cal Ink (#242424) for headlines and dark CTAs, Soft Graphite (#898989) for supporting copy, and Fine Silver (#d3d3d3) for subtle dividers. Keep Booking Blue (#0099ff) sparse. Use a bold geometric sans for headlines and a lighter sans for body text. Organize content in a centered, bounded frame with generous section breaks, a clear hero, and white rounded cards for product details. Show scheduling UI previews as functional illustrations, not decorative hero art. Favor subtle elevation and consistent dark pill actions; keep the page airy, readable, and grayscale-led.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | One long, centered page with a paired hero, product-preview cards, feature grids, testimonials, FAQ, closing CTA, and footer. | Signup actions, Feature discovery, Social proof, Expandable FAQ | Pale section bands, White rounded panels, Dark pill CTAs, Embedded calendar mockups |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/cal-com