Cal.com

version: alpha name: Cal.com-design-analysis description: A clean, calendar-software-first interface anchored on white canvas with black primary CTAs and custom Cal Sans display typography. The system reads as friendly modern SaaS — generous whitespace, soft-rounded cards (~12px), product UI fragments shown directly inside cards, and a dark navy footer that visually closes long-scroll pages. Brand voltage comes from the Cal Sans display headline (a custom geometric face) and from product UI artifacts shown in-card rather than from accent colors.

colors: primary: "#111111" primary-active: "#242424" primary-disabled: "#e5e7eb" ink: "#111111" body: "#374151" muted: "#6b7280" muted-soft: "#898989" hairline: "#e5e7eb" hairline-soft: "#f3f4f6" canvas: "#ffffff" surface-soft: "#f8f9fa" surface-card: "#f5f5f5" surface-strong: "#e5e7eb" surface-dark: "#101010" surface-dark-elevated: "#1a1a1a" on-primary: "#ffffff" on-dark: "#ffffff" on-dark-soft: "#a1a1aa" brand-accent: "#3b82f6" success: "#10b981" warning: "#f59e0b" error: "#ef4444" badge-orange: "#fb923c" badge-pink: "#ec4899" badge-violet: "#8b5cf6" badge-emerald: "#34d399"

typography: display-xl: fontFamily: "Cal Sans, Inter, sans-serif" fontSize: 64px fontWeight: 600 lineHeight: 1.05 letterSpacing: -2px display-lg: fontFamily: "Cal Sans, Inter, sans-serif" fontSize: 48px fontWeight: 600 lineHeight: 1.1 letterSpacing: -1.5px display-md: fontFamily: "Cal Sans, Inter, sans-serif" fontSize: 36px fontWeight: 600 lineHeight: 1.15 letterSpacing: -1px display-sm: fontFamily: "Cal Sans, Inter, sans-serif" fontSize: 28px fontWeight: 600 lineHeight: 1.2 letterSpacing: -0.5px title-lg: fontFamily: "Inter, sans-serif" fontSize: 22px fontWeight: 600 lineHeight: 1.3 letterSpacing: -0.3px title-md: fontFamily: "Inter, sans-serif" fontSize: 18px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0 title-sm: fontFamily: "Inter, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0 body-md: fontFamily: "Inter, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-sm: fontFamily: "Inter, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 caption: fontFamily: "Inter, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 code: fontFamily: "JetBrains Mono, ui-monospace, monospace" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 button: fontFamily: "Inter, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 1 letterSpacing: 0 nav-link: fontFamily: "Inter, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0

rounded: xs: 4px sm: 6px md: 8px lg: 12px xl: 16px pill: 9999px full: 9999px

spacing: xxs: 4px xs: 8px sm: 12px md: 16px lg: 24px xl: 32px xxl: 48px section: 96px

components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 12px 20px height: 40px button-primary-active: backgroundColor: "{colors.primary-active}" textColor: "{colors.on-primary}" rounded: "{rounded.md}" button-primary-disabled: backgroundColor: "{colors.primary-disabled}" textColor: "{colors.muted}" rounded: "{rounded.md}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 12px 20px height: 40px button-icon-circular: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.full}" size: 36px button-text-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.button}" text-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" height: 64px nav-pill-group: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.pill}" padding: 6px hero-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: 96px hero-app-mockup-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.xl}" feature-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.lg}" padding: 32px feature-icon-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-sm}" rounded: "{rounded.lg}" padding: 24px product-mockup-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 24px testimonial-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 24px pricing-tier-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-lg}" rounded: "{rounded.lg}" padding: 32px pricing-tier-card-featured: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.title-lg}" rounded: "{rounded.lg}" padding: 32px text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 10px 14px height: 40px text-input-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.md}" category-tab: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.nav-link}" padding: 8px 14px rounded: "{rounded.md}" category-tab-active: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.md}" avatar-circle: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" rounded: "{rounded.full}" size: 36px badge-pill: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 12px rating-stars: backgroundColor: transparent textColor: "{colors.badge-orange}" typography: "{typography.caption}" cta-band-light: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.display-sm}" rounded: "{rounded.lg}" padding: 48px footer: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark-soft}" typography: "{typography.body-sm}" padding: 64px

