02 · 字体
字体角色与字号#
展示字体是原版的 Copernicus（衬线，此处用 Cormorant Garamond 替代），只用常规字重、不加粗，并且在大号字上必须带负字距，否则会失去"文学感"。正文与界面统一使用无衬线的 StyreneB（此处用 Public Sans 替代），标签常用等宽字体做点缀。
Aa 展示级 display-lg
Copernicus(→Cormorant Garamond) · 400 · 64px · 字距 −1.5px
Aa 区块标题 display-sm
Copernicus · 400 · 40px · 字距 −1px
Aa 卡片大标题 title-xl
Copernicus · 400 · 28px · 字距 −0.3px
Aa 卡片标题 title-lg
StyreneB(→Public Sans) · 600 · 20px
Aa 组件标题 title-md
Public Sans · 600 · 17px
Aa 正文段落 body-md
Public Sans · 400 · 16px / 1.6
Aa 导航链接 nav-link / 按钮文字 button
Public Sans · 500 · 14px
Aa 小号标签 caption
Public Sans · 500 · 13px
AA 大写标签 CAPTION-UPPERCASE
mono · 500 · 12px · 字距 1.5px · 大写
const claude = "code block";
JetBrains Mono · 400 · 13px（代码块专用）
字体替代说明：Copernicus 与 StyreneB 是 Anthropic 的授权字体，未公开提供 Web Font。第三方分析建议的替代顺序为 —— 衬线：Tiempos Headline / Cormorant Garamond / EB Garamond；无衬线：Inter / Söhne / Public Sans。
function generateReport("q3") {
return claude.analyze(data);
}
04 · 布局
网格、间距与页面节奏#
Hero 区域采用 6:6 对称网格；主要板块之间统一使用 96px 的大间距（spacing.section），营造出杂志专栏式的呼吸感；卡片内部统一使用 32px 内边距。
12 栏网格示意
节奏规则：页面表面模式必须交替出现，不能连续两个板块使用相同底色 —— 米色 → 米色卡片 → 深色产品截图 → 米色 → 珊瑚色 CTA → 深色页脚，如此循环。
| 间距代币 | 数值 | 典型用途 |
|---|---|---|
| sp-xs | 8px | 徽标 / 标签内边距 |
| sp-sm | 16px | 组件内部小间距 |
| sp-md | 24px | 卡片间距 |
| sp-lg | 32px | 卡片内边距 |
| sp-xl | 48px | 板块内左右留白 |
| sp-section | 96px | 主要板块之间的垂直间距 |
浅色卡片
细边框 + 大圆角，零阴影。
深色卡片
靠色块对比制造层次，而非投影。
06 · 使用建议
该怎么做 / 不该怎么做#
✅ Do
- 始终把页面锚定在暖调米白画布上，纯白会显得像"随便一个 AI 工具"
- 每个展示级标题都用衬线字体，正文配无衬线字体
- 展示字号的负字距是硬性要求，去掉就会显得"离题"
- 主要板块之间保持 96px 的统一间距
🚫 Don't
- 不要用冷灰或纯白做画布底色
- 不要给衬线展示字体加粗（700 字重会显得夸张，系统统一停在 400）
- 不要用冷蓝或高饱和青色作为品牌强调色
- 不要让珊瑚色到处出现——它只用于个别元素的点缀，只有整块的珊瑚色 CTA 卡片才允许大面积铺色
- 不要用 Inter 做展示级标题字体，衬线字符是品牌声音的核心
- 不要让相邻两个板块使用相同的表面模式
- 不要叠加系统未定义的 hover 效果——按钮按下只会变暗，没有其它动效
07 · 响应式
断点行为#
| 组件 | 断点行为 |
|---|---|
| 顶部导航 | <768px 收起为汉堡菜单，展开为全屏米色抽屉 |
| Hero 区块 | 6:6 网格收起为单列：先显示 h1 + 副标题 + 按钮，插画/产品截图卡片放在下方；标题字号从 64px 降到 32px |
| 功能卡片网格 | 缩减列数而不是缩小卡片本身 |
| 定价卡片 | 4 栏 → 2 栏 → 1 栏；被选中档位的深色背景在所有断点下都保持醒目 |
| 代码窗口卡片 | 代码保持原字号，横向滚动而不是换行，确保可读性 |
| 连接器卡片 | 整张卡片都可点击，有效点击区域远大于 44px |
| 圆形图标按钮 | 固定 36×36px，略小于 WCAG 建议的 44px，但视觉上居中对齐 |
| 页脚 | 4 栏收起为 1 栏 |
08 · 局限说明
这份分析没有覆盖什么#
Copernicus 与 StyreneB 是 Anthropic 的授权字体，并未公开提供 Web Font，因此本页与原分析文档一样，全部使用开源替代字体。
Anthropic 的四芒星标志（spike-mark）只被当作 Logo 素材处理，没有被形式化为可复用的设计代币。
动效与过渡时长（聊天消息浮现、首页代码块打字机效果、agentic 流程图动画）不在本次分析范围内。
除输入框聚焦态外，其余表单校验状态（成功 / 失败提示）未被提取，需要真实的注册或反馈流程才能确认。
claude.ai 真实的产品聊天界面与本文档所述的营销官网共享部分代币，但还包含大量产品专属组件（对话气泡、消息工具栏、文件上传芯片、对话历史侧边栏），这些均超出本文档范围。
全文声明：本页内容整合自 VoltAgent/awesome-design-md 仓库中关于 Claude 的 DESIGN.md 分析及相关社区资料，属于第三方基于公开可观察界面模式做出的独立整理，不隶属于、不代表、也未获得 Anthropic 官方认可，其中的具体数值可能与真实产品存在出入，仅供学习与风格参考使用。