Motto® 网站预览
Motto® 网站预览

Motto®

近白色基底、胶囊形控件与宽松留白。

页面以近白色为基底,搭配近黑色文字。字体采用 disp (custom display face)、sans (custom sans face)。视觉特点包括胶囊形控件、宽松留白、大字排版、细线分隔。适合参考的场景:创意机构官网、项目作品集。

查看原始网站

使用规范

建议采用

  • 所有排版元素均使用 500 字重——绝不使用 400、600、700 或 800——
  • 首屏陈述文字使用 99px 或更大字号;系统设计为在建筑级尺度下阅读
  • 所有胶囊按钮、标签和头像均使用 9999px 边距半径——系统对交互元素仅定义一个半径
  • 使用 1px Motto Ink 线条下划文本链接——不通过改变链接颜色来传达可操作性
  • 将白色卡片直接放置于 Parchment(#f2f2f2)底色上,无阴影,无边框——对比度即为层级提升
  • 将 ® 标记与星号爆发搭配首屏标题使用,以营造品牌场景;它们是字体,而非图标
  • 元素间距使用 19–24px,区块间距使用 67–77px,以维持宽敞的杂志式节奏

建议避免

  • 绝不引入任何色彩——无蓝色,无绿色,无红色;系统刻意保持单色
  • 绝不为卡片、按钮或任何组件添加阴影——底色/卡片的对比是唯一的深度手段
  • 绝不使用加粗(700 以上)或轻量(300 以下)字重——系统完全校准于中等(500)字重
  • 绝不圆化卡片边角——卡片、面板和表面均为直角;只有胶囊形控件拥有 9999px 半径
  • 绝不将文本链接颜色与周围正文不同——下划线是可操作性的体现,而非色彩
  • 绝不将显示字体设置低于 61px——低于此值将失去杂志版面的气质并与无衬线字体竞争
  • 绝不将 ® 标记或星号作为独立图标资源使用——它们是排版字符,必须以字体形式呈现