概述

Cal.com的营销面是一个干净，友好的现代-SaaS界面—白色帆布（ {colors.canvas} — #ffffff ） ，黑色主CTA （ {colors.primary} — #111111 ） ，自定义* * Cal Sans * *显示排版，以及{colors.surface-card} （ #f5f5f5 ）浅灰色卡片包含产品UI片段。该系统经过精心设计，无需尝试给人留下深刻印象--每个乐队都有明确的层次结构、宽敞的空白和一个主要动作。

键入语音可分为两个角色： * * Cal Sans * * （品牌的自定义几何显示面—用于h1、h2、h3和英雄标题）和* * Inter * * （用于其他所有内容—正文、按钮、导航、标题）。Cal Sans使用负字母间距的重量600 （ -0.5px至-2px ，具体取决于尺寸） —感觉现代，略微浓缩，明显Cal.com。

组件电压来自* 直接显示在卡片内部的产品UI片段 * —日历小部件、调度表、自动化图表、集成磁贴。Cal.com不绘制产品的营销插图；它显示了嵌入在营销流程中的小规模实际产品铬。

页脚翻转到{colors.surface-dark} （ #101010 ） —一个深黑色，直观地关闭每个长滚动页面。页脚是系统中唯一的黑色表面；上面的所有内容都保持白色和浅灰色卡片。

关键特性

