Peak Design 网站预览
Peak Design 网站预览

Peak Design

浅色基底、分屏构图与细线分隔。

页面以浅色为基底,搭配近黑色文字。字体采用 Geist、Exposure-style serif (Exposure-10)。视觉特点包括分屏构图、细线分隔、大幅图像展示、摄影展示。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • 首屏区域及节段展示标题仅使用 Exposure 风格斜体衬线字体,字号需为 48px 或以上;切勿用于正文、UI标签,或小于 40px 的内容。
  • 正文使用 Geist 400 字号 16px,行高 1.5;仅将 Geist 600/700 用于产品名称和行内强调。
  • 所有导航标签、按钮及眉题文字均使用 bryant 700 大写字体,正字间距(0.038em 在 14px 字号,0.057em 在 16px 字号);禁止使用 bryant 字体的大小写混合形式。
  • 在满幅内容中交替使用白色(#ffffff)和近黑色(#0c0c0c 或 #1a211e)以创建编辑性分栏布局;切勿在单个产品卡片或表单中同时使用两种色调。
  • 所有卡片和产品图像保持 8px 圆角,所有按钮、输入框和导航元素为 4px,所有徽章和滤镜标签为 9999px。
  • 仅将 #cc2e39 Ember Red 用于单次强调(如促销标识、紧迫感徽章或品牌点睛);切勿用于标准按钮、链接或重复的UI元素。
  • 产品卡片必须无边框、无阴影——通过 24px 以上的空白间距与画布分离,而非使用容器或层叠效果。

建议避免

  • 切勿为按钮、卡片或区块面板添加彩色背景——该系统刻意保持单色,仅使用黑、白、灰。
  • 切勿为任何元素添加 box-shadow 或 drop-shadow;设计依赖于平面色彩对比和细线边框实现分隔。
  • 切勿在正文或UI文本中使用 Exposure 衬线字体——它仅作为展示字体存在,字号低于 32px 时将失去可读性。
  • 切勿在 bryant 字体中使用大小写混合;该字体专为压缩全大写标签设计,小写形式会呈现出不同的字体风格。
  • 切勿在单个视口内将全色 Ember Red 应用于超过一个元素;其力量源于在单色系统中的稀缺性。
  • 切勿在卡片或图像上使用大于 8px 的圆角,且切勿将 32px 或 9999px 的圆角应用于除按钮和徽章外的任何元素。
  • 切勿将正文或产品描述居中对齐——布局语言为左对齐,具有编辑性,仅在首屏标题和区块标签中保留居中对齐。