Claude

version: alpha name: Claude-design-analysis description: A warm-canvas editorial interface for Anthropic's Claude product. The system anchors on a tinted cream canvas with serif display headlines, warm coral CTAs, and dark navy product surfaces (code editor mockups, model showcase cards). Brand voltage comes from the cream/coral pairing — deliberately warm and humanist where most AI brands use cool blue + slate. Type voice runs a slab-serif display ("Copernicus" / Tiempos Headline) for h1/h2 and a humanist sans for body. The signature Anthropic black-radial-spike mark anchors the wordmark.

colors: primary: "#cc785c" primary-active: "#a9583e" primary-disabled: "#e6dfd8" ink: "#141413" body: "#3d3d3a" body-strong: "#252523" muted: "#6c6a64" muted-soft: "#8e8b82" hairline: "#e6dfd8" hairline-soft: "#ebe6df" canvas: "#faf9f5" surface-soft: "#f5f0e8" surface-card: "#efe9de" surface-cream-strong: "#e8e0d2" surface-dark: "#181715" surface-dark-elevated: "#252320" surface-dark-soft: "#1f1e1b" on-primary: "#ffffff" on-dark: "#faf9f5" on-dark-soft: "#a09d96" accent-teal: "#5db8a6" accent-amber: "#e8a55a" success: "#5db872" warning: "#d4a017" error: "#c64545"

typography: display-xl: fontFamily: "Copernicus, Tiempos Headline, serif" fontSize: 64px fontWeight: 400 lineHeight: 1.05 letterSpacing: -1.5px display-lg: fontFamily: "Copernicus, Tiempos Headline, serif" fontSize: 48px fontWeight: 400 lineHeight: 1.1 letterSpacing: -1px display-md: fontFamily: "Copernicus, Tiempos Headline, serif" fontSize: 36px fontWeight: 400 lineHeight: 1.15 letterSpacing: -0.5px display-sm: fontFamily: "Copernicus, Tiempos Headline, serif" fontSize: 28px fontWeight: 400 lineHeight: 1.2 letterSpacing: -0.3px title-lg: fontFamily: "StyreneB, Inter, sans-serif" fontSize: 22px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0 title-md: fontFamily: "StyreneB, Inter, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 title-sm: fontFamily: "StyreneB, Inter, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 body-md: fontFamily: "StyreneB, Inter, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.55 letterSpacing: 0 body-sm: fontFamily: "StyreneB, Inter, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.55 letterSpacing: 0 caption: fontFamily: "StyreneB, Inter, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 caption-uppercase: fontFamily: "StyreneB, Inter, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 1.5px code: fontFamily: "JetBrains Mono, ui-monospace, monospace" fontSize: 14px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0 button: fontFamily: "StyreneB, Inter, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1 letterSpacing: 0 nav-link: fontFamily: "StyreneB, 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-secondary-on-dark: backgroundColor: "{colors.surface-dark-elevated}" textColor: "{colors.on-dark}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 12px 20px button-text-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.button}" button-icon-circular: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.full}" size: 36px text-link: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.body-md}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" height: 64px hero-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: 96px hero-illustration-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 product-mockup-card-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.title-md}" rounded: "{rounded.lg}" padding: 32px code-window-card: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.code}" rounded: "{rounded.lg}" padding: 24px model-comparison-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.lg}" padding: 32px 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 callout-card-coral: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.title-md}" rounded: "{rounded.lg}" padding: 32px connector-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-sm}" rounded: "{rounded.lg}" padding: 20px 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}" cookie-consent-card: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.body-sm}" rounded: "{rounded.lg}" padding: 24px category-tab: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.nav-link}" padding: 8px 14px rounded: "{rounded.md}" category-tab-active: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.md}" badge-pill: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 12px badge-coral: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.caption-uppercase}" rounded: "{rounded.pill}" padding: 4px 12px cta-band-coral: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.display-sm}" rounded: "{rounded.lg}" padding: 64px cta-band-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.display-sm}" rounded: "{rounded.lg}" padding: 64px footer: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark-soft}" typography: "{typography.body-sm}" padding: 64px

概述

Claude.com是AI产品类别中最热情、最具编辑性的界面。基础氛围是* 染色奶油帆布 * （ {colors.canvas} — #faf9f5 ） —明显温暖，故意不是其他AI品牌使用的冷灰白色。标题运行* 平板衬线显示 * （ “Copernicus”/Tiempos Headline ） ，重量为400 ，字母间距为负值，与* * StyreneB/Inter * *正文SANS配对。这种组合感觉就像是文学出版物，而不是SaaS营销页面。

