Cal.com

---
version: alpha
name: "Cal.com — Light scheduling interface with approachable proof"
description: "An independently described visual reference, based on the archived desktop screenshot."
colors:
  primary: "#202020"
  neutral: "#F4F4F4"
  surface: "#FFFFFF"
  muted: "#6B6B6B"
  accent: "#202020"
typography:
  display:
    fontFamily: "Arial, Helvetica, sans-serif"
    fontSize: 60px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.03em
  body:
    fontFamily: "Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  label:
    fontFamily: "Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
  code:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    lineHeight: 1.5
rounded:
  card: 10px
  button: 999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  section: 96px
components:
  page:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    typography: "{typography.body}"
  panel:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.card}"
    padding: "{spacing.lg}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    typography: "{typography.label}"
    rounded: "{rounded.button}"
    padding: "{spacing.md}"
---
## Overview

A light, practical scheduling reference built from near-white backgrounds, dark friendly headings and white interface cards. The captured hero places a strong multi-line value proposition and signup actions on the left, with an appointment/calendar preview on the right. Product workflow illustrations and customer proof carry the story.

Reference: https://cal.com/ · archived screenshot: 2026-09-12T11:39:53.753759+00:00 · desktop viewport: 1440px.
This describes the captured reference, not an official brand specification. Palette,
fonts, dimensions and responsive suggestions below are **inferred implementation
starting points** from the screenshot, not extracted CSS or verified source tokens.
Do not treat partially loaded sections as intentional blank space.

To use: place this file in your repository and ask your coding agent to follow its
visual direction with the reference screenshot. Adapt the content to your product;
do not reuse source logos, photographs, illustrations or endorsements without rights.

## Colors

Use #F4F4F4 for the main canvas, #202020 for primary text, and
#FFFFFF for secondary surfaces. Supporting text starts at #6B6B6B; verify
contrast at the actual size and background. The accent #202020 is selective,
not a default fill for all elements. These approximate rendered colors are not
claims of exact brand values.

## Typography

Start with Arial, Helvetica, sans-serif for display text and Arial, Helvetica, sans-serif for body copy.
The supplied font stacks are portable approximations; exact families and font
licensing were not verified. Use 60px desktop display text, 16px body and
14px labels as a starting scale. Preserve concise line lengths and clear hierarchy.
For narrow screens, reduce display text to roughly 36–42px and avoid overflow.

## Layout

Center the main canvas at about 1180–1240px within the 1440px capture. Place the first hero in a broad white panel with roughly equal text and calendar columns. Use about 60px for the desktop hero heading and a compact supporting paragraph. Below a logo strip, introduce a centered section heading and three equal onboarding cards. Follow with a two-by-two feature grid, a smaller capabilities grid, testimonials, an integrations section, a text-rich review grid, FAQ and final signup panel. Use roughly 80–120px between major sections and 16–24px card gaps as starting estimates.

Mobile layouts were not captured. Suggested adaptation, not an observed source
behavior: use 20–24px side gutters, stack split content below about 760px, preserve
text before related imagery, and let multi-column groups become one column. Keep
code samples scrollable and controls at least 44px high. Verify these decisions in
a real narrow viewport before shipping.

## Elevation & Depth

Use the page/surface contrast and subtle boundaries to establish hierarchy. Product
screenshots may depict deeper nested UI; avoid copying their internal depth rules
onto every marketing section. No live shadows, animations or transition values were
measured. Start with restrained elevation and test legibility in the chosen theme.

## Shapes

Use the 10px card-radius token as an estimate for small surface rounding.
Compact pill-like actions use the button radius; retain rectangular product imagery
where it is visually appropriate. Do not apply one oversized corner radius to every
container.

## Components

Calendar day cells are small and square; a selected day is dark with reversed text. Signup actions span much of the left hero column, with a dark primary action and understated secondary action. Workflow and feature cards pair concise titles with illustrative scheduling UI. Cards use soft neutral boundaries or slight low-elevation shadows, not both prominently. Reviews may include avatars and rating accents; keep these secondary to the scheduling story. FAQ rows use fine separators and right-aligned expand indicators.

Hover, focus, loading and expanded states were not observable from this still
capture. Provide keyboard-visible focus, distinct disabled states and accessible
expanded controls as implementation requirements, not claims about the reference.
Do not rely on color alone to express state; honor reduced-motion preferences.

## Do's and Don'ts

Keep scheduling examples readable, headings friendly and the primary action obvious. Use consistent spacing across workflow cards and generous margins around proof. Do not replace practical interface demonstrations with decorative illustrations, introduce a dark neon theme, or imply that review/logo assets are licensed for reuse.

Use the captured design as direction, not a pixel-perfect or legally licensed
clone. Prefer your own content and assets. Validate the file and compare your output
against the archived screenshot; refresh this guide externally when that reference
materially changes.