Cal.com

version alpha

name Cal.com

description A clean, calendar-software-first interface anchored on white canvas with black primary CTAs and custom Cal Sans display typography. The system reads as friendly modern SaaS — generous whitespace, soft-rounded cards (~12px), product UI fragments shown directly inside cards, and a dark navy footer that visually closes long-scroll pages. Brand voltage comes from the Cal Sans display headline (a custom geometric face) and from product UI artifacts shown in-card rather than from accent colors.

colors primary: "#111111" primary-active: "#242424" primary-disabled: "#e5e7eb" ink: "#111111" body: "#374151" muted: "#6b7280" muted-soft: "#898989" hairline: "#e5e7eb" hairline-soft: "#f3f4f6" canvas: "#ffffff" surface-soft: "#f8f9fa" surface-card: "#f5f5f5" surface-strong: "#e5e7eb" surface-dark: "#101010" surface-dark-elevated: "#1a1a1a" on-primary: "#ffffff" on-dark: "#ffffff" on-dark-soft: "#a1a1aa" brand-accent: "#3b82f6" success: "#10b981" warning: "#f59e0b" error: "#ef4444" badge-orange: "#fb923c" badge-pink: "#ec4899" badge-violet: "#8b5cf6" badge-emerald: "#34d399"

typography display-xl: fontFamily: "Cal Sans, Inter, sans-serif" fontSize: 64px fontWeight: 600 lineHeight: 1.05 letterSpacing: -2px display-lg: fontFamily: "Cal Sans, Inter, sans-serif" fontSize: 48px fontWeight: 600 lineHeight: 1.1 letterSpacing: -1.5px display-md: fontFamily: "Cal Sans, Inter, sans-serif" fontSize: 36px fontWeight: 600 lineHeight: 1.15 letterSpacing: -1px display-sm: fontFamily: "Cal Sans, Inter, sans-serif" fontSize: 28px fontWeight: 600 lineHeight: 1.2 letterSpacing: -0.5px title-lg: fontFamily: "Inter, sans-serif" fontSize: 22px fontWeight: 600 lineHeight: 1.3 letterSpacing: -0.3px title-md: fontFamily: "Inter, sans-serif" fontSize: 18px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0 title-sm: fontFamily: "Inter, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0 body-md: fontFamily: "Inter, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-sm: fontFamily: "Inter, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 caption: fontFamily: "Inter, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 code: fontFamily: "JetBrains Mono, ui-monospace, monospace" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 button: fontFamily: "Inter, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 1 letterSpacing: 0 nav-link: fontFamily: "Inter, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0

rounded xs: 4px sm: 6px md: 8px lg: 12px xl: 16px pill: 9999px full: 9999px

spacing xxs: 4px xs: 8px sm: 12px md: 16px lg: 24px xl: 32px xxl: 48px section: 96px

components button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 12px 20px height: 40px button-primary-active: backgroundColor: "{colors.primary-active}" textColor: "{colors.on-primary}" rounded: "{rounded.md}" button-primary-disabled: backgroundColor: "{colors.primary-disabled}" textColor: "{colors.muted}" rounded: "{rounded.md}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 12px 20px height: 40px button-icon-circular: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.full}" size: 36px button-text-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.button}" text-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" height: 64px nav-pill-group: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.pill}" padding: 6px hero-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: 96px hero-app-mockup-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.xl}" feature-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.lg}" padding: 32px feature-icon-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-sm}" rounded: "{rounded.lg}" padding: 24px product-mockup-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 24px testimonial-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 24px pricing-tier-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-lg}" rounded: "{rounded.lg}" padding: 32px pricing-tier-card-featured: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.title-lg}" rounded: "{rounded.lg}" padding: 32px text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 10px 14px height: 40px text-input-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.md}" category-tab: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.nav-link}" padding: 8px 14px rounded: "{rounded.md}" category-tab-active: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.md}" avatar-circle: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" rounded: "{rounded.full}" size: 36px badge-pill: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 12px rating-stars: backgroundColor: transparent textColor: "{colors.badge-orange}" typography: "{typography.caption}" cta-band-light: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.display-sm}" rounded: "{rounded.lg}" padding: 48px footer: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark-soft}" typography: "{typography.body-sm}" padding: 64px

