Moving Parts 网站预览
Moving Parts 网站预览

Moving Parts

白色基底、等宽文字标注与居中构图。

页面以白色为基底,搭配近黑色文字。局部操作控件以蓝色强调。字体采用 Whyte Semi-Mono、Unica77。视觉特点包括等宽文字标注、居中构图、网格布局、大幅图像展示。适合参考的场景:技术产品首页、开发工具说明页。

查看原始网站

使用规范

建议采用

  • 将 #0000ff 作为唯一的色彩动作色——所有 CTA、激活状态、产品表面及彩色边框均源自同一色板。
  • 将展示尺寸推至 70px 以上;在该尺寸下收紧字间距至 -0.04em,使标题呈现为块状,而非行状。
  • 启用 Unica77 的风格变体(ss01–ss09),使标题、UI 和产品原型各自从同一字体家族中选取独特语气。
  • 为首屏卡片使用 90–106px 圆角,为产品和图像容器使用 14–24px 圆角——这种差异是刻意而有目的的,而非随意。
  • 当需要让某个区块显得像展示区时,转为深色背景(#121212)搭配白色文本和 0px 阴影。
  • 将蓝色 CTA 与一个小的黑底白字次级操作配对——绝不并列两个有色彩的按钮。
  • 通过一个大圆角浮动卡片或设备框来锚定首屏布局,使整体呈现三维感。

建议避免

  • 不要引入第二个饱和动作色。若需温暖感,应使用 #fffc52 面板表面,而非红色或橙色按钮。
  • 不要使用柔和阴影。该系统承诺仅使用厚重卡片阴影或完全无阴影——模糊度低于 15px,扩散度低于 20px 均不可接受。
  • 不要对正文文本设置过紧的字间距。在 30px 以下保持字间距为 0 到 +0.01em;仅在展示尺寸下压缩。
  • 不要在同一表面同时使用 Druk XXCondensed 和 TAN-BUSTER——每种字体都只作为一次性的视觉亮点,彼此会相互抵消。
  • 不要将有色彩的文本置于有色彩的背景上。蓝色文本置于蓝色面板上将完全消失;请将 #0000ff 保留用于填充和边框,而非正文内容。
  • 不要为按钮使用渐变、发光或玻璃效果。填充的纯色 #0000ff 是唯一规则。
  • 不要在首屏卡片上使用标准 SaaS 圆角(6px、8px、12px)。必须坚持使用超大圆角 76–106px 家族,或保持锐利状态。