Surface 网站预览
Surface 网站预览

Surface

近白色基底、摄影展示与网格布局。

页面以近白色为基底。字体采用 Munken Sans Web。视觉特点包括摄影展示、网格布局、错落拼贴、大字排版。适合参考的场景:内容网站首页、编辑专题页。

查看原始网站

使用规范

建议采用

  • 每个表面都采用#f7f7f7,每个标记、文字、边框和图标采用#000000;系统只有两种颜色,而非一种颜色加强调。
  • 展示标题以230px、900字重和1.0行高承担主要表现,周围保留宽松Bone画布,不放竞争元素。
  • 正文设为20px而非16px,行高1.5;超大正文是印刷出版物的标志性特征,使其区别于常规网页UI。
  • 编辑式内容栏使用225px左边距,让文字像杂志跨页,而非居中网页。
  • 分区间距采用96px或128px,不设分隔线;留白本身就是结构。
  • 编辑式图像以不规则位置和轻微旋转围绕展示文字,形成拼贴活力;所有图像保持0px圆角,呈现锐利的印刷裁切边缘。

建议避免

  • 不要引入#000000和#f7f7f7之外的任何颜色,没有蓝、红、灰或悬停浅色调。
  • 不要添加box-shadow、渐变或border-radius;系统刻意平面且直角。
  • 正文、说明或UI标签不要使用次级字体;Munken Sans以三种字重处理全部内容。
  • 不要采用强调色、图标背景或彩色徽章;信息层级来自字号与字重,绝非色相。
  • 正文或内容栏不要居中;所有内容都以225px编辑式边距左对齐。
  • 不要添加卡片背景、边框或抬升表面;内容始终直接置于Bone画布上。
  • 图标不要采用填充、彩色或多线宽处理;如需图标,使用1px线宽的单色黑色描边。