Claude 网站预览
Claude 网站预览

Claude

近白色基底、细线分隔与扁平表面。

页面以近白色为基底,搭配近黑色文字。字体采用 Anthropic Serif、Anthropic Sans。视觉特点包括细线分隔、扁平表面、衬线字形、非对称构图。适合参考的场景:AI 服务首页、产品演示介绍页。

查看原始网站

使用规范

建议采用

  • 使用骨质羊皮(#f8f8f6)作为默认页面画布——大背景绝不用纯白色。
  • 将展示标题设为 Anthropic Serif 400 字重,30px 字号,行高 1.2;让衬线字体完成工作,而非依赖字重。
  • 保持整体单色调——唯一的色彩是陶土(#d97757),仅用于装饰性标记和编辑性强调,绝不用于按钮填充。
  • 提升卡片使用 24px 圆角,嵌套/次要卡片使用 16px,所有按钮、输入框和导航控件使用 8px。
  • 保持充足的区块间距:主要区块间为 64-80px,卡片内边距 32px,组件内元素间距为 8-12px。
  • 将炭墨(#121212)文字与骨白(#ffffff)卡片搭配,背景为骨质羊皮(#f8f8f6),以实现分层纸张效果。
  • 参考暖灰色(炭灰、灰白、鹅卵石灰)建立文本层级——绝不引入第二色彩进行强调。

建议避免

  • 不要在按钮中使用陶土橙或任何彩色填充——操作保持深色背景或浅色背景。
  • 不要用纯黑色(#000000)作为正文——炭墨(#121212)更温暖,读起来像墨水,而非虚空。
  • 不要将标题设为 700 以上字重——系统最大字重为 无衬线字体 580、衬线字体 400。
  • 不要为卡片添加厚重阴影——阴影仅以柔和的 4px 20-24px 淡洗形式出现,低不透明度,或完全不出现。
  • 不要使用冷色蓝或绿作为强调或品牌色——系统刻意保持温暖单色。
  • 不要在 Anthropic Sans 中设置大尺寸展示标题——衬线字体是标志,无衬线字体是工具。
  • 不要添加装饰性渐变——设计拒绝使用渐变,坚持扁平、印刷纸张表面风格。