Figure 03 网站预览
Figure 03 网站预览

Figure 03

白色基底、大幅摄影展示与分屏构图。

页面以白色为基底。字体采用 pp-neue-machina-plain、neue-haas-grot-text。视觉特点包括大幅摄影展示、分屏构图、产品图像展示。适合参考的场景：AI 工具官网、产品能力介绍页。

查看原始网站

使用规范

建议采用

  • 保持主画布为 Lab White #ffffff，仅将 Absolute Black #000000 用于全幅媒体章节。
  • 将显示标题设置为 pp-neue-machina-plain 400；使用 122px/122px 且 -1.22px 字间距以呈现最大面积的发光表面声明。
  • 使用 pp-neue-machina-plain 14px/14px 且 +0.28px 字间距用于大写导航标签。
  • 将说明段落设置为 neue-haas-grot-text 17px/27.2px 且 -0.17px 字间距。
  • 仅使用 Figure Black #0c0c0c 填充按钮，且半径为 24px，水平内边距为 32px。
  • 以 Machine Gray #6d6d6d 字体和 1px Calibration Gray #cecece 边框构建规格行。
  • 使用 20px 元素间距、32px 内容内边距和 40px 区块间距作为默认节奏。

建议避免

  • 不要引入饱和的强调色、渐变或彩色状态处理。
  • 不要将显示标题置于粗体 600 或 700 字重；pp-neue-machina-plain 保持 400 字重。
  • 不要对摄影帧进行圆角处理，也不要将全幅图像章节转为浮动卡片。
  • 不要使用厚重的盒阴影；通过留白、图像边界和 1px 边框来分隔不同区块。
  • 不要使用灰黑色填充输入框；联系方式字段保持透明，且为方形 0px 圆角。
  • 不要在 Absolute Black #000000 背景上使用 Machine Gray #6d6d6d 用于长篇文字。
  • 不要用 24px 胶囊形按钮替换为矩形按钮或 9999px 胶囊按钮。

相似设计语言