Overview

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.

Component voltage comes from product UI fragments shown directly inside cards — calendar widgets, scheduling forms, automation diagrams, integration tiles. Cal.com doesn't paint marketing illustrations of the product; it shows the actual product chrome at small scale embedded in the marketing flow.

The footer flips to {colors.surface-dark} (#101010) — a deep near-black that visually closes every long-scroll page. The footer is the only dark surface in the system; everything above stays white-with-light-gray-cards.

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.

• Custom Cal Sans display typeface for headlines (substituted with Inter weight 600 here). Negative letter-spacing on display sizes — geometric, precise, slightly condensed.

• Light-gray card surfaces ({colors.surface-card} — #f5f5f5) for feature cards, testimonials, and pricing tiers (non-featured). The featured pricing tier flips to {colors.surface-dark} (the only dark card on light pages).

• Product UI fragments embedded directly in cards — Cal.com shows real schedule pickers, calendar widgets, integration grids inside its marketing cards. Brand voltage from real product chrome at small scale.

• Nav-pill-group ({component.nav-pill-group}) — a small pill-radius wrapper around grouped nav segments (e.g., the sub-nav switcher between product views). The pill wrapper is one of the system's signature interactive components.

• Avatars are circular ({rounded.full}), 36px diameter, used in testimonial rows and team-listing surfaces.

• Footer is dark navy ({colors.surface-dark} — #101010) with light text ({colors.on-dark-soft} — #a1a1aa). The dark footer closes every page even though the body above is white.

• Spacing rhythm is {spacing.section} (96px) between major bands — tight enough to feel modern-SaaS but generous enough to breathe.

• Border radius is hierarchical: {rounded.md} (8px) for buttons + inputs, {rounded.lg} (12px) for content cards, {rounded.xl} (16px) for the hero app-mockup container, {rounded.pill} for nav-pill-group + badges, {rounded.full} for avatars + icon buttons.

Colors

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.

• Badge Pastels — A small pastel set for category badges and avatar fills: {colors.badge-orange} (#fb923c), {colors.badge-pink} (#ec4899), {colors.badge-violet} (#8b5cf6), {colors.badge-emerald} (#34d399). These appear on tag pills and small accent moments inside product UI fragments — never on hero CTAs.

Surface

• Canvas ({colors.canvas} — #ffffff): The default page floor.

• Surface Soft ({colors.surface-soft} — #f8f9fa): Nav-pill-group background, very-soft section dividers.

• Surface Card ({colors.surface-card} — #f5f5f5): Feature cards, testimonial cards, badge pills, default avatar fills.

• Surface Strong ({colors.surface-strong} — #e5e7eb): Hairline border alternative; disabled button background.

• Surface Dark ({colors.surface-dark} — #101010): The footer background — the only dark surface on every page. Also used for the featured pricing tier card.

• Surface Dark Elevated ({colors.surface-dark-elevated} — #1a1a1a): Used for nested cards inside the dark footer or featured pricing card.

• Hairline ({colors.hairline} — #e5e7eb): The 1px border tone on light surfaces. Used on input borders, table dividers, content card outlines (sometimes).

• Hairline Soft ({colors.hairline-soft} — #f3f4f6): A barely-visible divider used between sections that share the white canvas.

Text

• Ink ({colors.ink} — #111111): All headlines and primary text.

• Body ({colors.body} — #374151): Default running-text color.

• Muted ({colors.muted} — #6b7280): Secondary text — sub-headings, breadcrumbs, footer body.

• Muted Soft ({colors.muted-soft} — #898989): Tertiary text — captions, fine-print, copyright lines.

• On Primary / On Dark ({colors.on-primary} / {colors.on-dark} — #ffffff): Text on primary buttons and dark footer.

• On Dark Soft ({colors.on-dark-soft} — #a1a1aa): Footer body text — slightly muted white for the link rows.

Semantic

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

• Warning ({colors.warning} — #f59e0b): Warning callouts.

• Error ({colors.error} — #ef4444): Validation errors.

Typography

Font Family

The system runs Cal Sans for display + brand wordmark and Inter for everything else. Cal Sans is Cal.com'