Cal.com Design System

Cal.com's marketing surface is a clean, friendly modern-SaaS interface — white canvas ({colors.canvas} — #ffffff) with black primary CTAs ({colors.primary} — #111111), custom Cal Sans display typography, and {colors.surface-card} (#f5f5f5) light-gray cards holding product UI fragments. The system reads as confidently engineered without trying to impress — every band has clear hierarchy, generous whitespace, and a single primary action.

Type voice splits cleanly into two roles: Cal Sans (the brand's custom geometric display face — used for h1, h2, h3, and hero headlines) and Inter (used for everything else — body, buttons, nav, captions). Cal Sans uses weight 600 with negative letter-spacing (-0.5px to -2px depending on size) — it feels modern, slightly condensed, distinctly Cal.com.

...

Key Characteristics:

• White canvas with black primary CTA ({colors.primary} — #111111). Buttons are {rounded.md} (8px) with confident weight-600 labels. Standard friendly-SaaS button.
• ...

Brand & Accent

• Primary ({colors.primary} — #111111): The dominant action color. All primary CTAs, h1/h2 display type. Press state shifts to {colors.primary-active} (#242424).
• Brand Accent ({colors.brand-accent} — #3b82f6): Used sparely on inline links and on a small badge / "Customer story" highlight. Cal.com is a near-monochrome brand — the blue appears rarely.
• ...

Surface

• Canvas ({colors.canvas} — #ffffff): The default page floor.
• Surface Soft ({colors.surface-soft} — #f8f9fa): Nav-pill-group background, very-soft section dividers.
• ...

Text

• Ink ({colors.ink} — #111111): All headlines and primary text.
• Body ({colors.body} — #374151): Default running-text color.
• ...

Semantic

• Success ({colors.success} — #10b981): Confirmation states, success badges in product UI.
• Warning ({colors.warning} — #f59e0b): Warning callouts.
• ...

Font Family

The split is functional:

• Cal Sans (display, 600 weight, -0.5 to -2px tracking) — h1, h2, h3
• Inter (body + UI, 400-600 weight, 0 letter-spacing) — paragraphs, labels, buttons, nav

Hierarchy

Principles

Note on Font Substitutes

Spacing System

• Base unit: 4px.
• Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 96px.
• ...

Grid & Container

• Max content width: ~1200px centered on marketing pages.
• Editorial body: Single 12-column grid; hero band often uses 7/5 split (h1 left, app mockup card right).
• ...

Whitespace Philosophy

Decorative Depth

• Calendar widgets and product UI fragments embedded inside marketing cards carry their own internal shadows from the product UI itself — these are not system tokens, they're product chrome shown as content.
• Avatar circles in testimonial sections sometimes carry pastel fill colors ({colors.badge-orange}, {colors.badge-pink}, etc.) — adds a small chromatic flourish without breaking the monochrome brand voice.

Border Radius Scale

Photography Geometry

Top Navigation

top-nav — White nav bar pinned to the top of every page. 64px tall, {colors.canvas} background. Carries the Cal.com wordmark + logo at left (the lowercase "Cal.com" with the brand circle), primary horizontal menu (Product, Solutions, Resources, Pricing, Enterprise) center, right-side cluster with "Sign in" text-link, "Sign up free" {component.button-primary}, and a sometimes-visible language selector. Menu items in {typography.nav-link} (Inter 14px / 500).

nav-pill-group — A small pill-radius wrapper around 2-3 sub-nav segments (e.g., the product-mode switcher between "Personal" / "Teams" / "Enterprise"). Background {colors.surface-soft} with internal padding 6px, rounded {rounded.pill}. Active segment renders as a white-canvas pill with a subtle drop shadow inside the wrapper. The pill-in-pill treatment is one of Cal.com's signature interactive components.

Buttons

button-primary — The signature primary CTA. Background {colors.primary} (#111111), text {colors.on-primary}, type {typography.button} (Inter 14px / 600), padding 12px × 20px, height 40px, rounded {rounded.md} (8px). Active state button-primary-active shifts to {colors.primary-active} (#242424).

button-secondary — White button with hairline outline. Background {colors.canvas}, text {colors.ink}, 1px hairline border, same padding + height + radius as primary.

button-icon-circular — 36 × 36px circular icon button. Background {colors.canvas}, hairline border, ink-color icon. Used for share, "view more", carousel arrows.

button-text-link — Inline text button, no background. Used for "Sign in" in the top nav and inline CTA links inside cards.

text-link — Inline body links in {colors.ink} (the brand keeps inline links monochrome). Underlined on hover (not documented per the no-hover policy, but mentioned for context).

Cards & Containers

hero-band — White-canvas hero with a 7-5 grid: h1 + sub-headline + button row on the left, {component.hero-app-mockup-card} on the right. Vertical padding {spacing.section} (96px).

hero-app-mockup-card — A larger product-UI mockup card showing the actual Cal.com booking widget with calendar grid, time slots, and a primary "Confirm" button inside. Background {colors.canvas}, 1px hairline border, rounded {rounded.xl} (16px), subtle drop shadow. Used as the hero's right-side artifact.

feature-card — Used in 3-up feature grids ("With us, appointment scheduling is easy"). Background {colors.surface-card} (#f5f5f5), rounded {rounded.lg} (12px), internal padding {spacing.xl} (32px). Carries a small icon at top, an {typography.title-md} headline, and a body description in {typography.body-md}.

feature-icon-card — A simpler card variant used in 4-up feature grids on lower-density bands. Background {colors.canvas} with hairline border, rounded {rounded.lg}, padding {spacing.lg} (24px). Carries a small icon, {typography.title-sm} title, short description.

product-mockup-card — A card showing actual Cal.com product UI fragments (workflow editor, calendar grid, integration grid, automation flow). Background {colors.canvas}, rounded {rounded.lg}, padding {spacing.lg} (24px). The product UI inside has its own internal chrome — these cards display the product, they don't decorate around it.

testimonial-card — Used in customer-quote grids. Background {colors.surface-card}, rounded {rounded.lg}, padding {spacing.lg} (24px). Top row carries a {component.avatar-circle} + name + role; below sits the testimonial quote in {typography.body-md}.

pricing-tier-card — Standard tier card. Background {colors.canvas}, rounded {rounded.lg}, padding {spacing.xl} (32px). Carries the plan name in {typography.title-lg}, price in {typography.display-sm}, feature checklist in {typography.body-md}, and a {component.button-primary} at the bottom.

pricing-tier-card-featured — The featured tier (typically "Teams"). Background flips to {colors.surface-dark} (#101010), text inverts to {colors.on-dark}. The dark surface IS the featured-tier signal — no accent border, no badge, no scale shift.

Inputs & Forms

text-input — Standard text input. Background {colors.canvas}, text {colors.ink}, type {typography.body-md}, rounded {rounded.md} (8px), padding 10px × 14px, height 40px. 1px hairline border in {colors.hairline}.

text-input-focused — Focus state. Border thickens or shifts to {colors.ink} for emphasis.

Tags / Badges

badge-pill — Small pill label used for category tags ("Product", "Article", "New") and pastel-fill avatar substitutes. Background {colors.surface-card} or one of the badge pastels ({colors.badge-orange}, {colors.badge-pink}, etc.), text {colors.ink}, type {typography.caption} (13px / 500), rounded {rounded.pill}, padding 4px × 12px.

avatar-circle — 36px diameter, rounded {rounded.full}. Either holds a photo or a pastel fill with initials in {typography.caption}.

rating-stars — Inline star rating in {colors.badge-orange} (#fb923c). Used near testimonial avatars to display a 5-star satisfaction score.

Tab / Filter

category-tab + category-tab-active — Used inside the nav-pill-group. Inactive: transparent background, {colors.muted} text. Active: {colors.canvas} background, {colors.ink} text, subtle drop shadow inside the pill-group wrapper. Padding 8px × 14px, rounded {rounded.md}.

CTA / Footer

cta-band-light — A pre-footer "Smarter, simpler scheduling" CTA card. Background {colors.surface-card}, rounded {rounded.lg}, padding {spacing.xxl} (48px). Carries an h2 in {typography.display-sm}, a sub-line, and a {component.button-primary} centered.

footer — Dark navy footer that closes every page. Background {colors.surface-dark} (#101010), text {colors.on-dark-soft}. 4-column link list at desktop covering Product / Solutions / Company / Resources. Vertical padding 64px. The Cal.com wordmark sits at the top-left in {colors.on-dark}. The footer is the only dark surface on every page — the deliberate inversion visually closes the page.

Do

• Reserve {colors.primary} (#111111) for primary CTAs and h1/h2 type. Cal.com's button is near-black, not blue.
• Use Cal Sans for every display headline. Pair with Inter body. Never blur the boundary.
• Apply negative letter-spacing on display sizes (-0.5 to -2px). Cal Sans without it reads as off-brand.
• Use {component.feature-card} (light gray) and {component.product-mockup-card} (white with chrome) deliberately — the gray cards signal "abstract feature claim", white cards signal "look at the actual product".
• Embed real product UI fragments inside marketing cards. Don't paint marketing illustrations of the product when you can show the product itself.
• Keep avatar circles at 36px, perfect circles, sometimes with pastel fills. Avatars are the only place where badge pastels appear.
• Use {component.nav-pill-group} for grouped sub-nav segments. The pill-in-pill treatment is signature.
• End every page with the dark footer. The light-to-dark transition is part of the editorial rhythm.

Don't

• Don't use accent colors ({colors.brand-accent}, badge pastels) on primary CTAs. The system is monochrome at the action layer.
• Don't bold display weight beyond 600. Cal Sans at 700 reads as bombastic.
• Don't use rounded radius beyond {rounded.xl} (16px) on cards. Larger radii read as consumer-app, not professional booking software.
• Don't put dark surface cards anywhere except the footer and the featured pricing tier. The dark surface is a deliberate, scarce signal.
• Don't repeat the same surface mode in two consecutive bands. Cal.com's pacing alternates white → light-gray → white → product-mockup-card → white → dark-footer.
• Don't add hover state styling beyond what the system already encodes — primary darkens on press; nothing else changes.

Breakpoints

Touch Targets

• {component.button-primary} at minimum 40 × 40px.
• {component.button-icon-circular} at exactly 36 × 36 — slightly under WCAG's 44 × 44 but the centered icon and full-circle silhouette compensate.
• ...

Collapsing Strategy

• Top nav collapses to hamburger at < 768px; menu opens as a full-screen sheet.
• Hero band's 7-5 grid collapses to single-column on mobile — h1 + sub-head + buttons first, then the app-mockup card below.
• ...

Image Behavior

• Product UI fragments inside cards retain native aspect ratios; the cards themselves resize.
• Avatar photos crop to circles at every breakpoint.
• ...

1. Focus on ONE component at a time. Reference its YAML key directly ({component.feature-card}, {component.pricing-tier-card-featured}). 2. Variants of an existing component (-active, -disabled, -focused) live as separate entries in components:.

• ...

"Design a scheduling UI: clean white background, black CTAs (#111111), and border-radius of 12px."

The parsed design tokens extracted from the core stylesheet of this design system: