# Cal.com — Design System
> A fully customizable scheduling software for individuals, businesses, and developers.
- **Canonical:** https://uiuxskills.com/library/cal-com
- **Source:** https://cal.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-06-09T23:12:40.020Z

---

---
version: alpha
name: Cal.com
description: Fully customizable scheduling infrastructure for individuals, businesses, and developers.
tone: >-
  Professional, efficient, and transparent. The voice is direct and solution-oriented, focusing on
  productivity and ease of use.
color-scheme: light
colors:
  primary: "#6701E6"
  background: "#F8F9FA"
  surface: "#FFFFFF"
  on-surface: "#374151"
  on-primary: "#FFFFFF"
  outline: "#E3E3E3"
  error: "#DC2626"
  success: "#16A34A"
  warning: "#FBBF24"
  focus-ring: "#141414"
typography:
  display-lg:
    fontFamily: Cal Sans
    fontSize: 3rem
  display-md:
    fontFamily: Cal Sans
    fontSize: 2.25rem
  headline-lg:
    fontFamily: Cal Sans
    fontSize: 1.875rem
  headline-md:
    fontFamily: Cal Sans
    fontSize: 1.5rem
  headline-sm:
    fontFamily: Cal Sans
    fontSize: 1.25rem
  body-md:
    fontFamily: Inter
    fontSize: 1rem
  body-sm:
    fontFamily: Inter
    fontSize: 0.875rem
  label-md:
    fontFamily: Inter
    fontSize: 0.875rem
  label-sm:
    fontFamily: Inter
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#5500C0"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "#0099FF"
  link-hover:
    textColor: "#0077CC"
  badge:
    backgroundColor: "#F3F4F6"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-warning:
    backgroundColor: "{colors.warning}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-background:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

Cal.com is a modern, developer-friendly scheduling platform that emphasizes customization, privacy, and open-source principles. Its visual identity is clean, professional, and highly functional, designed to build trust with both enterprise users and individual power users.

## Colors

The color palette is built for high contrast and clarity, using a bold primary brand color balanced by a neutral, light-gray background to ensure the interface remains legible and professional.

*   Primary (#6701E6): The core brand color used for primary call-to-action buttons and active states.
*   Background (#F8F9FA): The neutral base color for page layouts.
*   Surface (inferred) (#FFFFFF): The background color for cards, inputs, and containers.
*   On-surface (#374151): The primary text color for body content and general UI elements.
*   On-primary (inferred) (#FFFFFF): The text color used specifically on primary buttons.
*   Outline (#E3E3E3): The standard border color for inputs, cards, and dividers.
*   Error (inferred) (#DC2626): Semantic color for destructive actions or validation errors.
*   Success (inferred) (#16A34A): Semantic color for confirmation and positive states.
*   Warning (#FBBF24): Used for highlights, ratings, or cautionary UI elements.
*   Focus-ring (#141414): The high-contrast outline color for keyboard navigation and focus states.

## Typography

Typography pairs a distinct, geometric sans-serif for headers with a highly readable, utilitarian font for body copy to maintain a balance between brand personality and functional efficiency.

*   Display and Headline levels (Cal Sans): Used for all hero, section, and feature titles to establish visual hierarchy.
*   Body and Label levels (Inter): Used for all paragraph text, input labels, and button text to ensure maximum readability.

## Layout

The layout follows a clean, centered container approach for marketing content, utilizing a responsive grid that prioritizes readability and feature showcases. A 16px base unit governs the vertical rhythm and spacing, ensuring consistent alignment across all viewports. The page structure follows a logical flow: nav, hero, social-proof, features, testimonials, and footer. The hero composition features a centered headline and subhead with dual primary/secondary CTAs, often accompanied by an offset product screenshot. The design is mobile-first, with navigation collapsing into a drawer on smaller screens.

## Elevation & Depth

The brand uses flat surfaces and minimal shadows, relying on subtle borders and color contrast to define depth and hierarchy rather than heavy drop shadows.

*   elevation.sm: Subtle lift for small UI elements.
*   elevation.md: Standard lift for dropdowns and popovers.
*   elevation.lg: Used for modal or drawer overlays to separate them from the main content.

## Shapes

Rounded corners are applied consistently across the interface to maintain a friendly, modern aesthetic. A 12px radius is the standard for containers and cards, while smaller elements like buttons and inputs use a 8px radius to balance structure with approachability.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use `{colors.primary}` for primary actions and transparent backgrounds with `{colors.outline}` borders for secondary actions. They are designed with `{typography.label-md}` and `{rounded.md}` to ensure they are both accessible and visually integrated.

### Card
Cards serve as the primary container for features and testimonials, utilizing `{colors.surface}` with an `{colors.outline}` border. They consistently apply `{rounded.lg}` to maintain the brand's soft, modern look.

### Input Field
Input fields feature a `{colors.surface}` background and `{rounded.md}` corners. They rely on a clear `{colors.focus-ring}` state to provide immediate visual feedback to the user during interaction.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary call-to-action buttons. | Do not use `{colors.primary}` for standard body text. |
| Apply `{rounded.lg}` to all card components. | Do not use sharp (0px) corners on buttons or inputs. |
| Use `{typography.body-md}` for standard paragraph text. | Do not mix font families; stick to Cal Sans and Inter. |
| Maintain `{spacing.md}` as the minimum gutter between sections. | Avoid tight spacing; never use less than `{spacing.md}`. |
| Use `{colors.outline}` for subtle dividers and borders. | Do not use high-elevation shadows on cards; keep them flat. |
| Ensure interactive elements have a clear `{colors.focus-ring}`. | Never use `{colors.error}` for non-destructive actions. |
| Use `{typography.label-md}` for button labels. | Do not use decorative display fonts for body text. |
| Use `{rounded.md}` for all input field components. | Do not use inconsistent border weights across the UI. |

## Content Style

CTA labels are written as imperative verbs in sentence case, such as "Get started" or "Book a demo," focusing on immediate user action.

Headings are benefit-driven and declarative, clearly articulating the value proposition of the scheduling platform to the user.

Copy density is kept low through the use of short, scannable paragraphs and frequent, feature-focused bullet points to ensure the content remains accessible and easy to digest.

## Imagery & Icons

The imagery style is mixed, combining clean, flat-style vector illustrations with high-quality product screenshots to ground the platform in reality. Icons are simple, thin-stroke, and rounded, maintaining a minimal and accessible aesthetic that complements the overall interface.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Cal.com, a minimal, professional scheduling platform. Match its direct, efficiency-focused tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{spacing.md}`, `{rounded.lg}` — never hardcode hex values, pixel sizes, or font names.
2. Use only the component variants defined under `components:`. Do not invent new button styles, badge types, or card variants beyond what the spec lists.
3. Follow the Layout narrative: centered container, mobile-first, one primary breakpoint at 768px, `{spacing.md}` minimum gutter between sections.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict explicitly before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook) is available, defer to it over the spec.

## Output contract

**Must:**
- Use token names for every color, spacing, radius, shadow, and typography decision.
- Implement hover, focus, and disabled states for all interactive components where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{colors.focus-ring}` as the outline on all keyboard-focusable elements.
- Use `{typography.label-md}` for button labels; imperative verb, sentence case.
- Use `{rounded.lg}` on cards, `{rounded.md}` on inputs and buttons, per the Shapes section.

**Must NOT:**
- Invent colors, radii, font families, or spacing values not present in the spec.
- Use generic system defaults when a token exists.
- Add emoji, filler text, or unsolicited marketing copy.
- Apply high-elevation shadows (`{elevation.lg}`) to cards; reserve it for modals and drawers.
- Rewrite, replace, or invent page copy, headings, labels, or navigation items.
- Alter page structure or information architecture as a side effect of applying tokens.

## When in doubt
- Ask before introducing any value the spec does not define.
- Prefer composing existing components over adding new tokens.
- For ambiguous backgrounds, default to `{colors.surface}`; for ambiguous text, default to `{colors.on-surface}`.
- For unspecified breakpoints, follow the mobile-first layout with one breakpoint at 768px.
- Inferred tokens are approximations; flag them if precision matters for the use case.