Cal.com

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'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.

Layout

Spacing System

• **Base unit:** 4px.
• **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
• **Section padding:** `{spacing.section}` (96px) — the universal vertical rhythm between editorial bands.
• **Card internal padding:** `{spacing.xl}` (32px) for feature cards and pricing tier cards; `{spacing.lg}` (24px) for testimonial and product-mockup cards.
• **Gutters:** `{spacing.lg}` (24px) between cards in 3-up grids; `{spacing.md}` (16px) inside footer columns.

Grid & Container

• **Max content width:** ~1200px centered on marketing pages.
• **Editorial body:** Single 12-column grid; hero band often uses 7/5 split (h1 left, app mockup card right).
• **Feature card grids:** 3-up at desktop, 2-up at tablet, 1-up at mobile.
• **Pricing grid:** 4-up at desktop, 2-up at tablet, 1-up at mobile.
• **Footer:** 4-column link list at desktop, wrapping to 2-up at tablet, 1-up at mobile.

Whitespace Philosophy

Cal.com uses generous but not excessive whitespace — section padding sits at 96px (modern-SaaS standard), and card internal padding stays at 32px. The rhythm is calibrated for fast scanning: every band has a single h1 + h2 + supporting cards, never densely packed lists. The result reads as confident-not-shouting.

Elevation & Depth

| Level | Treatment | Use |

|---|---|---|

| Flat | No shadow, no border | Body sections, top nav, hero bands |

| Soft hairline | 1px `{colors.hairline}` border | Inputs, table dividers, occasionally on cards |

| Card surface | `{colors.surface-card}` background — no shadow | Feature cards, testimonials |

| Subtle drop shadow | Faint shadow at low alpha | Pricing tier cards, hover-elevated states (the system uses `0 1px 2px rgba(0,0,0,0.05)` and `0 4px 12px rgba(0,0,0,0.08)`) |

| Featured tier | `{colors.surface-dark}` background, no shadow needed | The featured pricing tier inverts to dark surface — color contrast does the elevation work |

The elevation philosophy is **soft and modern** — small drop shadows on elevated cards, color-block contrast for emphasis. No heavy shadows, no neumorphism, no glassmorphism.

Decorative Depth

• Calendar widgets and product UI fragments embedded inside marketing cards carry their own internal shadows from the product UI itself — these are not system tokens, they're product chrome shown as content.
• Avatar circles in testimonial sections sometimes carry pastel fill colors (`{colors.badge-orange}`, `{colors.badge-pink}`, etc.) — adds a small chromatic flourish without breaking the monochrome brand voice.

Shapes

Border Radius Scale

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 4px | Almost no use — reserved for badge accents |

| `{rounded.sm}` | 6px | Small inline buttons, dropdown items |

| `{rounded.md}` | 8px | Standard CTA buttons, text inputs, category tabs |

| `{rounded.lg}` | 12px | Content cards (feature cards, testimonial cards, pricing tier cards) |

| `{rounded.xl}` | 16px | Hero app-mockup card (a slightly larger radius for the marquee component) |

| `{rounded.pill}` | 9999px | Nav-pill-group, badge pills |

| `{rounded.full}` | 9999px / 50% | Avatars, icon buttons |

Photography Geometry

Avatar photos use `{rounded.full}` (perfect circles) at 36px or 40px. Product UI fragments inside marketing cards retain their native chrome (which often has its own internal radii — e.g., calendar grid cells, button rows). Hero illustration zones use 16:9 or 4:3 ratios with `{rounded.xl}` corners.

Components

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

**`cta-band-light`** — A pre-footer "Smarter, simpler scheduling" CTA card. Background `{colors.surface-card}`, rounded `{rounded.lg}`, padding `{spacing.xxl}` (48px). Carries an h2 in `{typography.display-sm}`, a sub-line, and a `{component.button-primary}` centered.

