Cal

---
version: alpha
name: "Cal"
description: "Cal 的 DESIGN.md 中文参考模板，保留原始 design token 与专业术语，覆盖 color system、typography、layout、components、motion 与 interaction states。"
language: zh-CN
sourceLanguage: en
---

## 概览
Cal.com 的 marketing surface 是 clean、friendly 的 modern-SaaS interface：white canvas（`{colors.canvas}` — #ffffff）、black primary CTA（`{colors.primary}` — #111111）、custom **Cal Sans** display typography，以及承载 product UI fragment 的 `{colors.surface-card}`（#f5f5f5）light-gray card。系统读起来像是 confidently engineered，但不刻意炫技；每个 band 都有清晰 hierarchy、慷慨 whitespace 和一个 single primary action。

Type voice 清晰分成两个角色：**Cal Sans**（品牌 custom geometric display face，用于 h1、h2、h3 和 hero headline）与 **Inter**（用于其他所有内容：body、button、nav、caption）。Cal Sans 使用 weight 600，并带 negative letter-spacing（根据尺寸从 -0.5px 到 -2px），感觉 modern、略 condensed，并且非常 Cal.com。

Component voltage 来自 **直接展示在 card 内的 product UI fragment**：calendar widget、scheduling form、automation diagram、integration tile。Cal.com 不绘制关于产品的 marketing illustration；它把 actual product chrome 以小比例嵌入 marketing flow。

Footer 翻转为 `{colors.surface-dark}`（#101010），一种 deep near-black，用来在视觉上收束每个 long-scroll page。Footer 是系统中唯一的 dark surface；上方所有内容都保持 white-with-light-gray-cards。

**Key Characteristics:**
- White canvas 搭配 black primary CTA（`{colors.primary}` — #111111）。Button 使用 `{rounded.md}`（8px）与 confident weight-600 label，是标准 friendly-SaaS button。
- Headline 使用 custom `Cal Sans` display typeface（此处用 Inter weight 600 替代）。Display size 带 negative letter-spacing，几何、精确、略 condensed。
- Feature card、testimonial 与非 featured pricing tier 使用 light-gray card surface（`{colors.surface-card}` — #f5f5f5）。Featured pricing tier 翻转为 `{colors.surface-dark}`（light page 上唯一 dark card）。
- Product UI fragment 直接嵌入 card：Cal.com 在 marketing card 内展示真实 schedule picker、calendar widget、integration grid。Brand voltage 来自小比例真实 product chrome。
- Nav-pill-group（`{component.nav-pill-group}`）是包裹 grouped nav segment 的小型 pill-radius wrapper（如 product view 之间的 sub-nav switcher）。Pill wrapper 是系统 signature interactive component 之一。
- Avatar 为 circular（`{rounded.full}`），直径 36px，用于 testimonial row 和 team-listing surface。
- Footer 是 dark navy（`{colors.surface-dark}` — #101010），搭配 light text（`{colors.on-dark-soft}` — #a1a1aa）。尽管上方 body 是 white，dark footer 会收束每个页面。
- Major band 之间的 spacing rhythm 为 `{spacing.section}`（96px），足够 modern-SaaS 的紧凑，也足够呼吸。
- Border radius 有层级：button + input 使用 `{rounded.md}`（8px），content card 使用 `{rounded.lg}`（12px），hero app-mockup container 使用 `{rounded.xl}`（16px），nav-pill-group + badge 使用 `{rounded.pill}`，avatar + icon button 使用 `{rounded.full}`。

## Colors