品牌电压来自* 奶油+珊瑚配对 * —珊瑚（ {colors.primary} — #cc785c ）是标志性的Anthropic口音，用于每个主要CTA、品牌文字商标和全出血标注卡。珊瑚温暖，略带柔和，从不呈青色/蓝色—与OpenAI的冷板岩， Google的饱和蓝色和Microsoft的企业青色相反。

该系统有三种逐页交替的表面模式：

1. • 奶油帆布 * ({colors.canvas}) —默认车身地板
2. • 淡奶油卡片 * ({colors.surface-card}) —特色卡片背景
3. • 深海军蓝产品表面 * ({colors.surface-dark}) —代码编辑器模型、模型展示卡、预页脚CTA、页脚本身

深色表面是Claude展示其产品铬的地方—代码块，终端输出，模型比较表，代理流程图。奶油与黑暗的对比是页面的起搏节奏。

关键特性

• 暖色奶油帆布（ {colors.canvas} — #faf9f5 ） ，深色暖墨文字（ {colors.ink} — #141413 ）。品牌的决定性颜色选择。
• CORAL主CTA （ {colors.primary} — #cc785c ）。很少用于单个按钮，慷慨地用于全出血珊瑚标注卡。
• 平板衬线通过Copernicus/Tiempos Headline显示标题，重量为400 ，字母间距为负数。与人文主义者配对，没有文学编辑的声音。
• 深海军蓝产品模型卡（ {colors.surface-dark} — #181715 ） ，带有代码块、端子面板、型号对比数据--品牌按比例展示产品铬，而不是抽象的营销插图。
• 浅色奶油特色卡（ {colors.surface-card} — #efe9de ） —比画布略深，用于内容驱动的特色说明。
• Anthropic径向尖峰标记—一个小的黑色星号样字形（ 4辐径向） —显示为品牌文字前缀和内容标记。
• 边框半径是分层的： {rounded.md} （ 8px ）用于按钮+输入， {rounded.lg} （ 12px ）用于内容+产品卡片， {rounded.xl} （ 16px ）用于英雄插图容器， {rounded.pill}用于徽章。
• 节奏{spacing.section} （ 96px ） —现代-SaaS标准。内部卡片填充在{spacing.xl} （ 32px ）保持慷慨。

配色

品牌与点缀色

