Agility Digit 5 网站预览
Agility Digit 5 网站预览

Agility Digit 5

近白色基底、等宽文字标注与圆角卡片。

页面以近白色为基底,搭配深灰色文字。字体采用 Agility Diatype、Agility Diatype Mono。视觉特点包括等宽文字标注、圆角卡片、大字排版、紧密字距。适合参考的场景:专题展示页、项目介绍页。

查看原始网站

使用规范

建议采用

  • 使用 #f0eeeb 作为页面画布的默认颜色,使用 #292827 作为文本的默认颜色。
  • 将展示标题设置为 Agility Diatype 400 字体,负字间距:62px 使用 -1.86px,36px 使用 -1.08px。
  • 所有技术性眉题和紧凑的操作标签均使用 Agility Diatype Mono,字重 700,12px/12px(字号/行高),字间距为 0.72px。
  • 卡片、裁剪媒体和导航容器使用 12px 圆角;紧凑型按钮使用 6px 圆角。
  • 使用 #d6d3ce 的工具卡,无框阴影,底部内边距 18px。
  • 仅在大尺寸深色目的地控件中使用 #393837 背景的 24px 圆角面板,文字使用 #f0eeeb。
  • 保持标准组件间距为 18px,区块间距为 55px。

建议避免

  • 不要引入饱和的 UI 颜色;界面配色保持中性,从 #f0eeeb 到 #000000。
  • 不要使用 9999px 的胶囊形圆角;仅大尺寸目的地面板使用 24px 的胶囊处理。
  • 不要为 #ffffff 或 #d6d3ce 的卡片添加投影阴影。
  • 不要使用通用系统无衬线字体设置公共导航;应使用 Agility Diatype 14px/14px,字间距 -0.14px。
  • 不要为大尺寸展示标题使用 600-700 字重;应使用 Agility Diatype 400,字号 62px 或 36px。
  • 不要默认将浅色区域内容置于纯白色背景上;纯白色 #ffffff 仅用于内部卡片,外部画布使用 #f0eeeb。
  • 不要为媒体卡片、工具卡或紧凑型按钮设置大于 12px 的圆角。