• 白色帆布，黑色主CTA （ {colors.primary} — #111111 ）。按钮是{rounded.md} （ 8px ） ，带有自信的重量-600个标签。标准友好型-SaaS按钮。
• 标题的自定义Cal Sans显示字体（此处替换为Inter权重600 ）。显示器尺寸上的负字母间距—几何，精确，略微浓缩。
• 浅灰色卡片表面（ {colors.surface-card} — #f5f5f5 ） ，用于特色卡片、感言和定价等级（非特色）。特色定价等级转换为{colors.surface-dark} （浅色页面上唯一的暗色卡片）。
• 直接嵌入在卡片中的产品UI片段— Cal.com在其营销卡片中显示真实的时间表选择器、日历小部件、集成网格。来自真实产品铬的小规模品牌电压。
• Nav-pill-group （ {component.nav-pill-group} ） —围绕分组导航段的小药丸半径包装器（例如，产品视图之间的子导航切换器）。药丸包装是系统的标志性交互式组件之一。
• 头像是圆形（ {rounded.full} ） ，直径为36px ，用于推荐行和团队列表表面。
• 页脚为深海军蓝（ {colors.surface-dark} — #101010 ） ，带浅色文本（ {colors.on-dark-soft} — #a1a1aa ）。即使上面的正文是白色的，深色页脚也会关闭每一页。
• 主要乐队之间的间距节奏为{spacing.section} （ 96px ） —足够紧凑，让人感觉现代-SaaS ，但足够慷慨，可以呼吸。
• 边框半径是分层的： {rounded.md} （ 8px ）用于按钮+输入， {rounded.lg} （ 12px ）用于内容卡， {rounded.xl} （ 16px ）用于英雄应用程序模型容器， {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片段中的标签药丸和小口音片段上，绝不会出现在Hero CTA上。

外观

• • 画布 * ({colors.canvas} — #ffffff) ：默认页面层。
• • 表面柔软 * （ {colors.surface-soft} — #f8f9fa ） ：导航药丸组背景，非常柔软的部分分隔器。
• • 表面卡片 * ({colors.surface-card} — #f5f5f5) ：功能卡片、感言卡片、徽章药片、默认头像填充。
• • 表面强度 * ({colors.surface-strong} - #e5e7eb) ：发际线边框替代方案；禁用按钮背景。
• • 表面深色 * ({colors.surface-dark} — #101010) ：页脚背景—每页上唯一的深色表面。也用于特色定价等级卡。
• • 表面深色提升 * ({colors.surface-dark-elevated} — #1a1a1a) ：用于深色页脚或特色定价卡内的嵌套卡片。
• • 发际线 * ({colors.hairline} — #e5e7eb) ：浅色表面上的1px边框色调。用于输入边框、表格分隔线、内容卡轮廓（有时）。
• • • Hairline Soft * * ({colors.hairline-soft} — #f3f4f6) ：在共享白色画布的部分之间使用的几乎不可见的分隔线。

文本

• • 墨迹 * ({colors.ink} — #111111) ：所有标题和主要文本。
• • 正文 * ({colors.body} — #374151) ：默认运行文本颜色。
• • 静音 * ({colors.muted} - #6b7280) ：辅助文本—子标题、面包屑、页脚正文。
• • 静音软 * ({colors.muted-soft} - #898989) ：三级文本—标题、精细打印、版权行。
• • • On Primary/On Dark * * ({colors.on-primary}/{colors.on-dark} - #ffffff) ：主按钮和深色页脚上的文本。
• • • On Dark Soft * * ({colors.on-dark-soft} - #a1a1aa) ：页脚正文—链接行略微静音的白色。

语义色色

• • 成功 * ({colors.success} — #10b981) ：产品UI中的确认状态、成功徽章。
• • 警告 * ({colors.warning} — #f59e0b) ：警告标注。
• • 错误 * （ {colors.error} — #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 (body + UI, 400-600 weight, 0 letter-spacing) —段落、标签、按钮、导航

分层结构

原理

Cal Sans是品牌声音—每个显示标题都使用它。Inter处理支持类型。边界严格：切勿在Cal Sans中放置正文副本，切勿在Inter中放置显示标题。没有负字母间距的Cal Sans读取为脱离品牌— -0.5至-2px跟踪是语音的一部分。

所有尺寸的显示重量均保持在600 ，从不显示700 ，从不显示500。中间的重量使Cal Sans感到现代和自信，而不会变得夸张。

关于字体替换的说明

如果Cal Sans不可用，重量为600且字母间距为-0.04 em的* * Inter * 是可用的近似值。Cal Sans的几何特征与Inter的人文主义形式不同，但替换保留了权重+跟踪签名。重量为700的 * Manrope * *是另一种紧密替代品。

布局

间距系统

• • *基本单位： * * 4像素。
• • *代币： * * {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 96px。
• • *部分填充： * * {spacing.section} （ 96px ） —编辑带之间的通用垂直节奏。
• • *卡片内部填充： * * {spacing.xl} （ 32px ）用于特征卡和定价层卡； {spacing.lg} （ 24px ）用于推荐卡和产品模型卡。
• • *排水沟： * * 3上网格中的卡片之间的{spacing.lg} （ 24px ） ；页脚列内的{spacing.md} （ 16px ）。

网格与容器

• • *最大内容宽度： * * ~ 1200px ，以营销页面为中心。
• • *编辑正文： * *单个12列网格；英雄乐队通常使用7/5分割（ h1左，应用程序模型卡右）。
• • *功能卡网格： * *桌面为3向上，平板电脑为2向上，手机为1向上。
• • *定价网格： * *桌面为4 up ，平板电脑为2 up ，手机为1 up。
• • *页脚： * *桌面为4列链接列表，平板电脑为2列，手机为1列。

空白理念

Cal.com使用宽松但不过多的空格—部分填充位于96px （现代-SaaS标准） ，卡片内部填充保持在32px。节奏经过校准以实现快速扫描：每个乐队都有一张h1 + h2 +支持卡，从不密集包装。结果是自信，而不是大喊大叫。

海拔高度和深度

提升理念是* 柔和而现代 * —提升卡片上的小阴影，颜色块对比度以强调。没有沉重的阴影，没有新形态，没有玻璃形态。

装饰深度

• 嵌入在营销卡片中的日历小部件和产品UI片段具有来自产品UI本身的内部阴影—这些不是系统令牌，它们是显示为内容的产品Chrome。
• 推荐部分中的头像圆圈有时带有柔和的填充颜色（ {colors.badge-orange}、{colors.badge-pink}等） —在不破坏单色品牌声音的情况下添加了一个小的色彩蓬勃发展。

形状

边框半径缩放

摄影几何图形

头像照片使用36px或40px的{rounded.full} （完美圆圈）。营销卡片内的产品UI片段保留其原生铬（通常有自己的内部半径—例如，日历网格单元格、按钮行）。英雄插图区域使用{rounded.xl}角的16: 9或4: 3比率。

组成部分

顶部菜单

• • top-nav * * —白色导航栏固定在每个页面的顶部。64px高， {colors.canvas}背景。左侧带有Cal.com文字商标+徽标（小写“Cal.com” ，带品牌圆圈） ，主水平菜单（产品，解决方案，资源，定价，企业）中心，带“登录”文本链接的右侧集群， “免费注册” {component.button-primary} ，以及有时可见的语言选择器。{typography.nav-link} （ Inter 14px/500 ）中的菜单项。
• • nav-pill-group * * —围绕2-3个子导航段的小药丸半径包装器（例如， “个人”/“团队”/“企业”之间的产品模式切换器）。背景{colors.surface-soft} ，内部填充6px ，圆角{rounded.pill}。活动片段呈现为白色帆布药丸，包装内有细微的阴影。丸中丸治疗是Cal.com的标志性互动组件之一。

纽扣

• • button-primary * * —签名主CTA。背景{colors.primary} （ #111111 ） ，文本{colors.on-primary} ，类型{typography.button} （ Inter 14px/600 ） ，填充12px × 20px ，高度40px ，圆角{rounded.md} （ 8px ）。活动状态button-primary-active切换到{colors.primary-active} （ #242424 ）。
• • button-secondary * * —带发际线轮廓的白色按钮。背景{colors.canvas} ，文本{colors.ink} ， 1px发际线边框，与主边距相同的填充+高度+半径。
• • button-icon-circular * * — 36 × 36px圆形图标按钮。背景{colors.canvas} ，发际线边框，墨色图标。用于共享、“查看更多”、轮播箭头。
• • button-text-link * * —内联文本按钮，无背景。用于顶部导航中的“登录”和卡片内的内联CTA链接。
• • text-link * * — {colors.ink}中的内联正文链接（品牌保持单色内联链接）。悬停时加下划线（未根据无悬停政策记录，但为上下文而提及）。

卡牌和容器

• • hero-band * * —带有7-5网格的白色画布英雄：左侧为h1 +副标题+按钮行，右侧为{component.hero-app-mockup-card}。垂直填充{spacing.section} （ 96px ）。
• • hero-app-mockup-card * * —更大的产品UI模型卡，显示实际的Cal.com预订小部件，带有日历网格、时段和主“确认”按钮。背景{colors.canvas} ， 1px发际线边框，圆形{rounded.xl} （ 16px ） ，微妙的阴影。用作英雄的右侧神器。
• • feature-card * * —用于3向上的功能网格（ “有了我们，预约安排很容易” ）。背景{colors.surface-card} （ #f5f5f5 ） ，圆角{rounded.lg} （ 12px ） ，内部填充{spacing.xl} （ 32px ）。顶部带有小图标、{typography.title-md}标题和{typography.body-md}中的正文描述。
• • feature-icon-card * * —更简单的卡片变体，用于低密度波段上的4上特征网格。背景{colors.canvas} ，发际线边框，圆形{rounded.lg} ，填充{spacing.lg} （ 24px ）。带有小图标、{typography.title-sm}标题、简短说明。
• • product-mockup-card * * —显示实际Cal.com产品UI片段的卡片（工作流编辑器、日历网格、集成网格、自动化流程）。背景{colors.canvas} ，圆角{rounded.lg} ，填充{spacing.lg} （ 24px ）。内部的产品用户界面有自己的内部镀铬—这些卡片显示产品，它们不会在其周围装饰。
• • testimonial-card * * —用于客户报价网格。背景{colors.surface-card} ，圆角{rounded.lg} ，填充{spacing.lg} （ 24px ）。顶行带有{component.avatar-circle} +名称+角色；下面是{typography.body-md}中的推荐语。
• • pricing-tier-card * * —标准等级卡。背景{colors.canvas} ，圆角{rounded.lg} ，填充{spacing.xl} （ 32px ）。计划名称为{typography.title-lg} ，价格为{typography.display-sm} ，功能清单为{typography.body-md} ，底部为{component.button-primary}。
• • pricing-tier-card-featured * * —特色会员等级（通常为“团队” ）。背景翻转为{colors.surface-dark} (#101010) ，文本反转为{colors.on-dark}。黑暗的表面是特色层信号—没有强调边框，没有徽章，没有比例偏移。

输入框与表单

• • text-input * * —标准文本输入。背景{colors.canvas} ，文本{colors.ink} ，类型{typography.body-md} ，圆角{rounded.md} （ 8px ） ，填充10px × 14px ，高度40px。{colors.hairline}中的1px发际线边框。
• • text-input-focused * * —焦点状态。边框加厚或移至{colors.ink}以突出显示。

标签/徽标

• • badge-pill * * —用于类别标签（ “产品”、“文章”、“新” ）和粉彩填充头像替代品的小药丸标签。背景{colors.surface-card}或徽章粉彩（ {colors.badge-orange}、{colors.badge-pink}等）之一，文本{colors.ink} ，类型{typography.caption} （ 13px/500 ） ，圆角{rounded.pill} ，填充4px × 12px。
• • avatar-circle * * — 36px直径，圆角{rounded.full}。可放置带有{typography.caption}首字母缩写的照片或粉彩填充物。
• • rating-stars * * — {colors.badge-orange} (#fb923c)中的内联星级。使用附近的推荐头像显示5星满意度分数。

选项卡/筛选器

• • category-tab * * + * * category-tab-active * * —在导航药丸组内使用。非活动：透明背景， {colors.muted}文本。活动： {colors.canvas}背景， {colors.ink}文字，丸组包装内微妙的阴影。内边距8px × 14px ，圆角{rounded.md}。

CTA/Footer

• • cta-band-light * * —前脚“更智能，更简单的调度” CTA卡。背景{colors.surface-card} ，圆角{rounded.lg} ，填充{spacing.xxl} （ 48px ）。在{typography.display-sm}中携带h2、子线和以{component.button-primary}为中心。
• • footer * * —关闭每页的深海军蓝页脚。背景{colors.surface-dark} (#101010) ，文本{colors.on-dark-soft}。桌面覆盖产品/解决方案/公司/资源的4列链接列表。垂直填充64px。Cal.com字标位于{colors.on-dark}的左上角。页脚是每页上唯一的黑色表面—故意反转在视觉上关闭页面。

注意事项

做

• 为主要CTA和h1/h2类型预留{colors.primary} （ #111111 ）。Cal.com的按钮接近黑色，而不是蓝色。
• 为每个显示标题使用Cal Sans。与Inter机身配对。切勿模糊边界。
• 在显示尺寸（ -0.5至-2px ）上应用负字母间距。没有它的Cal Sans读取为非品牌。
• 刻意使用{component.feature-card} （浅灰色）和{component.product-mockup-card} （白色带镀铬） —灰色卡片信号“抽象特征声明” ，白色卡片信号“看实际产品”。
• 在营销卡片中嵌入真实的产品UI片段。当您可以展示产品本身时，请勿绘制产品的营销插图。
• 将头像圆圈保持在36px ，完美的圆圈，有时带有粉彩填充。头像是唯一出现徽章粉彩的地方。
• 将{component.nav-pill-group}用于分组的子导航段。丸中丸疗法是标志性的。
• 以深色页脚结束每一页。从明到暗的过渡是编辑节奏的一部分。

不该做的事

• 请勿在主要CTA上使用强调色（ {colors.brand-accent}、徽章粉彩）。系统在动作层是单色的。
• 请勿加粗显示重量超过600。Cal Sans在700读作夸大其词。
• 请勿在卡片上使用超过{rounded.xl} （ 16px ）的圆角半径。较大的半径读取为消费者应用程序，而不是专业预订软件。
• 除了页脚和特色定价等级外，请勿将深色表面卡片放置在任何地方。黑暗的表面是一个深思熟虑的稀缺信号。
• 不要在两个连续的波段中重复相同的表面模式。Cal.com的起搏交替白色→浅灰色→白色产品→样卡→白色→暗脚。
• 请勿添加超出系统已编码范围的悬停状态样式--主模板在按下时变暗；其他模板不会发生变化。

自适应条件

断点

触控目标

• {component.button-primary}至少为40 × 40px。
• {component.button-icon-circular}正好为36 × 36 —略低于WCAG的44 × 44 ，但居中图标和全圆轮廓可以补偿。
• {component.text-input}高度为40px。
• 导航药丸组内部呈现的{component.category-tab}有8 × 14的填充；有效攻丝面积与周围药丸满足44px +。

折叠策略

• 顶部导航以< 768px的尺寸折叠到汉堡包；菜单将以全屏工作表的形式打开。
• 英雄乐队的7-5格在移动设备上折叠为单列— h1 +副标题+按钮，然后是下面的应用模型卡。
• 特征网格减少列，而不是缩小卡片。
• 定价等级卡折叠4 → 2 → 1 ；特色等级深色表面在每个断点上都保持视觉上的独特性。
• 如果片段不能水平放置，导航药丸组将包裹到平板电脑上的多行。
• 头像+推荐卡布局在每个断点保持网格对齐。

图像行为

• 卡片内的产品UI片段保留原生纵横比；卡片本身调整大小。
• 头像照片在每个断点处裁剪为圆圈。
• Hero应用程序模型卡在移动设备上按比例缩放—日历网格始终清晰可辨。

迭代指南

1. 一次只关注一个组件。直接引用其YAML密钥（ {component.feature-card}、{component.pricing-tier-card-featured} ）。
2. 现有组件的变体（ -active、-disabled、-focused ）在components:中作为单独的条目存在。
3. 在任何地方使用{token.refs} —切勿使用内联十六进制。
4. 切勿文档悬停。仅限默认和激活/按下状态。
5. 显示标题保持Cal Sans 600为负字母间距。车身支架Inter 400。三位一体不模糊。
6. 深色页脚是大多数页面上唯一的黑色表面。不要随便添加其他黑卡。
7. 当对强调有疑问时：在更大的Cal Sans之前更大的Cal Sans。

已知缺口

• Dembrandt频率分析仪捕获的Buttons: 0 variants — Cal.com将大多数CTA渲染为样式化的<a>链接元素，而不是Dembrandt的按钮选择器无法捕获的<button>标签。按钮样式由屏幕截图实况+标准Cal Sans/Inter基线记录。
• Cal Sans已授权给Cal.com ，不可用作公共Web字体；替代品在排版部分中记录。
• 徽章粉彩套装（橙色/粉红色/紫罗兰色/祖母绿）从观察到的头像填充颜色中记录下来；确切的十六进制值可能会随季节而变化。
• 动画和过渡时间（日历槽选择器、时间表确认、集成网格悬停显示）不在范围内。
• 未提取超出{component.text-input-focused}的表单验证状态—错误/成功状态需要注册或预订流程才能确认。
• 实际预订小部件表面（ cal.com/{username} ）是产品，而不是营销表面；其规格超出范围。
• 推荐部分中的头像照片有时会带有粉彩圆形填充，带有首字母缩写而不是照片；两种治疗方法共存于同一页面上。