**`footer`** — Dark navy footer that closes every page. Background `{colors.surface-dark}` (#101010), text `{colors.on-dark-soft}`. 4-column link list at desktop covering Product / Solutions / Company / Resources. Vertical padding 64px. The Cal.com wordmark sits at the top-left in `{colors.on-dark}`. The footer is the only dark surface on every page — the deliberate inversion visually closes the page.

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.

Responsive Behavior

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.

Iteration Guide

1. Focus on ONE component at a time. Reference its YAML key directly (`{component.feature-card}`, `{component.pricing-tier-card-featured}`).

2. Variants of an existing component (`-active`, `-disabled`, `-focused`) live as separate entries in `components:`.

3. Use `{token.refs}` everywhere — never inline hex.

4. Never document hover. Default and Active/Pressed states only.

5. Display headlines stay Cal Sans 600 with negative letter-spacing. Body stays Inter 400. The trinity does not blur.

6. The dark footer is the only dark surface on most pages. Don't add other dark cards casually.

7. When in doubt about emphasis: bigger Cal Sans before bolder Cal Sans.

Known Gaps

• The dembrandt frequency analyzer captured `Buttons: 0 variants` — Cal.com renders most CTAs as styled `<a>` link elements rather than `<button>` tags, which dembrandt's button selector doesn't capture. Button styles are documented from screenshot ground-truth + standard Cal Sans / Inter baselines.
• Cal Sans is licensed to Cal.com and not available as a public web font; substitutes are documented in the typography section.
• The badge pastel set (orange / pink / violet / emerald) is documented from observed avatar fill colors; exact hex values may shift seasonally.
• Animation and transition timings (calendar slot picker, schedule confirmation, integration grid hover-reveal) are not in scope.
• Form validation states beyond `{component.text-input-focused}` are not extracted — error / success states would need a sign-up or booking flow to confirm.
• The actual booking widget surface (cal.com/{username}) is the product, not a marketing surface; its spec is out of scope.
• Avatar photos in testimonial sections sometimes carry pastel circular fills with initials instead of photographs; both treatments coexist on the same page.

개요

Cal.com의 마케팅 표면은 깨끗하고 친숙한 최신 SaaS 인터페이스입니다. 흰색 캔버스(`{colors.canvas}` - #ffffff), 검정색 기본 CTA(`{colors.primary}` - #111111), 사용자 정의 **Cal Sans** 디스플레이 타이포그래피, 제품 UI 조각이 포함된 `{colors.surface-card}`(#f5f5f5) 밝은 회색 카드입니다. 이 시스템은 깊은 인상을 주려고 노력하지 않고도 자신있게 설계된 것으로 읽혀집니다. 모든 밴드에는 명확한 계층 구조, 넉넉한 공백 및 단일 기본 동작이 있습니다.

Type 음성은 **Cal Sans**(브랜드의 사용자 정의 기하학적 디스플레이 페이스 - h1, h2, h3 및 영웅 헤드라인에 사용됨)와 **Inter**(본문, 버튼, 탐색, 캡션 등 모든 것에 사용됨)의 두 가지 역할로 깔끔하게 나뉩니다. Cal Sans는 음수 문자 간격(크기에 따라 -0.5px ~ -2px)과 함께 가중치 600을 사용합니다. Cal.com 특유의 현대적이고 약간 압축된 느낌을 줍니다.

구성 요소 전압은 **카드 내부에 직접 표시되는 제품 UI 조각**(캘린더 위젯, 일정 양식, 자동화 다이어그램, 통합 타일)에서 비롯됩니다. Cal.com은 제품의 마케팅 삽화를 그리지 않습니다. 마케팅 흐름에 내재된 실제 제품 크롬을 소규모로 보여줍니다.

바닥글은 `{colors.surface-dark}`(#101010)로 전환됩니다. 이는 모든 긴 스크롤 페이지를 시각적으로 닫는 짙은 검정색에 가깝습니다. 바닥글은 시스템에서 유일하게 어두운 표면입니다. 위의 모든 항목은 밝은 회색 카드가 포함된 흰색으로 유지됩니다.

**주요 특징:**

• 검정색 기본 CTA가 있는 흰색 캔버스(`{colors.primary}` — #111111). 버튼은 가중치 600 라벨이 있는 `{rounded.md}`(8px)입니다. 표준 친화적인 SaaS 버튼.
• 헤드라인용 사용자 정의 'Cal Sans' 표시 서체(여기서는 Inter Weight 600으로 대체) 디스플레이 크기의 음수 문자 간격 - 기하학적이고 정확하며 약간 압축되어 있습니다.
• 기능 카드, 사용후기 및 가격 책정 계층(비추천)을 위한 밝은 회색 카드 표면(`{colors.surface-card}` — #f5f5f5). 주요 가격 책정 계층은 `{colors.surface-dark}`(밝은 페이지의 유일한 어두운 카드)로 변경됩니다.
• 카드에 직접 포함된 제품 UI 조각 — Cal.com은 마케팅 카드 내부에 실제 일정 선택기, 달력 위젯, 통합 그리드를 표시합니다. 소규모 실제 제품 크롬의 브랜드 전압.
• Nav-pill-group(`{comComponent.nav-pill-group}`) — 그룹화된 탐색 세그먼트(예: 제품 보기 사이의 하위 탐색 전환기) 주위의 작은 알약 반경 래퍼입니다. 알약 포장지는 시스템의 대표적인 대화형 구성 요소 중 하나입니다.
• 아바타는 직경 36px의 원형(`{rounded.full}`)이며 추천 행과 팀 목록 화면에 사용됩니다.
• 바닥글은 진한 남색(`{colors.surface-dark}` — #101010)이고 밝은 텍스트(`{colors.on-dark-soft}` — #a1a1aa)입니다. 위의 본문이 흰색이더라도 어두운 바닥글은 모든 페이지를 닫습니다.
• 리듬 간격은 주요 밴드 사이의 `{spacing.section}`(96px)입니다. 현대적인 SaaS를 느낄 수 있을 만큼 빡빡하지만 숨을 쉴 수 있을 만큼 넉넉합니다.
• 테두리 반경은 계층적입니다. 버튼 + 입력의 경우 `{rounded.md}`(8px), 콘텐츠 카드의 경우 `{rounded.lg}`(12px), 히어로 앱 모형 컨테이너의 경우 `{rounded.xl}`(16px), nav-pill-group + 배지의 경우 `{rounded.pill}`, 아바타 + 아이콘 버튼의 경우 `{rounded.full}`.

색상

브랜드 및 액센트

• **기본** (`{colors.primary}` — #111111): 주요 작업 색상입니다. 모든 기본 CTA, h1/h2 디스플레이 유형. 누르기 상태가 `{colors.primary-active}`로 전환됩니다(#242424).
• **브랜드 액센트** (`{colors.brand-accent}` — #3b82f6): 인라인 링크와 작은 배지/"고객 스토리" 강조 표시에 드물게 사용됩니다. Cal.com은 거의 단색에 가까운 브랜드입니다. 파란색은 거의 나타나지 않습니다.
• **배지 파스텔** — 카테고리 배지 및 아바타 채우기를 위한 작은 파스텔 세트: `{colors.badge-orange}`(#fb923c), `{colors.badge-pink}`(#ec4899), `{colors.badge-violet}`(#8b5cf6), `{colors.badge-emerald}`(#34d399). 이는 제품 UI 조각 내의 태그 알약과 작은 강조 부분에 표시되며, 영웅 CTA에는 표시되지 않습니다.

표면

• **캔버스** (`{colors.canvas}` — #ffffff): 기본 페이지 바닥입니다.
• **부드러운 표면** (`{colors.surface-soft}` — #f8f9fa): Nav-pill-group 배경, 매우 부드러운 섹션 구분선.
• **Surface 카드**(`{colors.surface-card}` — #f5f5f5): 기능 카드, 추천 카드, 배지 알약, 기본 아바타 채우기.
• **Surface Strong** (`{colors.surface-strong}` — #e5e7eb): 가는 선 테두리 대체; 비활성화된 버튼 배경.
• **어두운 표면** (`{colors.surface-dark}` — #101010): 바닥글 배경 — 모든 페이지의 유일한 어두운 표면입니다. 주요 가격 등급 카드에도 사용됩니다.
• **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #1a1a1a): 어두운 바닥글 내부에 중첩된 카드 또는 추천 가격 카드에 사용됩니다.
• **헤어라인** (`{colors.hairline}` — #e5e7eb): 밝은 표면의 1px 테두리 톤입니다. 입력 테두리, 표 구분선, 콘텐츠 카드 개요(때때로)에 사용됩니다.
• **Hairline Soft** (`{colors.hairline-soft}` — #f3f4f6): 흰색 캔버스를 공유하는 섹션 사이에 사용되는 거의 눈에 띄지 않는 구분선입니다.

텍스트

• **잉크** (`{colors.ink}` — #111111): 모든 헤드라인

概要

Cal.com のマーケティング サーフェスは、クリーンでフレンドリーなモダンな SaaS インターフェイスです。白いキャンバス (`{colors.canvas}` — #ffffff) と黒のプライマリ CTA (`{colors.primary}` — #111111)、カスタム **Cal Sans** ディスプレイ タイポグラフィ、および製品 UI フラグメントを保持する `{colors.surface-card}` (#f5f5f5) のライトグレーのカードです。このシステムは、印象づけようとすることなく、自信を持って設計されているように見えます。すべてのバンドには、明確な階層、十分な空白、および単一の主要なアクションがあります。

タイプ音声は、**Cal Sans** (ブランドのカスタム幾何学的表示面 - h1、h2、h3、およびヒーローの見出しに使用) と **Inter** (その他すべてに使用 - 本文、ボタン、ナビゲーション、キャプション) の 2 つの役割にきれいに分割されます。 Cal Sans は、負の文字間隔 (サイズに応じて -0.5 ピクセルから -2 ピクセル) でウェイト 600 を使用しています。モダンで、わずかに凝縮された、明らかに Cal.com のような感じです。

コンポーネントの電圧は、**カード内に直接表示される製品 UI フラグメント** (カレンダー ウィジェット、スケジュール フォーム、自動化ダイアグラム、統合タイル) から得られます。 Cal.com は製品のマーケティング用イラストを描いていません。マーケティング フローに組み込まれた実際の製品のクロームを小規模で示しています。

フッターは「{colors.surface-dark}」 (#101010) に切り替わります。黒に近い濃い色で、すべてのロングスクロール ページを視覚的に閉じます。フッターはシステム内で唯一の暗い表面です。上記のものはすべて白とライトグレーのカードのままです。

**主な特徴:**

• 白のキャンバスに黒のプライマリ CTA (`{colors.primary}` — #111111)。ボタンは `{rounded.md}` (8px) で、信頼性の高いウェイト 600 のラベルが付いています。標準のフレンドリーな SaaS ボタン。
• 見出し用のカスタム `Cal Sans` 表示書体 (ここでは Inter Weight 600 で置き換えられています)。表示サイズ上の負の文字間隔 — 幾何学的で正確、わずかに凝縮されています。
• フィーチャー カード、お客様の声、および価格帯 (非フィーチャー) 用のライトグレーのカード表面 (`{colors.surface-card}` — #f5f5f5)。注目の価格帯は「{colors.surface-dark}」（明るいページ上の唯一の暗いカード）に切り替わります。
• カードに直接埋め込まれた製品 UI フラグメント — Cal.com は、マーケティング カード内に実際のスケジュール ピッカー、カレンダー ウィジェット、統合グリッドを表示します。小規模の実際の製品クロムからのブランド電圧。
• Nav-pill-group (`{component.nav-pill-group}`) — グループ化されたナビゲーション セグメントを囲む小さなピル半径ラッパー (製品ビュー間のサブナビゲーション スイッチャーなど)。錠剤包装紙は、システムの特徴的な対話型コンポーネントの 1 つです。
• アバターは円形 (`{rounded.full}`)、直径 36 ピクセルで、紹介文の行やチーム リストの表面に使用されます。
• フッターは濃いネイビー (`{colors.surface-dark}` — #101010) と明るいテキスト (`{colors.on-dark-soft}` — #a1a1aa) です。上の本文は白くても、暗いフッターはすべてのページを閉じます。
• 間隔のリズムはメジャー バンド間の「{spacing.section}」 (96 ピクセル) です。モダンな SaaS を感じるには十分にタイトですが、呼吸するには十分な余裕があります。
• 境界線の半径は階層的です: ボタン + 入力の場合は `{rounded.md}` (8px)、コンテンツ カードの場合は `{rounded.lg}` (12px)、ヒーロー アプリ モックアップ コンテナの場合は `{rounded.xl}` (16px)、nav-pill-group + バッジの場合は `{rounded.pill}`、アバター + アイコン ボタンの場合は `{rounded.full}` です。

色

ブランドとアクセント

• **Primary** (`{colors.primary}` — #111111): 主要なアクション カラー。すべてのプライマリ CTA、h1/h2 表示タイプ。押すと状態が `{colors.primary-active}` に移行します (#242424)。
• **ブランド アクセント** (`{colors.brand-accent}` — #3b82f6): インライン リンクおよび小さなバッジ / 「顧客ストーリー」ハイライトで控えめに使用されます。 Cal.com はほぼモノクロのブランドで、青が現れることはほとんどありません。
• **バッジ パステル** — カテゴリ バッジとアバター塗りつぶし用の小さなパステル セット: `{colors.badge-orange}` (#fb923c)、`{colors.badge-pink}` (#ec4899)、`{colors.badge-violet}` (#8b5cf6)、`{colors.badge-emerald}` (#34d399)。これらは、タグピルや製品 UI フラグメント内の小さなアクセント部分に表示されますが、ヒーロー CTA には決して表示されません。

表面

• **キャンバス** (`{colors.canvas}` — #ffffff): デフォルトのページフロア。
• **Surface Soft** (`{colors.surface-soft}` — #f8f9fa): Nav-pill-group 背景、非常にソフトなセクション区切り。
• **Surface Card** (`{colors.surface-card}` — #f5f5f5): フィーチャー カード、紹介カード、バッジ ピル、デフォルトのアバター塗りつぶし。
• **Surface Strong** (`{colors.surface-strong}` — #e5e7eb): ヘアライン境界線の代替。無効になったボタンの背景。
• **Surface Dark** (`{colors.surface-dark}` — #101010): フッターの背景 — 各ページの唯一の暗いサーフェス。注目の価格帯カードにも使用されます。
• **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #1a1a1a): ダーク フッター内のネストされたカードまたは注目の価格設定カードに使用されます。
• **ヘアライン** (`{colors.hairline}` — #e5e7eb): ライト サーフェス上の 1 ピクセルの境界線のトーン。入力枠、テーブルの区切り線、コンテンツ カードのアウトラインに使用されます (場合によっては)。
• **Hairline Soft** (`{colors.hairline-soft}` — #f3f4f6): 白いキャンバスを共有するセクション間に使用される、かろうじて見える仕切り。

テキスト

• **インク** (`{colors.ink}` — #111111): すべての見出し a