• • • CORAL/PRIMARY * * （ {colors.primary} - #cc785c ） ：标志性的Anthropic暖色珊瑚。用于每个主要CTA背景、全出血珊瑚标注卡、品牌文字商标口音。spike-mark标志之外最知名的Anthropic颜色。
• • • Coral Active * * ({colors.primary-active} — #a9583e) ：按压/悬停-标记变体。
• • 珊瑚禁用 * （ {colors.primary-disabled} - #e6dfd8 ） ：去饱和奶油色禁用状态。
• • • Accent Teal * * ({colors.accent-teal} — #5db8a6) ：少用于次级产品表面（终端状态指示灯，连接器页面中的“活动连接”点）。
• • 重音琥珀色 * ({colors.accent-amber} — #e8a55a) ：用于类别徽章和内联高光的小配色。

外观

• • 画布 * ({colors.canvas} — #faf9f5) ：默认页面层。有色奶油—温暖，故意不是纯白色。
• • 表面柔软 * ({colors.surface-soft} - #f5f0e8) ：分割线，非常柔软的带背景。
• • • Surface Card * * ({colors.surface-card} — #efe9de) ：功能卡、内容卡。比画布深一步。
• • • Surface Cream Strong * * （ {colors.surface-cream-strong} - #e8e0d2 ） ：用于选定类别选项卡和强调截面带的最强奶油变体。
• • 表面深色 * （ {colors.surface-dark} — #181715 ） ：代码编辑器模型、模型展示卡、页脚。占主导地位的黑暗表面。
• • 表面暗色高架 * （ {colors.surface-dark-elevated} — #252320 ） ：暗带内的高架卡片（模型中的设置面板）。
• • • Surface Dark Soft * * ({colors.surface-dark-soft} — #1f1e1b) ：稍微浅一点的深色，用于较大深色卡片内的代码块背景。
• • 发际线 * ({colors.hairline} — #e6dfd8) ：奶油表面的1px边框色调。与{colors.primary-disabled}相同的十六进制—边框感觉就像一个仰角步骤，而不是墨线。
• • 发际线柔软 * （ {colors.hairline-soft} — #ebe6df ） ：几乎看不见的分隔线在同一带内使用。

文本

• • 墨迹 * ({colors.ink} — #141413) ：所有标题和主要文本。温暖的深色，略微偏离纯黑色。
• • • Body Strong * * ({colors.body-strong} — #252523) ：强调段落，铅文本。
• • 正文 * ({colors.body} — #3d3d3a) ：默认运行文本颜色。
• • 静音 * ({colors.muted} — #6c6a64) ：副标题、面包屑、页脚相邻的次要文本。
• • 静音软 * ({colors.muted-soft} - #8e8b82) ：标题、精细打印、版权行。
• • • On Primary * * ({colors.on-primary} — #ffffff) ：珊瑚按钮上的文本。
• • • On Dark * * ({colors.on-dark} — #faf9f5) ：深色表面上使用的奶油色白色（与画布色调相呼应）。
• • • On Dark Soft * * ({colors.on-dark-soft} - #a09d96) ：页脚正文，深色模型中的辅助标签。

语义色色

• • 成功 * ({colors.success} — #5db872) ：绿色状态点， “可用”指标。
• • 警告 * ({colors.warning} - #d4a017) ：警告标注（在营销表面上很少见）。
• • 错误 * （ {colors.error} — #c64545 ） ：验证错误。

字体排版

字体

系统运行* * Copernicus * * （或* * Tiempos Headline * 作为替代）作为标题的平板衬线显示面，以及 * StyreneB * * （或* * Inter * 作为替代）作为身体、导航和UI标签的人文主义者。 * JetBrains Mono * *处理代码块。后备堆栈走Tiempos Headline, Garamond, "Times New Roman", serif表示显示，走Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif表示正文。

显示/正文拆分是编辑性的：

• Copernicus衬线（重量400 ，负跟踪） → h1 ， h2 ， h3 ，英雄显示
• StyreneB sans (weight 400-500) → body, navigation, buttons, captions, labels
• JetBrains Mono→ 所有代码块和终端文本

分层结构

原理

显示屏尺寸使用重量400 （常规） ，从不加粗。负字母间距（ -0.3至-1.5px ）是必不可少的— Copernicus没有它读取为脱离品牌。衬线字符使Anthropic具有文学性，被认为是语音；切换到无衬线显示器将使Claude感觉像任何其他人工智能工具。

段落的体型重量为400 ，标签和强调的短语的重量为500。SANS身体是人文主义者（ StyreneB ） -从来没有几何形状。Inter是一种可接受的替代品，因为它具有相似的人文主义比例； Helvetica或Arial过于中性，会破坏温暖的编辑感觉。

关于字体替换的说明

如果Copernicus/Tiempos Headline不可用，权重为500且字母间距为-0.02 em的* * Cormorant Garamond * 是最接近的开源近似值。 * EB Garamond * *是一种后备方案。对于StyreneB ， * * Inter * *是最接近的匹配—两者都是专为屏幕阅读而设计的人文主义者。如果获得许可， * * Söhne * *是另一个接近的替代方案。

布局

间距系统

• • *基本单位： * * 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 ） —现代-SaaS节奏。
• • *卡片内部填充： * * {spacing.xl} （ 32px ）用于功能卡、定价层卡、型号比较卡； {spacing.lg} （ 24px ）用于代码窗口卡和连接器瓦片。
• • *标注/CTA带： * * {spacing.xxl} （ 48px ）位于珊瑚标注卡内； 64px位于较大的深色CTA带内。

网格与容器

• • *最大内容宽度： * * ~ 1200px居中。
• • *编辑正文： * *单个12列网格； hero通常使用6/6分割（ h1左，插图右）。
• • *功能卡网格： * *桌面为3向上，平板电脑为2向上，手机为1向上。
• • *连接器平铺网格： * *桌面为4向上或6向上，平板电脑为2向上，移动设备为1向上。
• • *定价网格： * *桌面端（通常为免费版/专业版/团队版/企业版）为3 ，移动端为1。

空白理念

奶油帆布+衬线显示+慷慨的内部填充创造了一个编辑节奏— Claude读起来像一个长形杂志栏，而不是一个营销模板。乐队之间的空白保持在96px的统一；卡片内部的空白很宽敞（ 32px ） ，让类型呼吸。

海拔高度和深度

海拔理念是* 色块优先，阴影罕见 *。大多数深度来自面霜与深色表面的对比度。阴影是最小的。深色表面模型有自己的内部产品chrome （代码编辑器滚动条，行号，语法高亮） ，可以添加细节，而无需外部阴影。

装饰深度

• Anthropic尖峰标记符号（ 4辐径向星号）在品牌文字标记中显示为小黑色标记，并作为内容标记内联。
• 代码编辑器模型具有自己的内部深度：静音蓝色/橙色/灰色中的语法高亮文本， {colors.muted-soft}中的行号， {colors.surface-dark-elevated}中底部的状态栏。
• 一些英雄插图使用简单的线条艺术，珊瑚和深海笔触在奶油上—极简，手绘感，从不逼真。

形状

边框半径缩放

摄影和插图

Claude的英雄很少使用摄影。相反，它使用：

• 简单的线条插图，珊瑚+奶油画布上的深海笔触
• 代码编辑器模型（在以开发人员为中心的页面上占主导地位的“英雄”处理）
• 黑暗中带有等宽文本的终端输出模型
• 带抽象几何缩略图的模型比较卡（ Opus/Sonnet/Haiku ）

当使用摄影（罕见—主要是推荐）时，头像会裁剪成直径为40像素的完美圆圈。

组成部分

顶部菜单

• • top-nav * * —奶油导航栏固定在每个页面的顶部。64px高， {colors.canvas}背景。左侧带有Anthropic spike-mark + “Claude”文字标记，主水平菜单（产品，解决方案，用例，定价，研究，公司）中左，右侧集群带“登录”文本链接， “尝试Claude” {component.button-primary} （ CORAL ）。{typography.nav-link} （ StyreneB 14px/500 ）中的菜单项。

纽扣

• • button-primary * * —标志性的CORAL CTA。背景{colors.primary} （ #cc785c ） ，文本{colors.on-primary} （白色） ，类型{typography.button} （ StyreneB 14px/500 ） ，填充12px × 20px ，高度40px ，圆角{rounded.md} （ 8px ）。活动状态button-primary-active变暗为{colors.primary-active} (#a9583e)。
• • button-secondary * * —带发纹轮廓的奶油色按钮。背景{colors.canvas} ，文本{colors.ink} ， 1px发际线边框，与主边距相同的填充+高度+半径。
• • button-secondary-on-dark * * —用于{colors.surface-dark}卡。背景{colors.surface-dark-elevated} (#252320) ，文本{colors.on-dark}。保持黑暗—系统永远不会在黑暗表面上反转为浅色辅助。
• • button-text-link * * —内联文本按钮，无背景。用于顶部导航和内联CTA链接中的“登录”。
• • button-icon-circular * * — 36px圆形图标按钮。背景{colors.canvas} ，发际线边框，墨色图标。用于轮播箭头，分享， “查看更多”。
• • text-link * * — {colors.primary} （珊瑚）中的内联正文链接。印刷机上的下划线；珊瑚内联链接是该系统最独特的小细节之一。

卡牌和容器

• • hero-band * * — 6-6网格的奶油画布英雄：左侧为h1 +副标题+按钮行，右侧为英雄插图卡或产品模型卡。垂直填充{spacing.section} （ 96px ）。
• • hero-illustration-card * * —一张较大的卡牌，上面装有英雄的右侧神器—有时是奶油背景上的珊瑚笔画线条插图，有时是暗码编辑器模型。背景{colors.canvas}或{colors.surface-dark} ，取决于上下文，圆角{rounded.xl} （ 16px ）。
• • feature-card * * —用于3上特征网格。背景{colors.surface-card} （ #efe9de -略深的奶油色） ，圆角{rounded.lg} （ 12px ） ，内衬{spacing.xl} （ 32px ）。顶部带有小图标、{typography.title-md}标题和{typography.body-md}中的正文描述。
• • product-mockup-card-dark * * —显示实际Claude产品铬的暗海军蓝卡片（聊天界面、代码编辑器、代理控件）。背景{colors.surface-dark} ，圆角{rounded.lg} ，内部填充{spacing.xl} （ 32px ）。在{colors.on-dark}中携带文本标签和下面的产品UI片段。
• • code-window-card * * —一张专门的暗牌，显示带有行号的代码编辑器， {typography.code} （ JetBrains Mono ）中的语法高亮代码，有时还有下面的“运行”按钮或终端输出面板。背景{colors.surface-dark} ， {colors.surface-dark-soft}用于内部代码块，圆角{rounded.lg} ，填充{spacing.lg} （ 24px ）。Claude代码产品页面的签名视觉元素。
• • model-comparison-card * * —用于主页的“您面临哪个问题？”部分，比较Opus/Sonnet/Haiku。背景{colors.canvas} ，发际线边框，圆形{rounded.lg} ，内部填充{spacing.xl} （ 32px ）。带有型号名称、简短的功能说明和{component.text-link}以了解更多信息。
• • pricing-tier-card * * —标准等级卡。背景{colors.canvas} ，发际线边框，圆形{rounded.lg} ，填充{spacing.xl} （ 32px ）。在{typography.title-lg} （ StyreneB ）中携带计划名称，在{typography.display-sm} （ Copernicus衬线！ ）中携带价格，在{typography.body-md}中携带功能清单，并在底部携带{component.button-primary}。
• • pricing-tier-card-featured * * —特色会员等级（通常为“专业”或“团队” ）。背景翻转为{colors.surface-dark} ，文本反转为{colors.on-dark}。黑暗的表面是特色层的信号。
• • callout-card-coral * * —一张带有重要行动号召的全出血珊瑚牌。背景{colors.primary} （ #cc785c ） ，文本{colors.on-primary} （白色） ，圆角{rounded.lg} ，填充{spacing.xxl} （ 48px ）。珊瑚表面是电压； CTA内部使用倒置按钮样式（珊瑚上的奶油/帆布按钮）。
• • connector-tile * * —用于连接器页面的集成网格。背景{colors.canvas} ，发际线边框，圆形{rounded.lg} ，填充20px。每个瓷砖的顶部都有一个徽标、一个{typography.title-sm}连接器名称和一个简短的描述。

输入框与表单

• • text-input * * —标准文本输入。背景{colors.canvas} ，文本{colors.ink} ，类型{typography.body-md} ，圆角{rounded.md} （ 8px ） ，填充10px × 14px ，高度40px。{colors.hairline}中的1px发际线边框。
• • text-input-focused * * —焦点状态。边框加厚或移至{colors.primary} （珊瑚）以突出显示。携带3px珊瑚-15% -alpha外圈。
• • cookie-consent-card * * —右下角浮动深色饼干横幅。背景{colors.surface-dark} ，文本{colors.on-dark} ，圆角{rounded.lg} ，填充{spacing.lg} （ 24px ）。为数不多的黑色表面在奶油页上小规模出现的地方之一。

标签/徽标

• • badge-pill * * —用于类别标签的小药丸标签。背景{colors.surface-card} ，文本{colors.ink} ，类型{typography.caption} （ 13px/500 ） ，圆角{rounded.pill} ，填充4px × 12px。
• • badge-coral * * — “新”、“测试版”的珊瑚填充徽章，特色亮点。背景{colors.primary} ，文本{colors.on-primary} ，类型{typography.caption-uppercase} （ 12px/500/1.5px跟踪） ，圆角{rounded.pill} ，填充4px × 12px。

选项卡/筛选器

• • category-tab * * + * * category-tab-active * * —用于解决方案/连接器页面上的子导航行。非活动：透明背景， {colors.muted}文本。活动： {colors.surface-card}背景， {colors.ink}文本。内边距8px × 14px ，圆角{rounded.md}。

CTA/Footer

• • cta-band-coral * * —前脚“Try Claude” CTA卡。全宽珊瑚填充，白色型，圆角{rounded.lg} ，填充64px。带有{typography.display-sm}中的h2 （仍然是衬线！ ）、子行和奶油按钮CTA。
• • cta-band-dark * * —以开发人员为中心的页面上的替代预页脚带。背景{colors.surface-dark} ，文本{colors.on-dark} ，圆角{rounded.lg} ，填充64px。通常与密码窗口卡配对。
• • footer * * —关闭每页的深海军蓝页脚。背景{colors.surface-dark} （ #181715 ） ，文本{colors.on-dark-soft}。桌面上的4列链接列表，涵盖产品/公司/资源/法律。垂直填充64px ， Anthropic spike-mark + “Anthropic”字标位于{colors.on-dark}的顶部。页脚永远不会反转。

注意事项

做

• 将每一页锚定在奶油画布上。纯白色读作“任何其他人工智能工具” ；暖色调是品牌差异化的标志。
• 为每个显示标题使用Copernicus衬线。搭配StyreneB SANS机身。显示器尺寸上的负字母间距是不可协商的。
• 预留{colors.primary} （珊瑚）进行主要CTA和全出血{component.callout-card-coral}时刻。请勿在其他地方涂抹珊瑚。
• 使用{component.product-mockup-card-dark}和{component.code-window-card}显示实际的Claude产品铬。当您可以显示真实代码时，请勿绘制代码的营销插图。
• {component.feature-card} （奶油色）与{component.product-mockup-card-dark} （海军蓝）交替搭配。奶油到黑暗的节奏是品牌的起搏机制。
• 使用Anthropic spike-mark字形作为品牌文字前缀。切勿在文字商标本身内将商标反转为黑白。
• 在主要频段之间应用{spacing.section} （ 96px ）。

不该做的事

• 请勿使用凉爽的灰色或纯白色作为画布。奶油就是品牌。
• 不要加粗衬线显示粗细。Copernicus在700读作夸大其词；系统保持在400。
• 请勿使用冷蓝色或饱和青色作为品牌口音。珊瑚是品牌电压。
• 不要到处放珊瑚。珊瑚在单个元素上是稀缺的，只有在全流血的珊瑚标注卡上才是慷慨的。
• 不要使用Inter显示标题。衬线字符是品牌声音。
• 不要在两个连续的波段中重复相同的表面模式。起搏交替：奶油奶油卡片深→色模型→ →奶油珊瑚→标注→黑脚。
• 请勿添加超出系统已编码范围的悬停状态样式--主模板在按下时变暗；其他模板不会发生变化。

自适应条件

断点

触控目标

• {component.button-primary}至少为40 × 40px。
• {component.button-icon-circular}正好为36 × 36 —略低于WCAG 44 ，但在视觉上居中。
• {component.text-input}高度为40px。
• 连接器瓷砖整个卡片区域是可敲击的；有效敲击区域> > 44px。

折叠策略

• 顶部导航以< 768px的尺寸折叠到汉堡包；菜单将以全屏奶油纸的形式打开。
• 英雄乐队的6-6格在移动设备上折叠为单列— h1 +副标题+按钮，然后是下面的插图/模型卡。
• 特征网格减少列，而不是缩小卡片。
• 定价等级卡折叠4 → 2 → 1 ；特色等级深色表面在每个断点上都保持视觉上的独特性。
• 代码窗口卡片允许在卡片内水平滚动，而不是包装代码行，从而保持每个断点的代码可读性。

图像行为

• 深色模型中的代码块保持固定的字体大小；在移动设备上水平滚动而不是换行。
• 英雄插图按比例缩放；移动设备上的线条艺术笔触略微变薄。
• 推荐中的头像照片在每个断点处裁剪到圆圈。

迭代指南

1. 一次只关注一个组件。引用其YAML键({component.feature-card}, {component.code-window-card})。
2. 现有组件的变体（ -active、-disabled、-focused ）在components:中作为单独的条目存在。
3. 在任何地方使用{token.refs} —切勿使用内联十六进制。
4. 切勿文档悬停。仅限默认和激活/按下状态。
5. 显示标题保持Copernicus衬线400 ，带负面跟踪。车身支架StyreneB/Inter 400。分裂是牢不可破的。
6. 奶油+珊瑚+深海军蓝是三位一体。不要引入第四种表面色调（没有紫色卡片，没有绿色部分）。
7. 当对强调有疑问时：在粗体之前放大Copernicus衬线。

已知缺口

• Copernicus和StyreneB是获得许可的Anthropic字体，不可用作公共Web字体。替代品（衬线为Tiempos Headline/Cormorant Garamond/EB Garamond ； SANS为Inter/Söhne ）记录在排版部分。
• Anthropic径向尖峰标记是一个渲染为内联SVG的品牌符号；它在这里没有正式化为系统令牌。将其视为徽标资产。
• 动画和过渡时间（聊天消息显示、主页上的代码块打字机效果、代理流程图动画）不在范围内。
• 未提取超出{component.text-input-focused}的表单验证状态—错误/成功状态需要注册或反馈流来确认。
• 实际的Claude产品表面（ claude.ai聊天界面）与营销网站共享一些代币，但添加了许多特定于产品的组件（聊天气泡、消息工具、文件上传芯片、对话历史记录侧边栏） ，这些组件超出了此营销表面文档的范围。
• 某些页面上的“代理”/“计算机使用”演示卡显示控制浏览器的动画Claude —静态屏幕截图无法完全捕获动画铬。