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 인터페이스입니다. 흰색 캔버스(`` - #ffffff), 검정색 기본 CTA(`` - #111111), 사용자 정의 **Cal Sans** 디스플레이 타이포그래피 및 `` (#f5f5f5) 제품 UI 조각이 들어 있는 밝은 회색 카드입니다. 이 시스템은 깊은 인상을 주려고 노력하지 않고도 자신있게 설계된 것으로 읽혀집니다. 모든 밴드에는 명확한 계층 구조, 넉넉한 공백 및 단일 기본 작업이 있습니다.

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

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

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

**주요 특성:**

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

색상

브랜드 및 액센트

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

표면

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

텍스트

• **잉크**(`` — #111111): 모든 헤드라인 및 기본 텍스트.
• **본문**(`` — #374151): 기본 실행 텍스트 색상.
• **음소거됨**(`` — #6b7280): 보조 텍스트 — 하위 제목, 이동 경로, 바닥글 본문.
• **음소거 소프트**(`` — #898989): 3차 텍스트 — 캡션, 작은 글씨, 저작권 문구.
• **기본/어두움**(`` / `` — #ffffff): 기본 버튼과 어두운 바닥글의 텍스트.
• **어둡고 부드러운**(`` — #a1a1aa): 바닥글 본문 텍스트 — 링크 행에 대해 약간 음소거된 흰색.

의미

• **성공**(`` — #10b981): 확인 상태, 제품 UI의 성공 배지.
• **경고** (`` — #f59e0b): 경고 문구.
• **오류**(`` — #ef4444): 유효성 검사 오류.

타이포그래피

글꼴군

시스템은 디스플레이 + 브랜드 워드마크에 대해 **Cal Sans**를 실행하고 기타 모든 것에 대해 **Inter**를 실행합니다. Cal Sans는 Cal.com의 맞춤형 기하학적 표시 서체입니다. 약간 압축되어 있으며 두께는 600이고 음수 간격입니다. Inter는 본문, 버튼, 탐색, 캡션 및 표 형식 코드 블록을 처리합니다. 대체 스택은 두 제품군 모두에 대해 `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`을 수행합니다.

분할이 작동합니다:

• Cal Sans(디스플레이, 600 가중치, -0.5~-2px 추적) — h1, h2, h3
• Inter(본문 + UI, 가중치 400-600, 문자 간격 0) — 단락, 레이블, 버튼, 탐색

계층

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |

사용

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

| _`` | 64px | 600 | 1.05 | -2px | 홈페이지 h1("회의 일정을 잡는 더 좋은 방법") — Cal Sans |

| _`` | 48px | 600 | 1.1 | -1.5px | 섹션 헤드("다목적 일정 관리 앱") — Cal Sans |

| _`` | 36px | 600 | 1.15 | -1픽셀 | 하위 섹션 제목, 카드 제목 — Cal Sans |

| _`` | 28px | 600 | 1.2 | -0.5px | CTA 밴드 헤드, 가격 책정 계층 가격 — Cal Sans |

| _`` | 22px | 600 | 1.3 | -0.3px | 요금제 이름 — Inter |

| _`` | 18px | 600 | 1.4 | 0 | 기능 카드 제목, 소개 단락 |

| _`` | 16px | 600 | 1.4 | 0 | 작은 카드 제목, 목록 라벨 |

| _`` | 16px | 400 | 1.5 | 0 | 기본 실행 텍스트 |

| _`` | 14px | 400 | 1.5 | 0 | 바닥글 본문, 작은 글씨 |

| _`` | 13px | 500 | 1.4 | 0 | 배지 라벨, 캡션 |

| _`` | 14px | 400 | 1.5 | 0 | 코드 조각, API 예제 — JetBrains Mono |

| _`` | 14px | 600 | 1.0 | 0 | 표준 버튼 라벨 |

| _`` | 14px | 500 | 1.4 | 0 | 상단 탐색 메뉴 항목 |

원칙

Cal Sans는 브랜드 보이스입니다. 모든 디스플레이 헤드라인에서 이를 사용합니다. Inter는 지원 유형을 처리합니다. 경계는 엄격합니다. Cal Sans에는 본문 문구를 넣지 말고, Inter에는 디스플레이 헤드라인을 넣지 마세요. 음수 간격이 없는 Cal Sans는 오프 브랜드로 읽힙니다. -0.5~-2px 추적은 음성의 일부입니다.

디스플레이 무게는 모든 크기에 걸쳐 600으로 유지됩니다. 결코 700도 아니고 500도 아닙니다. 중간 무게는 Cal Sans가 과장되지 않으면서 현대적이고 자신감 있는 느낌을 갖게 해줍니다.

글꼴 대체에 대한 참고사항

Cal Sans를 사용할 수 없는 경우 문자 간격이 -0.04em인 무게 600의 **Inter**가 사용 가능한 근사치입니다. Cal Sans의 기하학적 특성은 Inter의 휴머니스트 형태와 다르지만 대체는 무게 + 추적 시그니처를 유지합니다. 무게 700의 **맨로프**는 또 다른 유사한 대안입니다.

레이아웃

간격 시스템

• **기본 단위:** 4px.
• **토큰:** `` 4px · `` 8px · `` 12px · `` 16px · `` 24px · `` 32px · `` 48px · `` 96px.
• **섹션 패딩:** ``(96px) — 편집 밴드 간의 보편적인 수직 리듬.
• **카드 내부 패딩:** 기능 카드 및 가격 등급 카드의 경우 ``(32px); `` (24px) 고객 평가 및 제품 모형 카드용.
• **홈통:** 3-up 그리드의 카드 사이에 ``(24px); ``(16px) 바닥글 열 내부.

그리드 및 컨테이너

• **최대 콘텐츠 너비:** 마케팅 페이지 중심으로 ~1200px.
• **편집 본문:** 단일 12열 그리드; 히어로 밴드는 종종 7/5 분할을 사용합니다(h1 왼쪽, 앱 모형 카드 오른쪽).
• **기능 카드 그리드:** 데스크톱에서 3업, 태블릿에서 2업, 모바일에서 1업.
• **가격표:** 데스크톱에서 4위, 태블릿에서 2위, 모바일에서 1위.
• **바닥글:** 데스크톱의 4열 링크 목록, 태블릿에서는 2업, 모바일에서는 1업으로 줄 바꿈됩니다.

공백 철학

Cal.com은 넉넉하지만 과도하지 않은 공백을 사용합니다. 섹션 패딩은 96px(최신 SaaS 표준)이고 카드 내부 패딩은 32px로 유지됩니다. 리듬은 빠른 스캔을 위해 조정됩니다. 모든 밴드에는 단일 h1 + h2 + 지원 카드가 있으며 결코 밀집된 목록이 없습니다. 결과는 소리 지르지 않고 자신감 있게 읽힌다.

고도 및 깊이

| 레벨 | 치료 | |

사용

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

| 플랫 | 그림자 없음, 테두리 없음 | 본문 섹션, 상단 탐색, 히어로 밴드 |

| 부드러운 헤어라인 | 1px `` 테두리 | 입력, 테이블 구분선, 가끔 카드에 있음 |

| 카드 표면 | `` 배경 - 그림자 없음 | 기능 카드, 사용후기 |

| 미묘한 그림자 | 낮은 알파의 희미한 그림자 | 가격 등급 카드, 마우스오버된 상태(시스템은 `0 1px 2px rgba(0,0,0,0.05)` 및 `0 4px 12px rgba(0,0,0,0.08)` 사용) |

| 주요 계층 | `` 배경, 그림자가 필요하지 않음 | 주요 가격 책정 계층이 어두운 표면으로 반전됩니다. 색상 대비가 상승 효과를 발휘합니다 |

엘리베이션 철학은 **부드럽고 현대적**입니다. 즉, 높은 카드의 작은 그림자, 강조를 위한 색상 블록 대비입니다. 무거운 그림자도 없고, 신경형성도 없고, 유리형성도 없습니다.

장식적 깊이

• 마케팅 카드에 포함된 캘린더 위젯과 제품 UI 조각은 제품 UI 자체에서 고유한 내부 그림자를 전달합니다. 이는 시스템 토큰이 아니며 콘텐츠로 표시되는 제품 크롬입니다.
• 평가 섹션의 아바타 서클에는 때때로 파스텔 채우기 색상(``, `` 등)이 포함되어 있습니다. 흑백 브랜드 이미지를 깨지 않으면서 작은 색채를 추가합니다.

도형

테두리 반경 배율

| 토큰 | 가치 | |

사용

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

| _`` | 4픽셀 | 거의 사용되지 않음 - 배지 악센트용으로 예약됨 |

| _`` | 6픽셀 | 작은 인라인 버튼, 드롭다운 항목 |

| _`` | 8픽셀 | 표준 CTA 버튼, 텍스트 입력, 카테고리 탭 |

| _`` | 12px | 콘텐츠 카드(기능 카드, 추천 카드, 가격 등급 카드) |

| _`` | 16px | 히어로 앱 모형 카드(마키 구성요소의 반경이 약간 더 큼) |

| _`` | 9999px | Nav-pill-group, 배지 알약 |

| _`` | 9999px / 50% | 아바타, 아이콘 버튼 |

사진 기하학

아바타 사진은 36px 또는 40px에서 ``(완벽한 원)을 사용합니다. 마케팅 카드 내부의 제품 UI 조각은 기본 크롬을 유지합니다(종종 자체 내부 반경(예: 달력 그리드 셀, 버튼 행)이 있음). 히어로 일러스트레이션 영역은 `` 모서리와 함께 16:9 또는 4:3 비율을 사용합니다.

구성요소

상단 탐색

**`top-nav`** — 모든 페이지 상단에 고정된 흰색 탐색 모음입니다. 높이 64px, `` 배경. 왼쪽에 Cal.com 워드마크 + 로고(브랜드 서클이 있는 소문자 "Cal.com"), 기본 수평 메뉴(제품, 솔루션, 리소스, 가격, 기업) 중앙, "로그인" 텍스트 링크가 있는 오른쪽 클러스터, "무료 가입" `` 및 때때로 표시되는 언어 선택기가 있습니다. ``(Inter 14px / 500).

의 메뉴 항목

**`nav-pill-group`** — 2~3개의 하위 탐색 세그먼트 주위에 있는 작은 알약 반경 래퍼입니다(예: "개인" / "팀" / "기업" 간의 제품 모드 전환기). 배경 `` 내부 패딩 6px, 반올림 ``. 활성 세그먼트는 래퍼 내부에 미묘한 그림자가 있는 흰색 캔버스 알약으로 렌더링됩니다. 알약 형태의 알약 치료는 Cal.com의 대표적인 대화형 구성 요소 중 하나입니다.

버튼

**`button-primary`** — 서명 기본 CTA입니다. 배경 ``(#111111), 텍스트 ``, 유형 ``(Inter 14px/600), 패딩 12px × 20px, 높이 40px, 반올림 ``(8px). 활성 상태 `button-primary-active`이 ``(#242424)로 전환됩니다.

**`button-secondary`** — 가는 윤곽선이 있는 흰색 버튼입니다. 배경 ``, 텍스트 ``, 가는선 테두리 1px, 기본과 동일한 패딩 + 높이 + 반경.

**`button-icon-circular`** — 36 × 36px 원형 아이콘 버튼. 배경 ``, 가는선 테두리, 잉크 색상 아이콘. 공유, '더 보기', 회전식 화살표에 사용됩니다.

**`button-text-link`** — 인라인 텍스트 버튼, 배경 없음. 상단 탐색 메뉴의 '로그인'과 카드 내부의 인라인 CTA 링크에 사용됩니다.

**`text-link`** — ``의 인라인 본문 링크(브랜드는 인라인 링크를 단색으로 유지합니다). 마우스를 올리면 밑줄이 그어집니다(마우스를 올리면 안 됨 정책에 따라 문서화되지 않았지만 맥락에 따라 언급됨).

카드 및 용기

_**`hero-band`** — 7-5 그리드가 있는 흰색 캔버스 히어로: h1 + 하위 제목 + 왼쪽의 버튼 행, 오른쪽의 ``. 수직 패딩 `` (96px).

**`hero-app-mockup-card`** — 달력 그리드, 시간 슬롯 및 내부의 기본 "확인" 버튼이 포함된 실제 Cal.com 예약 위젯을 보여주는 더 큰 제품 UI 모형 카드입니다. 배경 ``, 1px 가는선 테두리, 둥근 ``(16px), 미묘한 그림자. 영웅의 오른쪽 아티팩트로 사용됩니다.

**`feature-card`** — 3업 피처 그리드에 사용됩니다("저희와 함께라면 약속 예약이 쉽습니다"). 배경 ``(#f5f5f5), 둥근 ``(12px), 내부 패딩 ``(32px). 상단에 작은 아이콘, `` 헤드라인, ``.

의 본문 설명이 포함됩니다.

**`feature-icon-card`** — 저밀도 밴드의 4업 피처 그리드에 사용되는 더 간단한 카드 변형입니다. 가는선 테두리가 있는 배경 ``, 둥근 ``, 패딩 ``(24px). 작은 아이콘, `` 제목, 간단한 설명을 포함합니다.

**`product-mockup-card`** — 실제 Cal.com 제품 UI 조각(워크플로 편집기, 달력 그리드, 통합 그리드, 자동화 흐름)을 보여주는 카드입니다. 배경 ``, 둥근 ``, 패딩 ``(24px). 내부의 제품 UI에는 자체 내부 크롬이 있습니다. 이 카드는 제품을 표시하지만 제품 주변을 장식하지는 않습니다.

**`testimonial-card`** — 고객 견적 그리드에 사용됩니다. 배경 ``, 둥근 ``, 패딩 ``(24px). 맨 위 행에는 `` + 이름 + 역할이 포함됩니다. 아래는 ``.

의 평가 인용문입니다.

**`pricing-tier-card`** — 표준 등급 카드. 배경 ``, 둥근 ``, 패딩 ``(32px). ``에 계획 이름, ``에 가격, ``에 기능 체크리스트, 하단에 ``이 포함됩니다.

**`pricing-tier-card-featured`** — 주요 계층(일반적으로 "팀")입니다. 배경은 ``(#101010)으로 반전되고 텍스트는 ``로 반전됩니다. 어두운 표면은 주요 계층 신호입니다. 악센트 테두리, 배지, 스케일 이동이 없습니다.

입력 및 양식

**`text-input`** — 표준 텍스트 입력. 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``(8px), 패딩 10px × 14px, 높이 40px. ``.

의 1px 가는선 테두리

**`text-input-focused`** — 포커스 상태. 강조를 위해 테두리가 두꺼워지거나 ``로 이동합니다.

태그/배지

**`badge-pill`** — 카테고리 태그("제품", "기사", "신규") 및 파스텔 채우기 아바타 대체에 사용되는 작은 알약 라벨입니다. 배경 `` 또는 배지 파스텔 중 하나(``, `` 등), 텍스트 ``, 유형 ``(13px/500), 반올림 ``, 패딩 4px × 12px.

**`avatar-circle`** — 직경 36px, 둥근 ``. ``.

의 이니셜이 포함된 사진이나 파스텔 채우기가 들어 있습니다.

_**`rating-stars`** — ``(#fb923c)의 인라인 별 등급. 별 5개 만족도 점수를 표시하기 위해 추천 아바타 근처에 사용됩니다.

탭/필터

**`category-tab`** + **`category-tab-active`** — nav-pill-group 내부에서 사용됩니다. 비활성: 투명한 배경, `` 텍스트. 활성: `` 배경, `` 텍스트, 알약 그룹 래퍼 내부의 미묘한 그림자. 패딩 8px × 14px, 반올림 ``.

CTA/바닥글

**`cta-band-light`** — 바닥글 앞부분의 '더 스마트하고 간단한 일정 관리' CTA 카드입니다. 배경 ``, 둥근 ``, 패딩 ``(48px). ``, 하위 라인 및 `` 중심에 h2를 전달합니다.

_**`footer`** — 모든 페이지를 닫는 짙은 남색 바닥글입니다. 배경 ``(#101010), 텍스트 ``. 제품/솔루션/회사/리소스를 다루는 데스크탑의 4열 링크 목록입니다. 수직 패딩 64px. Cal.com 워드마크는 ``의 왼쪽 상단에 있습니다. 바닥글은 모든 페이지에서 유일하게 어두운 표면입니다. 고의적인 반전으로 인해 페이지가 시각적으로 닫힙니다.

해야 할 일과 하지 말아야 할 일

하라

• 기본 CTA 및 h1/h2 유형에 대해 ``(#111111)을 예약합니다. Cal.com의 버튼은 파란색이 아닌 검은색에 가깝습니다.
• 모든 디스플레이 헤드라인에 Cal Sans를 사용하세요. 인터바디와 페어링하세요. 경계를 흐리게 하지 마세요.
• 디스플레이 크기(-0.5~-2px)에 음수 문자 간격을 적용합니다. Cal Sans가 없으면 브랜드가 아닌 것으로 읽힙니다.
• ``(밝은 회색) 및 ``(크롬이 포함된 흰색)을 의도적으로 사용합니다. 회색 카드는 "추상적 기능 주장"을 나타내고 흰색 카드는 "실제 제품 살펴보기"를 나타냅니다.
• 마케팅 카드에 실제 제품 UI 조각을 삽입합니다. 제품 자체를 보여줄 수 있으면 제품에 대한 마케팅 일러스트레이션을 그리지 마세요.
• 아바타 원을 36픽셀로 유지하세요. 완벽한 원, 때로는 파스텔 채우기도 가능합니다. 아바타는 뱃지 파스텔이 나타나는 유일한 곳입니다.
• 그룹화된 하위 탐색 세그먼트에는 ``을 사용하세요. 알약 알약 치료가 시그니처입니다.
• 모든 페이지를 어두운 바닥글로 마무리하세요. 밝음에서 어둠으로의 전환은 편집 리듬의 일부입니다.

하지 마세요

• 기본 CTA에 강조 색상(``, 배지 파스텔)을 사용하지 마세요. 시스템은 액션 레이어에서 단색입니다.
• 600을 넘는 무게를 굵은 글씨로 표시하지 마세요. Cal Sans의 700은 너무 과장된 것으로 읽혀집니다.
• 카드에 ``(16px)을 초과하는 둥근 반경을 사용하지 마세요. 더 큰 반경은 전문 예약 소프트웨어가 아닌 소비자용 앱으로 읽혀집니다.
• 바닥글과 추천 가격 등급을 제외한 어디에도 어두운 표면 카드를 배치하지 마세요. 어두운 표면은 의도적이고 희소한 신호입니다.
• 두 개의 연속 밴드에서 동일한 표면 모드를 반복하지 마십시오. Cal.com의 간격은 흰색 → 밝은 회색 → 흰색 → 제품 모형 카드 → 흰색 → 어두운 바닥글로 번갈아 표시됩니다.
• 시스템이 이미 인코딩한 것 이상으로 마우스 오버 상태 스타일을 추가하지 마십시오. 기본은 누를 때 어두워집니다. 다른 것은 변경되지 않습니다.

반응적 행동

중단점

| 이름 | 폭 | 주요 변경 사항 |

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

| 모바일 | _< 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 |

| 태블릿 | 768~1024px | 상단 탐색은 수평을 유지하지만 더 조여집니다. 탐색 알약 그룹 랩; 기능 카드 2개; 2업 가격 |

| 데스크탑 | 1024~1440px | 모든 메뉴 항목이 포함된 전체 상단 탐색 기능 3업 기능 카드; 4개 가격 책정 등급 |

| 와이드 | > 1440px | 외부 호흡 공간이 더 많은 데스크탑과 동일합니다. 최대 콘텐츠 너비는 1200px |

터치 대상

• `` 최소 40 × 40px.
• `` 정확히 36 × 36 — WCAG의 44 × 44보다 약간 낮지만 중앙에 있는 아이콘과 전체 원형 실루엣이 보완됩니다.
• `` 높이는 40픽셀입니다.
nav-pill-group 내부에 렌더링된 _
• ``에는 8 × 14 패딩이 있습니다. 효과적인 탭 영역은 주변 알약과 44px+를 충족합니다.

축소 전략

• 상단 탐색 메뉴가 < 768px; menu opens as a full-screen sheet.
에서 햄버거로 접힙니다.
• Hero band의 7-5 그리드는 모바일에서 단일 열로 축소됩니다. 먼저 h1 + 하위 헤드 + 버튼이 있고 그 다음 아래에 앱 모형 카드가 있습니다.
• 기능 그리드는 카드를 축소하는 대신 열을 줄입니다.
• 가격 등급 카드 축소 4 → 2 → 1; 기능 계층의 어두운 표면은 모든 중단점에서 시각적으로 뚜렷하게 유지됩니다.
• 세그먼트가 가로로 맞지 않으면 Nav-pill-group이 태블릿에서 여러 행으로 줄 바꿈됩니다.
• 아바타 + 추천 카드 레이아웃은 모든 중단점에서 그리드 정렬 상태를 유지합니다.

이미지 동작

• 카드 내부의 제품 UI 조각은 기본 가로 세로 비율을 유지합니다. 카드 자체의 크기가 조정됩니다.
• 아바타 사진은 중단점마다 원으로 잘립니다.
• Hero 앱 모형 카드는 모바일에서 비례적으로 확장됩니다. 캘린더 그리드는 읽기 쉬운 상태로 유지됩니다.

반복 가이드

1. 한 번에 하나의 구성 요소에만 집중하세요. YAML 키를 직접 참조합니다(``, ``).

2. 기존 구성 요소의 변형(`-active`, `-disabled`, `-focused`)은 `components:`.

에 별도의 항목으로 존재합니다.

3. 어디서나 ``을 사용하세요. 16진수 인라인은 사용하지 마세요.

4. 문서에 마우스를 올리지 마세요. 기본 및 활성/누름 상태만 해당됩니다.

5. 디스플레이 헤드라인은 음수 문자 간격으로 Cal Sans 600을 유지합니다. 바디는 인터 400을 유지합니다. 삼위일체는 흐려지지 않습니다.

6. 어두운 바닥글은 대부분의 페이지에서 유일하게 어두운 표면입니다. 다른 어두운 카드를 아무렇게나 추가하지 마세요.

7. 강조가 의심스러운 경우: Cal Sans를 더 크게 표시한 후 Cal Sans를 더 크게 표시하세요.

알려진 격차

• 캡처된 dembrandt 주파수 분석기 `Buttons: 0 variants` — Cal.com은 dembrandt의 버튼 선택기가 캡처하지 않는 `` 태그가 아닌 스타일이 지정된 `` 링크 요소로 대부분의 CTA를 렌더링합니다. 버튼 스타일은 스크린샷 실측 + 표준 Cal Sans / Inter 기준으로 문서화되어 있습니다.
• Cal Sans는 Cal.com에 라이선스가 부여되어 있으며 공개 웹 글꼴로 사용할 수 없습니다. 대체 내용은 타이포그래피 섹션에 문서화되어 있습니다.
• 배지 파스텔 세트(오렌지/핑크/보라색/에메랄드)는 관찰된 아바타 채우기 색상으로 문서화됩니다. 정확한 16진수 값은 계절에 따라 바뀔 수 있습니다.
• 애니메이션 및 전환 타이밍(캘린더 슬롯 선택기, 일정 확인, 통합 그리드 가리키기 표시)은 범위에 포함되지 않습니다.
• __CODEBCK_834___ 이외의 양식 확인 상태는 추출되지 않습니다. 오류/성공 상태를 확인하려면 가입 또는 예약 흐름이 필요합니다.
• 실제 예약 위젯 화면(cal.com/{username})은 마케팅 화면이 아닌 제품입니다. 사양이 범위를 벗어났습니다.
• 평가 섹션의 아바타 사진에는 사진 대신 이니셜이 포함된 파스텔톤 원형 채우기가 표시되는 경우가 있습니다. 두 처리 방법이 같은 페이지에 공존합니다.

概要

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

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

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

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

**主な特徴:**

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

色

ブランドとアクセント

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

表面

• **キャンバス** (`` — #ffffff): デフォルトのページフロア。
• **Surface Soft** (`` — #f8f9fa): Nav-pill-group 背景、非常にソフトなセクション分割。
• **表面カード** (`` — #f5f5f5): フィーチャー カード、紹介カード、バッジ ピル、デフォルトのアバター塗りつぶし。
• **強い表面** (`` — #e5e7eb): ヘアライン境界線の代替品。ボタンの背景が無効になりました。
• **サーフェス ダーク** (`` — #101010): フッターの背景 — すべてのページで唯一の暗いサーフェス。注目の価格帯カードにも使用されます。
• **Surface Dark Elevated** (`` — #1a1a1a): ダーク フッター内のネストされたカードまたは注目の価格設定カードに使用されます。
• **ヘアライン** (`` — #e5e7eb): ライト サーフェス上の 1 ピクセルの境界線のトーン。入力枠、テーブルの分割線、コンテンツ カードのアウトラインに使用されます (場合によっては)。
• **ヘアライン ソフト** (`` — #f3f4f6): 白いキャンバスを共有するセクション間に使用される、ほとんど見えない仕切り。

テキスト

• **インク** (`` — #111111): すべての見出しと主要なテキスト。
• **本文** (`` — #374151): デフォルトの実行テキストの色。
• **ミュート** (`` — #6b7280): 二次テキスト — 小見出し、パンくずリスト、フッター本文。
• **ミュート ソフト** (`` — #898989): 三次テキスト — キャプション、細字、著作権行。
• **プライマリ / ダーク** (`` / `` — #ffffff): プライマリ ボタンとダーク フッターのテキスト。
• **Dark Soft の場合** (`` — #a1a1aa): フッター本文テキスト — リンク行はわずかに落ち着いた白です。

セマンティック

• **成功** (`` — #10b981): 製品 UI の確認状態、成功バッジ。
• **警告** (`` — #f59e0b): 警告コールアウト。
• **エラー** (`` — #ef4444): 検証エラー。

タイポグラフィ

フォント ファミリー

_システムは、ディスプレイとブランド ワードマークに対して **Cal Sans** を実行し、その他すべてに対して **Inter** を実行します。 Cal Sans は、Cal.com のカスタム幾何学表示書体です。わずかに凝縮され、ウェイト 600、負の文字間隔です。 Inter は、本文、ボタン、ナビゲーション、キャプション、および表形式のコード ブロックを処理します。 フォールバック スタックは、両方のファミリーで `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif` を実行します。

分割は機能しています:

• Cal Sans (ディスプレイ、600 ウェイト、-0.5 ～ -2 ピクセルのトラッキング) — h1、h2、h3
• Inter (本文 + UI、ウェイト 400 ～ 600、文字間隔 0) — 段落、ラベル、ボタン、ナビゲーション

階層

|トークン |サイズ |重量 |行の高さ |文字間隔 | |

を使用します

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

| `` | 64ピクセル | 600 | 1.05 | -2ピクセル |ホームページ h1 (「会議をスケジュールするより良い方法」) — Cal Sans |

| `` | 48ピクセル | 600 | 1.1 | -1.5ピクセル |セクション責任者 (「万能スケジュール アプリ」) — Cal Sans |

| `` | 36ピクセル | 600 | 1.15 | -1ピクセル |サブセクションの見出し、カードのタイトル — Cal Sans |

| `` | 28ピクセル | 600 | 1.2 | -0.5ピクセル | CTA バンド責任者、価格帯の価格 — Cal Sans |

| `` | 22ピクセル | 600 | 1.3 | -0.3ピクセル |料金プラン名 — Inter |

| `` | 18ピクセル | 600 | 1.4 | 0 |特集カードのタイトル、紹介段落 |

| `` | 16ピクセル | 600 | 1.4 | 0 |小さなカード タイトル、リスト ラベル |

| `` | 16ピクセル | 400 | 1.5 | 0 |デフォルトの実行テキスト |

| `` | 14ピクセル | 400 | 1.5 | 0 |フッター本文、細字 |

| `` | 13ピクセル | 500 | 1.4 | 0 |バッジのラベル、キャプション |

| `` | 14ピクセル | 400 | 1.5 | 0 |コード スニペット、API サンプル — JetBrains Mono |

| `` | 14ピクセル | 600 | 1.0 | 0 |標準のボタン ラベル |

| `` | 14ピクセル | 500 | 1.4 | 0 |トップナビゲーションのメニュー項目 |

原則

Cal Sans はブランドの象徴であり、すべてのディスプレイの見出しがそれを使用しています。サポート型はインターが担当。境界は厳密です。Cal Sans に本文コピーを入れたり、Inter に表示見出しを入れたりしないでください。マイナスの文字間隔のない Cal Sans はブランド外のものとして読み取られます。-0.5 から -2 ピクセルのトラッキングは音声の一部です。

ディスプレイ ウェイトはすべてのサイズで 600 のままです。700 や 500 は決してありません。中間のウェイトが、Cal Sans を大げさになることなくモダンで自信に満ちたものにします。

フォントの代替に関する注意

_Cal Sans が利用できない場合は、ウェイト 600、文字間隔 -0.04em の **Inter** が使用可能な近似値となります。 Cal Sans の幾何学的な特徴は、Inter の人文主義的な形式とは異なりますが、置き換えによって重みと追跡の特徴が維持されます。 重量 700 の **Manrope** も、これに近い代替品です。

レイアウト

間隔システム_

• **基本単位:** 4px.
• **トークン:** `` 4px · `` 8px · `` 12px · `` 16px · `` 24px · `` 32px · `` 48px · `` 96px.
• **セクション パディング:** `` (96 ピクセル) — 編集バンド間の普遍的な垂直リズム。
• **カードの内部パディング:** フィーチャー カードおよび価格帯カードの場合は `` (32 ピクセル)。 `` (24 ピクセル) 紹介カードおよび製品モックアップ カード用。
• **ガター:** `` (24 ピクセル) 3 アップ グリッドのカード間。 `` (16 ピクセル) フッター列内。

グリッドとコンテナ

• **コンテンツの最大幅:** マーケティング ページを中心に ~1200 ピクセル。
• _**編集本文:** 単一の 12 列グリッド。ヒーロー バンドは、7/5 分割 (h1 左、アプリ モックアップ カード右) をよく使用します。
• **フィーチャー カード グリッド:** デスクトップでは 3 アップ、タブレットでは 2 アップ、モバイルでは 1 アップ。
• **価格グリッド:** デスクトップでは 4 アップ、タブレットでは 2 アップ、モバイルでは 1 アップ。
• **フッター:** デスクトップでは 4 列のリンク リスト、タブレットでは 2 列、モバイルでは 1 列に折り返されます。

ホワイトスペースの哲学

Cal.com は、過剰ではないものの十分な空白を使用しています。セクションのパディングは 96 ピクセル (最新の SaaS 標準)、カード内部のパディングは 32 ピクセルのままです。リズムは高速スキャン用に調整されています。各バンドには単一の h1 + h2 + サポート カードがあり、リストが密集することはありません。結果は「自信を持って叫んでいない」と表示されます。

標高と深さ

|レベル |治療 | |

を使用します

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

|フラット |影も境界線もありません |ボディセクション、トップナビゲーション、ヒーローバンド |

|柔らかいヘアライン | 1px `` 境界線 |入力、テーブルの仕切り、場合によってはカード |

|カード表面 | `` 背景 — 影なし |フィーチャーカード、紹介文 |

|微妙なドロップシャドウ |低アルファでのかすかな影 |価格帯カード、ホバー昇格状態 (システムは `0 1px 2px rgba(0,0,0,0.05)` および `0 4px 12px rgba(0,0,0,0.08)` を使用します) |

|注目の層 | `` 背景、影は必要ありません |注目の価格帯が暗い表面に反転します - 色のコントラストが高度の機能を果たします |

エレベーションの哲学は**ソフトでモダン**です。エレベーションカード上の小さなドロップシャドウ、強調のためのカラーブロックのコントラストです。 濃い影、ニューモーフィズム、ガラスモーフィズムはありません。

装飾の深さ

• マーケティング カード内に埋め込まれたカレンダー ウィジェットと製品 UI フラグメントには、製品 UI 自体からの独自の内部シャドウが含まれています。これらはシステム トークンではなく、コンテンツとして表示される製品クロムです。
• お客様の声セクションのアバター サークルには、パステルの塗りつぶし色が含まれる場合があります (``、__CODEBCK_708___ など)。モノクロのブランド ボイスを壊すことなく、小さな色彩の華やかさを追加します。

図形

境界線の半径スケール

|トークン |値 | |

を使用します

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

| `` | 4ピクセル |ほとんど役に立ちません - バッジのアクセントとして使用されます |

| `` | 6ピクセル |小さなインライン ボタン、ドロップダウン項目 |

| `` | 8ピクセル |標準 CTA ボタン、テキスト入力、カテゴリ タブ |

| `` | 12ピクセル |コンテンツ カード (フィーチャー カード、紹介カード、価格帯カード) |

| `` | 16ピクセル |ヒーロー アプリのモックアップ カード (マーキー コンポーネントの半径がわずかに大きい) |

| `` | 9999ピクセル | Nav ピル グループ、バッジ ピル |

| `` | 9999ピクセル / 50% |アバター、アイコン ボタン |

写真の幾何学

アバター写真は、36 ピクセルまたは 40 ピクセルの__CODEBCK_716___ (正円) を使用します。マーケティング カード内の製品 UI フラグメントは、ネイティブ クロムを保持します (多くの場合、カレンダー グリッド セル、ボタン行など、独自の内部半径を持ちます)。ヒーロー イラスト ゾーンは、__CODEBCK_717___ コーナーで 16:9 または 4:3 の比率を使用します。

コンポーネント

トップナビゲーション_

**`top-nav`** — 各ページの上部に固定された白いナビゲーション バー。高さ 64 ピクセル、__CODEBCK_719___ 背景。左側に Cal.com のワードマーク + ロゴ (ブランドの円が付いた小文字の「Cal.com」)、中央に主要な水平メニュー (製品、ソリューション、リソース、価格設定、エンタープライズ)、右側のクラスターに「サインイン」テキストリンク、「無料サインアップ」__CODEBCK_720___、および時々表示される言語セレクターが表示されます。 `` (Inter 14px / 500).

のメニュー項目

**`nav-pill-group`** — 2 ～ 3 個のサブナビゲーション セグメントを囲む小さなピル半径ラッパー (例: 「パーソナル」/「チーム」/「エンタープライズ」間の製品モード切り替え器)。背景__CODEBCK_723___、内部パディング6ピクセル、丸め__CODEBCK_724___。アクティブなセグメントは、ラッパー内に微妙なドロップ シャドウが付いた白いキャンバスの錠剤としてレンダリングされます。ピルインピル治療は、Cal.com の特徴的なインタラクティブ コンポーネントの 1 つです。

ボタン

**`button-primary`** — 署名のプライマリ CTA。背景 `` (#111111)、テキスト ``、タイプ `` (インター 14px / 600)、パディング 12px × 20px、高さ 40px、丸め `` (8px)。アクティブ状態 `button-primary-active` は `` (#242424) に移行します。

_**`button-secondary`** — ヘアラインの輪郭を持つ白いボタン。背景__CODEBCK_733___、テキスト__CODEBCK_734___、1ピクセルのヘアライン境界線、プライマリと同じパディング+高さ+半径。

**`button-icon-circular`** — 36 × 36 ピクセルの円形アイコン ボタン。背景__CODEBCK_736___、ヘアライン枠、インク色のアイコン。共有、「もっと見る」、カルーセル矢印に使用されます。

**`button-text-link`** — インライン テキスト ボタン、背景なし。 上部ナビゲーションの「サインイン」とカード内のインライン CTA リンクに使用されます。

**`text-link`** — `` のインライン本文リンク (ブランドはインライン リンクをモノクロのままにしています)。ホバー時に下線が引かれます (ホバー禁止ポリシーに従って文書化されていませんが、文脈のために言及されています)。

カードとコンテナ

**`hero-band`** — 7 ～ 5 グリッドの白いキャンバスのヒーロー: 左側に h1 + 小見出し + ボタンの行、右側に ``。垂直パディング `` (96px).

**`hero-app-mockup-card`** — カレンダー グリッド、タイムスロット、および主要な [確認] ボタンが内部にある実際の Cal.com 予約ウィジェットを示す、より大きな製品 UI モックアップ カード。背景 ``、1 ピクセルのヘアライン境界線、丸みを帯びた `` (16 ピクセル)、微妙なドロップ シャドウ。主人公の右側のアーティファクトとして使用されます。

_**`feature-card`** — 3 アップ機能グリッドで使用されます (「私たちを使えば、予定のスケジュール設定が簡単です」)。背景__CODEBCK_747___ (#f5f5f5)、丸め__CODEBCK_748___ (12ピクセル)、内部パディング__CODEBCK_749___ (32ピクセル)。上部に小さなアイコン、__CODEBCK_750___ の見出し、__CODEBCK_751___.

の本文の説明が表示されます。

_**`feature-icon-card`** — 低密度バンドの 4 アップ フィーチャ グリッドで使用される、より単純なカードのバリアント。ヘアライン枠付きの背景__CODEBCK_753___、丸みを帯びた__CODEBCK_754___、パディング__CODEBCK_755___ (24ピクセル)。小さなアイコン、__CODEBCK_756___ タイトル、短い説明が表示されます。

_**`product-mockup-card`** — 実際の Cal.com 製品 UI フラグメント (ワークフロー エディター、カレンダー グリッド、統合グリッド、自動化フロー) を示すカード。背景__CODEBCK_758___、角丸__CODEBCK_759___、パディング__CODEBCK_760___ (24ピクセル)。内部の製品 UI には独自の内部クロムがあります。これらのカードは製品を表示するものであり、製品の周囲を装飾するものではありません。

**`testimonial-card`** — 顧客見積グリッドで使用されます。背景__CODEBCK_762___、角丸__CODEBCK_763___、パディング__CODEBCK_764___ (24ピクセル)。一番上の行には `` + 名前 + 役割が含まれます。以下は__CODEBCK_766___.

の証言の引用です。

**`pricing-tier-card`** — 標準層カード。背景__CODEBCK_768___、角丸__CODEBCK_769___、パディング__CODEBCK_770___ (32ピクセル)。 `` にプラン名、__CODEBCK_772___ に価格、_`` に機能チェックリスト、そして下部に `` が表示されます。

_**`pricing-tier-card-featured`** — 注目の層 (通常は「Teams」)。背景が__CODEBCK_776___ (#101010)に反転し、テキストが__CODEBCK_777___に反転します。暗い表面は注目層の信号です。アクセントの境界線、バッジ、スケールのシフトはありません。

入力とフォーム

**`text-input`** — 標準のテキスト入力。背景__CODEBCK_779___、テキスト__CODEBCK_780___、タイプ__CODEBCK_781___、丸め__CODEBCK_782___ (8ピクセル)、パディング10ピクセル×14ピクセル、高さ40ピクセル。 ``.

の 1 ピクセルのヘアライン境界線

_**`text-input-focused`** — フォーカス状態。境界線を太くするか、__CODEBCK_785___ に移動して強調します。

タグ/バッジ

**`badge-pill`** — カテゴリ タグ (「製品」、「記事」、「新規」) およびパステル塗りつぶしのアバター代替品に使用される小さな錠剤ラベル。背景 `` またはバッジ パステルの 1 つ (``、__CODEBCK_789___ など)、テキスト ``、タイプ `` (13px / 500)、角丸 ``、パディング 4 ピクセル × 12px.

**`avatar-circle`** — 直径 36 ピクセル、丸みを帯びた ``。 写真または__CODEBCK_795___.

のイニシャルを含むパステル塗りつぶしを保持します。

_**`rating-stars`** — `` (#fb923c) のインライン星評価。証言アバターの近くを使用して、5 つ星の満足度スコアを表示します。

タブ/フィルター

**`category-tab`** + **`category-tab-active`** — nav-pill-group 内で使用されます。非アクティブ: 背景は透明、__CODEBCK_800___ テキスト。アクティブ: `` 背景、__CODEBCK_802___ テキスト、錠剤グループ ラッパー内の微妙なドロップ シャドウ。パディング 8 ピクセル × 14 ピクセル、角丸 ``.

CTA / フッター

_**`cta-band-light`** — プレフッターの「よりスマートでシンプルなスケジューリング」CTA カード。背景__CODEBCK_805___、角丸__CODEBCK_806___、パディング__CODEBCK_807___ (48ピクセル)。 `` に h2、サブライン、__CODEBCK_809___ を中央に配置します。

**`footer`** — すべてのページを閉じるダークネイビーのフッター。背景__CODEBCK_811___ (#101010)、テキスト__CODEBCK_812___。デスクトップ上の製品/ソリューション/会社/リソースをカバーする 4 列のリンク リスト。垂直パディング64ピクセル。 Cal.com のワードマークは、__CODEBCK_813___ の左上にあります。フッターは、すべてのページで唯一の暗い面です。意図的に反転することで、ページが視覚的に閉じられます。

推奨事項と禁止事項

実行

• __CODEBCK_814___ (#111111) はプライマリ CTA および h1/h2 タイプ用に予約してください。 Cal.com のボタンは青ではなく、ほぼ黒です。
• すべての表示見出しに Cal Sans を使用します。インターボディと組み合わせます。境界を曖昧にしないでください。
• 表示サイズに負の文字間隔を適用します (-0.5 ～ -2px)。 Cal Sans がなければ、ブランド外と見なされます。
• __CODEBCK_815___ (ライトグレー) と `` (クロム付き白) を意図的に使用します。グレーのカードは「抽象的な特徴の主張」を示し、白いカードは「実際の製品を見てください」ことを示します。
• マーケティング カード内に実際の製品 UI フラグメントを埋め込みます。製品自体を表示できる場合は、製品のマーケティング用イラストを描かないでください。
• _アバターの円は 36 ピクセル、完全な円、場合によってはパステルの塗りつぶしを維持してください。アバターは、バッジ パステルが表示される唯一の場所です。
• グループ化されたサブナビゲーション セグメントには `` を使用します。ピルインピル治療は特徴的です。
• すべてのページを暗いフッターで終了します。明から暗への移行は編集リズムの一部です。

しないでください

• プライマリ CTA ではアクセント カラー (``、バッジ パステル) を使用しないでください。システムはアクション層がモノクロです。
• 600 を超える体重を太字で表示しないでください。700 の Cal Sans は大げさだと思われます。
• カードでは `` (16 ピクセル) を超える丸みを帯びた半径を使用しないでください。より大きな半径は、プロの予約ソフトウェアではなく、消費者向けアプリとして読み取られます。
• フッターと注目の価格帯以外の場所にダーク サーフェス カードを配置しないでください。暗い表面は意図的な、希少な信号です。
• _同じサーフェス モードを 2 つの連続したバンドで繰り返さないでください。 Cal.com のペースは、白→ライトグレー→白→製品モックアップカード→白→ダークフッターとなります。
• システムがすでにエンコードしているものを超えてホバー状態のスタイルを追加しないでください。押すとプライマリが暗くなります。他には何も変わりません。

応答動作

ブレークポイント_

|名前 |幅 |主な変更点 |

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

|モバイル | < 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 |

|タブレット | 768–1024ピクセル |上部のナビゲーションは水平を保ちますが、締め付けられます。 nav-pill-group ラップ;フィーチャーカード 2 アップ。価格設定 2 アップ |

|デスクトップ | 1024–1440ピクセル |すべてのメニュー項目を備えた完全なトップナビゲーション。 3アップのフィーチャーカード。 4 段階の価格帯 |

|ワイド | > 1440ピクセル |デスクトップと同じですが、より外側に呼吸するスペースがあります。コンテンツの最大幅の上限は 1200 ピクセル |

タッチターゲット

• `` 少なくとも 40 × 40 ピクセル
• `` は正確に 36 × 36 です。WCAG の 44 × 44 よりわずかに下回りますが、中央に配置されたアイコンと全円のシルエットがそれを補います。
• `` 高さは 40 ピクセルです。
nav-pill-group 内でレンダリングされた
• `` には 8 × 14 パディングがあります。有効なタップ領域は周囲の錠剤と 44 ピクセル以上の範囲に収まります。

戦略の崩壊

• __HTMLTAG_573___ で上部のナビゲーションが折りたたまれてハンバーガーになります
• ヒーロー バンドの 7-5 グリッドは、モバイルでは単一列に折りたたまれます。最初に h1 + 小見出し + ボタン、次に下のアプリ モックアップ カードです。
• フィーチャ グリッドは、カードを縮小するのではなく、列を削減します。
• _価格帯カードは 4 → 2 → 1 に崩壊します。注目層のダーク サーフェスは、どのブレークポイントでも視覚的に明確なままです。
• セグメントが水平に収まらない場合、Nav-pill-group はタブレット上で複数行に折り返されます。
• アバター + 紹介カードのレイアウトは、すべてのブレークポイントでグリッドに整列したままになります。

画像の動作

• カード内の製品 UI フラグメントはネイティブのアスペクト比を保持します。カード自体のサイズが変更されます。
• アバター写真はブレークポイントごとに円形に切り取られます。
• ヒーロー アプリのモックアップ カードはモバイルでも比例して拡大縮小されます。カレンダー グリッドは読みやすいままです。

反復ガイド

1.一度に 1 つのコンポーネントに焦点を当てます。 YAML キーを直接参照します (``、__CODEBCK_825___)。

2.既存のコンポーネントのバリアント (`-active`、__CODEBCK_827___、__CODEBCK_828___) は、__CODEBCK_829___.

の個別のエントリとして存在します。

3.どこでも `` を使用します。16 進数をインライン化しないでください。

4.決してホバーを文書化しないでください。デフォルトおよびアクティブ/押された状態のみ。

5.見出しは Cal Sans 600 のままで、負の文字間隔で表示されます。ボディはインター400のまま。トリニティはブレません。

6.暗いフッターは、ほとんどのページで唯一の暗い面です。他のダーク カードを気軽に追加しないでください。

7.強調に迷った場合は、太字の Cal Sans の前に、Cal Sans を大きくしてください。

既知のギャップ

• デムブラント周波数アナライザーは__CODEBCK_831___をキャプチャしました — Cal.comは、ほとんどのCTAを__CODEBCK_833___タグではなくスタイル付き__CODEBCK_832___リンク要素としてレンダリングしますが、デムブラントのボタンセレクターはこれをキャプチャしません。 ボタン スタイルは、スクリーンショットのグラウンド トゥルース + 標準の Cal Sans / Inter ベースラインから文書化されています。
• _Cal Sans は Cal.com にライセンスされており、パブリック Web フォントとしては利用できません。代替案については、タイポグラフィのセクションに記載されています。
• バッジ パステル セット (オレンジ / ピンク / バイオレット / エメラルド) は、観察されたアバターの塗りつぶしの色から文書化されています。正確な 16 進値は季節によって変化する可能性があります。
• アニメーションと遷移のタイミング (カレンダー スロット ピッカー、スケジュール確認、統合グリッドのホバー表示) は対象外です。
• __CODEBCK_834___ を超えるフォーム検証状態は抽出されません。エラー/成功状態を確認するにはサインアップまたは予約フローが必要です。
• 実際の予約ウィジェット画面 (cal.com/{username}) は製品であり、マーケティング画面ではありません。その仕様は範囲外です。
• _紹介セクションのアバター写真には、写真の代わりにイニシャルがパステル調の円形で塗りつぶされることがあります。両方の処理が同じページに共存します。

Industry Context

In the landscape of modern digital products, Cal's design system stands out for its distinctive visual identity. Compared to peers, Cal invests more in establishing a recognizable brand presence through thoughtful design token systems. This approach signals maturity in how the organization thinks about design scalability — treating its visual language as an asset that requires documentation, guidelines, and governance.

Industry Context

In the landscape of modern digital products, Cal's design system stands out for its distinctive visual identity. Compared to peers, Cal invests more in establishing a recognizable brand presence through thoughtful design token systems. This approach signals maturity in how the organization thinks about design scalability — treating its visual language as an asset that requires documentation, guidelines, and governance.

Industry Context

In the landscape of modern digital products, Cal's design system stands out for its distinctive visual identity. Compared to peers, Cal invests more in establishing a recognizable brand presence through thoughtful design token systems. This approach signals maturity in how the organization thinks about design scalability — treating its visual language as an asset that requires documentation, guidelines, and governance.

Related Design Systems

Explore similar design languages from the same category:

• Zapier Design System
• Airbnb Design System
• Figma Design System
• Slack Design System