A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
Cal, in one page
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 Sansdisplay 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.
Do's and don'ts
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.
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Cal design language. Follow the measured tokens below — do not substitute your own palette.
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
Type:
- families: Cal Sans, Inter, JetBrains Mono, ui-monospace
- scale: 13, 14, 16, 18, 22, 28, 36, 48, 64
- weights: 400, 500, 600
Shape:
- radius: 4, 6, 8, 12, 16
Spacing: 4, 6, 8, 10, 12, 16, 24, 32, 48, 64
Rules:
- 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 cla…
- 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.
Avoid:
- 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.
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
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.
Type scaleRead the full spec
Font Family
The system runs Cal Sans for display + brand wordmark and Inter for everything else. Cal Sans is Cal.com's custom geometric display typeface — slightly condensed, weight 600, negative letter-spacing. Inter handles body, buttons, navigation, captions, and tabular code blocks. The fallback stack walks -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif for both families.
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
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
{typography.display-xl} | 64px | 600 | 1.05 | -2px | Homepage h1 ("The better way to schedule your meetings") — Cal Sans |
{typography.display-lg} | 48px | 600 | 1.1 | -1.5px | Section heads ("Your all-purpose scheduling app") — Cal Sans |
{typography.display-md} | 36px | 600 | 1.15 | -1px | Sub-section heads, card titles — Cal Sans |
{typography.display-sm} | 28px | 600 | 1.2 | -0.5px | CTA-band heads, pricing tier prices — Cal Sans |
{typography.title-lg} | 22px | 600 | 1.3 | -0.3px | Pricing plan names — Inter |
{typography.title-md} | 18px | 600 | 1.4 | 0 | Feature card titles, intro paragraphs |
{typography.title-sm} | 16px | 600 | 1.4 | 0 | Small card titles, list labels |
{typography.body-md} | 16px | 400 | 1.5 | 0 | Default running-text |
{typography.body-sm} | 14px | 400 | 1.5 | 0 | Footer body, fine-print |
{typography.caption} | 13px | 500 | 1.4 | 0 | Badge labels, captions |
{typography.code} | 14px | 400 | 1.5 | 0 | Code snippets, API examples — JetBrains Mono |
{typography.button} | 14px | 600 | 1.0 | 0 | Standard button labels |
{typography.nav-link} | 14px | 500 | 1.4 | 0 | Top-nav menu items |
Principles
Cal Sans is the brand voice — every display headline uses it. Inter handles the supporting type. The boundary is strict: never put body copy in Cal Sans, never put a display headline in Inter. Cal Sans without negative letter-spacing reads as off-brand — the -0.5 to -2px tracking is part of the voice.
Display weight stays at 600 across all sizes — never 700, never 500. The middle weight is what makes Cal Sans feel modern and confident without becoming bombastic.
Note on Font Substitutes
If Cal Sans is unavailable, Inter at weight 600 with -0.04em letter-spacing is a usable approximation. The geometric character of Cal Sans differs from Inter's humanist forms, but the substitution preserves the weight + tracking signature. Manrope at weight 700 is another close alternative.
Components and layoutRead the full spec
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
Responsive behaviourRead the full spec
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 768px | Hamburger nav; hero h1 64→32px; hero-app-mockup-card stacks below content; feature grids 1-up; pricing 1-up; footer 4 cols → 1 |
| Tablet | 768–1024px | Top nav stays horizontal but tightens; nav-pill-group wraps; feature cards 2-up; pricing 2-up |
| Desktop | 1024–1440px | Full top-nav with all menu items; 3-up feature cards; 4-up pricing tiers |
| Wide | > 1440px | Same as desktop with more outer breathing room; max content width caps at 1200px |
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.{component.text-input}height is 40px.{component.category-tab}rendered inside nav-pill-group has 8 × 14 padding; effective tap area meets 44px+ with the surrounding pill.
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.
- Feature grids reduce columns rather than scaling cards down.
- Pricing tier cards collapse 4 → 2 → 1; featured-tier dark surface stays visually distinct at every breakpoint.
- Nav-pill-group wraps to multi-row on tablet if the segments don't fit horizontally.
- Avatar + testimonial card layouts stay grid-aligned at every breakpoint.
Image Behavior
- Product UI fragments inside cards retain native aspect ratios; the cards themselves resize.
- Avatar photos crop to circles at every breakpoint.
- Hero app-mockup card scales proportionally on mobile — the calendar grid stays legible.
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-cal {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #111111;
--heading-color: #111111;
--link-color: #111111;
--link-hover-color: #000000;
--border-color: #d4d4d4;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(17,17,17,0.06);
--card-hover-shadow: 0 6px 18px rgba(17,17,17,0.12);
--header-bg: #111111;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #646464;
--button-bg: #111111;
--button-text-color: #ffffff;
--button-hover-bg: #000000;
--button-border: none;
--button-border-radius: 8px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #111111;
--button-secondary-hover-bg: #e2e2e2;
--button-secondary-border: 1px solid #d4d4d4;
--prompt-bg: #f3f3f3;
--prompt-text-color: #111111;
--base-font: var(--font-helvetica);
--heading-font: var(--font-inter);
--card-border-radius: 8px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- cursor 86.4%
- vercel 83.6%
- elevenlabs 82.7%
- binance 82.1%
- claude 81.6%
Where this came from
- Source document
volt/design-md/cal/DESIGN.md· 30.2 KB- Repository
- VoltAgent/awesome-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.