Claude Type 网站预览
Claude Type 网站预览

Claude Type

白色基底、磨砂表面与渐变展示。

页面以白色为基底,搭配近黑色文字。字体采用 MagicUIPro。视觉特点包括磨砂表面、渐变展示、宽松留白、满幅色块。适合参考的场景:设计作品集、创意服务介绍页。

查看原始网站

使用规范

建议采用

  • 所有交互元素,包括导航栏、按钮、徽章和标签,都使用 100px border-radius。
  • 铺满边缘的图像卡片和深色样张卡片采用 900px border-radius,形成标志性的拱形或墓碑形状。
  • 所有正文使用 MagicUIPro 的 400 字重;界面文案不使用粗体,让体系保持安静,使展示衬线字体得以发声。
  • #99ff66(Acid Lime)仅用于元信息徽章,不用于背景、边框或正文。
  • 所有 1px 细线边框使用 #2b1b1b(Espresso);这种暖棕是整个体系的结构线色。
  • 保持充裕间距:主要分区之间至少 64px,组件组内为 14–16px。
  • 所有 MagicUIPro 文字启用 "dlig" font-feature-settings,开启自定义任意连字。

建议避免

  • 卡片或按钮不要添加投影、发光或模糊;体系有意不使用阴影。
  • 除 #99ff66 外,不引入更多强调色;3% 彩色程度是有意为之。
  • 卡片的 border-radius 不低于 10px,交互元素不低于 100px;胶囊形与拱形构成二元形状词汇。
  • 正文不超过 18px,也不使用 MagicUIPro 呈现展示标题;展示衬线字体是产品内容,而非界面。
  • 页面背景不使用纯白(#ffffff),画布始终为 #fcfbf7 奶油色。
  • MagicUIPro 不使用粗体(600+)或半粗体;该家族只有 400,任何合成加粗都会破坏体系。
  • 正文段落不要居中,也不构成密集文字块;布局像疏朗画廊,行高宽松(1.6–2.0)。