What is Cal.com's primary brand color?

Cal.com's primary is #111111 — a near-black ink used for every primary CTA, headline, and active text. The press state shifts to #242424, and disabled CTAs drop to #e5e7eb with #6b7280 muted text. A secondary blue (#3b82f6) exists but is used only on inline links and an occasional customer-story badge — the brand reads as deliberately monochrome at the action layer.

What typography does Cal.com use, and what should I use if Cal Sans isn't available?

Cal.com runs two faces: Cal Sans (a custom geometric display typeface, weight 600 with -0.5px to -2px letter-spacing) for every h1, h2, and h3; and Inter at 400–600 for body, buttons, nav, and captions. Cal Sans is licensed to Cal.com and not available as a public web font — the closest substitute is Inter weight 600 with -0.04em letter-spacing, or Manrope at weight 700. JetBrains Mono handles code snippets at 14px.

Why does Cal.com show product UI inside its marketing cards?

Brand voltage on Cal.com comes from real product chrome at small scale — calendar widgets, schedule pickers, automation diagrams, integration tiles — embedded directly inside marketing cards rather than illustrated mockups. The hero app-mockup card carries an actual booking widget with calendar grid, time slots, and a Confirm button. The system distinguishes light-gray feature cards (#f5f5f5, abstract claims) from white product-mockup cards (#ffffff, real product UI) as a deliberate signal.

Can I use this DESIGN.md to build a React scheduling product?

Yes — the file is structured for AI agents to read directly. Feed it to Claude, Cursor, or any tool that consumes structured design tokens and the agent will reproduce Cal.com's near-monochrome action layer, 600-weight Cal Sans (or Inter substitute) headlines, 8px button radii, 12px content card radii, and the dark #101010 footer. Every color, type, radius, and spacing value in the spec is a quoted hex or px value you can paste into Tailwind config or CSS variables.

Does Cal.com's design system have a dark mode?

Not in mainline marketing — the public web is light-only, with white canvas (#ffffff), light-gray cards (#f5f5f5), and a single dark surface (#101010) used for the footer and the featured pricing tier. Surface-dark-elevated (#1a1a1a) is reserved for nested cards inside the dark footer or featured tier. The product app itself supports dark mode, but this DESIGN.md captures the marketing surface only.

What's missing from this DESIGN.md spec?

Several things, documented in the Known Gaps section: Cal.com's CTAs are mostly styled anchor tags rather than button elements, so the dembrandt extractor returned zero button variants — styles are reconstructed from screenshot ground-truth. Cal Sans is not available as a public web font, so substitutes are documented instead. Badge pastel hex values may shift seasonally. Animation timings, form validation states beyond focused inputs, and the actual booking widget (cal.com/{username}) are out of scope.

Cal.com Design System

Cal.com's design system as a DESIGN.md file.

About Cal.com DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source cal.com

Productivity & SaaS
Developer Tools & IDEs

Cal.com's design system is built around a single editorial rhythm: white canvas, black CTA, Cal Sans headline, light-gray feature card, dark navy footer. There is no second brand color in mainline marketing — #3b82f6 appears so rarely it reads as accidental. The system trusts product chrome and confident typography over decorative accent.

This page packages all of that into one DESIGN.md file. Inside: 24 color tokens, 13 type styles, 7 spacing values, 7 radius steps, and 26 components covering the top nav, search surface, feature grids, pricing tiers, testimonial cards, and the signature dark footer. Cal Sans is documented with Inter weight 600 at -0.04em letter-spacing as the public substitute.

Drop the file into Claude, Cursor, or GitHub Copilot. The agent will reproduce Cal.com's restraint — near-monochrome action layer, modest 600-weight display type, real product UI inside marketing cards — rather than a generic SaaS theme. Or paste the tokens directly into Tailwind config and reference the components by name.

What makes it distinct

Near-monochrome action layer#111111 primary CTAs with #3b82f6 used only sparingly on inline links and a single customer-story badge
Cal Sans display at weight 600negative letter-spacing from -0.5px to -2px gives every headline its geometric, slightly condensed voice
Product UI fragments embedded inlinecalendar widgets and schedule pickers sit inside marketing cards rather than illustrated mockups
Single dark surface#101010 footer closes every page, and the featured pricing tier inverts to the same near-black for emphasis
Hierarchical radius scale8px buttons, 12px content cards, 16px hero mockup, pill 9999px for nav-pill-group and badges

Live at cal.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

cal.com

Explore Cal.com

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Cal.com design system FAQ

Common questions about Cal.com's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use Cal.com in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→