### Brand & Accent
- **Primary** (`{colors.primary}` — #111111): dominant action color。用于所有 primary CTA 与 h1/h2 display type。Press state 切换为 `{colors.primary-active}` (#242424)。
- **Brand Accent** (`{colors.brand-accent}` — #3b82f6): 少量用于 inline link 和小型 badge / “Customer story” highlight。Cal.com 是 near-monochrome brand，blue 很少出现。
- **Badge Pastels** — 用于 category badge 和 avatar fill 的小型 pastel set：`{colors.badge-orange}` (#fb923c)、`{colors.badge-pink}` (#ec4899)、`{colors.badge-violet}` (#8b5cf6)、`{colors.badge-emerald}` (#34d399)。它们出现在 tag pill 和 product UI fragment 内的小型 accent moment，绝不用于 hero CTA。

### Surface
- **Canvas** (`{colors.canvas}` — #ffffff): 默认 page floor。
- **Surface Soft** (`{colors.surface-soft}` — #f8f9fa): Nav-pill-group background 与 very-soft section divider。
- **Surface Card** (`{colors.surface-card}` — #f5f5f5): Feature card、testimonial card、badge pill、default avatar fill。
- **Surface Strong** (`{colors.surface-strong}` — #e5e7eb): Hairline border alternative；disabled button background。
- **Surface Dark** (`{colors.surface-dark}` — #101010): Footer background，也是每个页面唯一 dark surface。同时用于 featured pricing tier card。
- **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #1a1a1a): 用于 dark footer 或 featured pricing card 内部的 nested card。
- **Hairline** (`{colors.hairline}` — #e5e7eb): Light surface 上的 1px border tone。用于 input border、table divider、content card outline（有时）。
- **Hairline Soft** (`{colors.hairline-soft}` — #f3f4f6): 在共享 white canvas 的 section 之间使用的 barely-visible divider。

### Text
- **Ink** (`{colors.ink}` — #111111): 所有 headline 与 primary text。
- **Body** (`{colors.body}` — #374151): 默认 running-text color。
- **Muted** (`{colors.muted}` — #6b7280): Secondary text，如 sub-heading、breadcrumb、footer body。
- **Muted Soft** (`{colors.muted-soft}` — #898989): Tertiary text，如 caption、fine-print、copyright line。
- **On Primary / On Dark** (`{colors.on-primary}` / `{colors.on-dark}` — #ffffff): Primary button 与 dark footer 上的 text。
- **On Dark Soft** (`{colors.on-dark-soft}` — #a1a1aa): Footer body text，link row 使用的 slightly muted white。

### Semantic Colors
- **Success** (`{colors.success}` — #10b981): Confirmation state、product UI 中的 success badge。
- **Warning** (`{colors.warning}` — #f59e0b): Warning callout。
- **Error** (`{colors.error}` — #ef4444): Validation error。

## Typography

### Font Family
系统用 **Cal Sans** 承载 display + brand wordmark，用 **Inter** 承载其他所有内容。Cal Sans 是 Cal.com 的 custom geometric display typeface，略 condensed，weight 600，并带 negative letter-spacing。Inter 处理 body、button、navigation、caption 和 tabular code block。两个 family 的 fallback stack 都走 `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`。

这个 split 是功能性的：
- Cal Sans（display、600 weight、-0.5 到 -2px tracking）用于 h1、h2、h3
- Inter（body + UI、400-600 weight、0 letter-spacing）用于 paragraph、label、button、nav

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | 用途 |
|---|---|---|---|---|---|
| `{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 head（“Your all-purpose scheduling app”），Cal Sans |
| `{typography.display-md}` | 36px | 600 | 1.15 | -1px | Sub-section head、card title，Cal Sans |
| `{typography.display-sm}` | 28px | 600 | 1.2 | -0.5px | CTA-band head、pricing tier price，Cal Sans |
| `{typography.title-lg}` | 22px | 600 | 1.3 | -0.3px | Pricing plan name，Inter |
| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | Feature card title、intro paragraph |
| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | Small card title、list label |
| `{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 label、caption |
| `{typography.code}` | 14px | 400 | 1.5 | 0 | Code snippet、API example，JetBrains Mono |
| `{typography.button}` | 14px | 600 | 1.0 | 0 | Standard button label |
| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu item |

### Principles
Cal Sans 是 brand voice，每个 display headline 都使用它。Inter 处理 supporting type。边界很严格：不要把 body copy 放进 Cal Sans，也不要把 display headline 放进 Inter。没有 negative letter-spacing 的 Cal Sans 会显得 off-brand；-0.5 到 -2px tracking 是声音的一部分。

Display weight 在所有 size 上都保持 600，绝不使用 700，也不使用 500。这个 middle weight 让 Cal Sans 显得 modern 且 confident，又不至于 bombastic。

### Font Substitutes
如果 Cal Sans 不可用，**Inter** weight 600 加 -0.04em letter-spacing 是可用近似。Cal Sans 的 geometric character 不同于 Inter 的 humanist form，但这个替代能保留 weight + tracking signature。**Manrope** weight 700 是另一个接近替代。

## 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），editorial band 之间的通用 vertical rhythm。
- **Card internal padding:** Feature card 与 pricing tier card 使用 `{spacing.xl}`（32px）；testimonial 与 product-mockup card 使用 `{spacing.lg}`（24px）。
- **Gutters:** 3-up grid 中 card 之间使用 `{spacing.lg}`（24px）；footer column 内部使用 `{spacing.md}`（16px）。

### Grid & Container
- **Max content width:** Marketing page 上居中约 1200px。
- **Editorial body:** 单一 12-column grid；hero band 常用 7/5 split（h1 在左，app mockup card 在右）。
- **Feature card grids:** Desktop 为 3-up，tablet 为 2-up，mobile 为 1-up。
- **Pricing grid:** Desktop 为 4-up，tablet 为 2-up，mobile 为 1-up。
- **Footer:** Desktop 为 4-column link list，tablet 换行为 2-up，mobile 为 1-up。

### Whitespace Philosophy
Cal.com 使用慷慨但不过量的 whitespace：section padding 为 96px（modern-SaaS standard），card internal padding 保持 32px。节奏为快速扫描校准：每个 band 都有一个 h1 + h2 + supporting card，而不是密集 list。结果读起来 confident-not-shouting。

## Elevation & Depth

| Level | Treatment | 用途 |
|---|---|---|
| Flat | 无 shadow，无 border | Body section、top nav、hero band |
| Soft hairline | 1px `{colors.hairline}` border | Input、table divider，偶尔用于 card |
| Card surface | `{colors.surface-card}` background，无 shadow | Feature card、testimonial |
| Subtle drop shadow | 低 alpha 的 faint shadow | Pricing tier card、hover-elevated state（系统使用 `0 1px 2px rgba(0,0,0,0.05)` 和 `0 4px 12px rgba(0,0,0,0.08)`） |
| Featured tier | `{colors.surface-dark}` background，无需 shadow | Featured pricing tier 反转为 dark surface，由 color contrast 完成 elevation |

Elevation philosophy 是 **soft and modern**：elevated card 使用小型 drop shadow，emphasis 依靠 color-block contrast。没有 heavy shadow、neumorphism 或 glassmorphism。

### Decorative Depth
- 嵌入 marketing card 的 calendar widget 与 product UI fragment 自带来自 product UI 的 internal shadow；这些不是 system token，而是作为 content 展示的 product chrome。
- Testimonial section 中的 avatar circle 有时使用 pastel fill color（`{colors.badge-orange}`、`{colors.badge-pink}` 等），在不破坏 monochrome brand voice 的前提下增加小型 chromatic flourish。

## Shapes

### Border Radius Scale

| Token | Value | 用途 |
|---|---|---|
| `{rounded.xs}` | 4px | 几乎不用，保留给 badge accent |
| `{rounded.sm}` | 6px | Small inline button、dropdown item |
| `{rounded.md}` | 8px | Standard CTA button、text input、category tab |
| `{rounded.lg}` | 12px | Content card（feature card、testimonial card、pricing tier card） |
| `{rounded.xl}` | 16px | Hero app-mockup card（marquee component 使用的略大 radius） |
| `{rounded.pill}` | 9999px | Nav-pill-group、badge pill |
| `{rounded.full}` | 9999px / 50% | Avatar、icon button |

### Photography Geometry
Avatar photo 使用 `{rounded.full}`（perfect circle），尺寸为 36px 或 40px。Marketing card 内的 product UI fragment 保留自身 native chrome（通常有自己的 internal radii，如 calendar grid cell、button row）。Hero illustration zone 使用 16:9 或 4:3 ratio，并带 `{rounded.xl}` corner。

## Components

### Top Navigation

**`top-nav`** — 固定在每个页面顶部的 white nav bar。高度 64px，`{colors.canvas}` background。左侧承载 Cal.com wordmark + logo（带 brand circle 的 lowercase “Cal.com”），中间是 primary horizontal menu（Product、Solutions、Resources、Pricing、Enterprise），右侧 cluster 包含 “Sign in” text-link、“Sign up free” `{component.button-primary}`，以及有时可见的 language selector。Menu item 使用 `{typography.nav-link}`（Inter 14px / 500）。

**`nav-pill-group`** — 包裹 2-3 个 sub-nav segment 的小型 pill-radius wrapper（如 “Personal” / “Teams” / “Enterprise” 之间的 product-mode switcher）。Background `{colors.surface-soft}`、internal padding 6px、rounded `{rounded.pill}`。Active segment 在 wrapper 内渲染为带 subtle drop shadow 的 white-canvas pill。Pill-in-pill treatment 是 Cal.com signature interactive component 之一。

### Buttons

**`button-primary`** — 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` 切换为 `{colors.primary-active}`（#242424）。

**`button-secondary`** — 带 hairline outline 的 white button。Background `{colors.canvas}`、text `{colors.ink}`、1px hairline border；padding + height + radius 与 primary 相同。

**`button-icon-circular`** — 36 × 36px circular icon button。Background `{colors.canvas}`、hairline border、ink-color icon。用于 share、“view more”、carousel arrow。

**`button-text-link`** — Inline text button，无 background。用于 top nav 中的 “Sign in” 与 card 内 inline CTA link。

**`text-link`** — 使用 `{colors.ink}` 的 inline body link（品牌保持 inline link monochrome）。Hover 时 underline（按 no-hover policy 不记录，仅作为 context 提及）。

### Cards & Containers

**`hero-band`** — White-canvas hero，使用 7-5 grid：左侧为 h1 + sub-headline + button row，右侧为 `{component.hero-app-mockup-card}`。Vertical padding `{spacing.section}`（96px）。

**`hero-app-mockup-card`** — 较大的 product-UI mockup card，展示真实 Cal.com booking widget，内部包含 calendar grid、time slot 和 primary “Confirm” button。Background `{colors.canvas}`、1px hairline border、rounded `{rounded.xl}`（16px）、subtle drop shadow。作为 hero 右侧 artifact 使用。

**`feature-card`** — 用于 3-up feature grid（“With us, appointment scheduling is easy”）。Background `{colors.surface-card}`（#f5f5f5）、rounded `{rounded.lg}`（12px）、internal padding `{spacing.xl}`（32px）。顶部承载 small icon，下面是 `{typography.title-md}` headline 和 `{typography.body-md}` body description。

**`feature-icon-card`** — 较简单的 card variant，用于低密度 band 的 4-up feature grid。Background `{colors.canvas}` 搭配 hairline border、rounded `{rounded.lg}`、padding `{spacing.lg}`（24px）。承载 small icon、`{typography.title-sm}` title 与 short description。

**`product-mockup-card`** — 展示真实 Cal.com product UI fragment 的 card（workflow editor、calendar grid、integration grid、automation flow）。Background `{colors.canvas}`、rounded `{rounded.lg}`、padding `{spacing.lg}`（24px）。内部 product UI 有自己的 internal chrome；这些 card 是在展示产品，而不是围绕产品做装饰。

**`testimonial-card`** — 用于 customer-quote grid。Background `{colors.surface-card}`、rounded `{rounded.lg}`、padding `{spacing.lg}`（24px）。Top row 承载 `{component.avatar-circle}` + name + role；下方放置 `{typography.body-md}` 的 testimonial quote。

**`pricing-tier-card`** — Standard tier card。Background `{colors.canvas}`、rounded `{rounded.lg}`、padding `{spacing.xl}`（32px）。承载 `{typography.title-lg}` 的 plan name、`{typography.display-sm}` 的 price、`{typography.body-md}` 的 feature checklist，以及底部 `{component.button-primary}`。

**`pricing-tier-card-featured`** — Featured tier（通常为 “Teams”）。Background 翻转为 `{colors.surface-dark}`（#101010），text 反转为 `{colors.on-dark}`。Dark surface 本身就是 featured-tier signal：没有 accent border、没有 badge、没有 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 使用 `{colors.hairline}`。

**`text-input-focused`** — Focus state。Border 加粗或切换为 `{colors.ink}` 以强调。

### Tags / Badges

**`badge-pill`** — 小型 pill label，用于 category tag（“Product”、“Article”、“New”）和 pastel-fill avatar substitute。Background `{colors.surface-card}` 或 badge pastel 之一（`{colors.badge-orange}`、`{colors.badge-pink}` 等）、text `{colors.ink}`、type `{typography.caption}`（13px / 500）、rounded `{rounded.pill}`、padding 4px × 12px。

**`avatar-circle`** — 36px diameter，rounded `{rounded.full}`。可以承载 photo，或承载 pastel fill + `{typography.caption}` 的 initials。

**`rating-stars`** — 使用 `{colors.badge-orange}`（#fb923c）的 inline star rating。用于 testimonial avatar 附近，展示 5-star satisfaction score。

### Tab / Filter

**`category-tab`** + **`category-tab-active`** — 用于 nav-pill-group 内部。Inactive：transparent background、`{colors.muted}` text。Active：`{colors.canvas}` background、`{colors.ink}` text、pill-group wrapper 内部的 subtle drop shadow。Padding 8px × 14px，rounded `{rounded.md}`。

### CTA / Footer

**`cta-band-light`** — Pre-footer “Smarter, simpler scheduling” CTA card。Background `{colors.surface-card}`、rounded `{rounded.lg}`、padding `{spacing.xxl}`（48px）。承载 `{typography.display-sm}` 的 h2、sub-line，以及居中的 `{component.button-primary}`。

**`footer`** — 收束每个页面的 dark navy footer。Background `{colors.surface-dark}`（#101010）、text `{colors.on-dark-soft}`。Desktop 为 4-column link list，覆盖 Product / Solutions / Company / Resources。Vertical padding 64px。Cal.com wordmark 以 `{colors.on-dark}` 位于左上角。Footer 是每个页面唯一 dark surface；这种刻意 inversion 在视觉上关闭页面。

## Do's and Don'ts

### Do
- 将 `{colors.primary}`（#111111）保留给 primary CTA 和 h1/h2 type。Cal.com 的 button 是 near-black，不是 blue。
- 每个 display headline 都使用 Cal Sans，并搭配 Inter body。不要模糊边界。
- Display size 应用 negative letter-spacing（-0.5 到 -2px）。没有它的 Cal Sans 会显得 off-brand。
- 有意区分 `{component.feature-card}`（light gray）和 `{component.product-mockup-card}`（white with chrome）：gray card 表示 “abstract feature claim”，white card 表示 “look at the actual product”。
- 在 marketing card 内嵌入真实 product UI fragment。能展示产品本身时，不要绘制产品的 marketing illustration。
- Avatar circle 保持 36px、perfect circle，有时使用 pastel fill。Avatar 是 badge pastel 唯一出现的位置。
- 对 grouped sub-nav segment 使用 `{component.nav-pill-group}`。Pill-in-pill treatment 是 signature。
- 每个页面都用 dark footer 结束。Light-to-dark transition 是 editorial rhythm 的一部分。

### Don't
- 不要在 primary CTA 上使用 accent color（`{colors.brand-accent}`、badge pastel）。系统在 action layer 上是 monochrome。
- 不要把 display weight 加粗到 600 以上。700 的 Cal Sans 会显得 bombastic。
- Card 上不要使用超过 `{rounded.xl}`（16px）的 radius。更大的 radii 会像 consumer app，而不是 professional booking software。
- 不要把 dark surface card 放在 footer 和 featured pricing tier 之外。Dark surface 是刻意且稀缺的信号。
- 不要在连续两个 band 中重复相同 surface mode。Cal.com 的 pacing 交替为 white → light-gray → white → product-mockup-card → white → dark-footer。
- 不要添加系统未编码的 hover state styling：primary press 时变暗，其它不变。

## Responsive Behavior

### Breakpoints

| Name | Width | 关键变化 |
|---|---|---|
| Mobile | < 768px | Hamburger nav；hero h1 64→32px；hero-app-mockup-card 堆叠到 content 下方；feature grid 为 1-up；pricing 为 1-up；footer 4 cols → 1 |
| Tablet | 768–1024px | Top nav 保持 horizontal 但收紧；nav-pill-group 换行；feature card 为 2-up；pricing 为 2-up |
| Desktop | 1024–1440px | 完整 top-nav 显示所有 menu item；feature card 为 3-up；pricing tier 为 4-up |
| Wide | > 1440px | 与 desktop 相同，但 outer breathing room 更大；max content width 上限 1200px |

### Touch Targets
- `{component.button-primary}` 最小为 40 × 40px。
- `{component.button-icon-circular}` 精确为 36 × 36，略低于 WCAG 的 44 × 44，但居中的 icon 与 full-circle silhouette 在视觉上补偿。
- `{component.text-input}` height 为 40px。
- `{component.category-tab}` 在 nav-pill-group 内渲染，padding 为 8 × 14；结合周围 pill 后 effective tap area 达到 44px+。

### Collapsing Strategy
- Top nav 在 < 768px 折叠为 hamburger；menu 打开为 full-screen sheet。
- Hero band 的 7-5 grid 在 mobile 上折叠为 single-column：先是 h1 + sub-head + button，再是下方 app-mockup card。
- Feature grid 通过减少 column 响应，而不是缩小 card。
- Pricing tier card 折叠为 4 → 2 → 1；featured-tier dark surface 在每个 breakpoint 都保持视觉区分。
- 如果 segment 横向放不下，nav-pill-group 在 tablet 上换为 multi-row。
- Avatar + testimonial card layout 在每个 breakpoint 都保持 grid-aligned。

### Image Behavior
- Card 内的 product UI fragment 保留 native aspect ratio；card 自身 resize。
- Avatar photo 在每个 breakpoint 都裁切为 circle。
- Hero app-mockup card 在 mobile 上按比例缩放，calendar grid 保持可读。

## Iteration Guide

1. 一次只关注一个 component。直接引用它的 YAML key（`{component.feature-card}`、`{component.pricing-tier-card-featured}`）。
2. 现有 component 的 variant（`-active`、`-disabled`、`-focused`）作为 `components:` 中的独立 entry。
3. 所有位置都使用 `{token.refs}`，不要 inline hex。
4. 绝不记录 hover。只记录 Default 与 Active/Pressed state。
5. Display headline 保持 Cal Sans 600，并带 negative letter-spacing。Body 保持 Inter 400。这个三元组不要模糊。
6. Dark footer 是大多数页面唯一的 dark surface。不要随意添加其他 dark card。
7. 拿不准 emphasis 时：先放大 Cal Sans，再加粗 Cal Sans。

## Known Gaps

- Dembrandt frequency analyzer 捕获到 `Buttons: 0 variants`：Cal.com 大多数 CTA 渲染为 styled `<a>` link element，而不是 `<button>` tag，dembrandt 的 button selector 无法捕获。Button style 基于 screenshot ground-truth + 标准 Cal Sans / Inter baseline 记录。
- Cal Sans 授权给 Cal.com，不能作为 public web font 使用；替代字体记录在 typography section。
- Badge pastel set（orange / pink / violet / emerald）基于观察到的 avatar fill color 记录；准确 hex value 可能季节性变化。
- Animation 与 transition timing（calendar slot picker、schedule confirmation、integration grid hover-reveal）不在范围内。
- 未提取 `{component.text-input-focused}` 之外的 form validation state；error / success state 需要 sign-up 或 booking flow 才能确认。
- 实际 booking widget surface（cal.com/{username}）是产品本身，不是 marketing surface；其 spec 不在范围内。
- Testimonial section 中的 avatar photo 有时会用带 initials 的 pastel circular fill 替代照片；两种处理在同一页面共存。