Fonts In Use 网站预览
Fonts In Use 网站预览

Fonts In Use

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

页面以浅色为基底,搭配近黑色文字。字体采用 BentonSansRE、RelayCond。视觉特点包括网格布局、摄影展示、细线分隔。适合参考的场景:设计产品官网、作品展示页。

查看原始网站

使用规范

建议采用

  • 所有正文与UI文字采用BentonSansRE,界面装饰元素绝不用展示衬线或装饰字体替代。
  • 一致使用5px/10px/20px/30px间距尺度,网格卡片列间隔20px、行间隔30px。
  • 所有边框保持1px solid #000000或#999999,绝不用更粗线条或彩色描边。
  • 样本卡片中的字体名称用所记录的实际字体呈现,例如Baste用Baste、Proxima Nova用Proxima Nova;系统将这一点作为自身特色。
  • RelayCond仅用于报头字标和Staff Pick飘带,将其视为受限的强调字体。
  • 所有交互控件圆角保持2px,卡片和图片0px,处处保持锐利角落。
  • 页面背景设为#ffffff,绝不引入表面浅色色调变化,平坦感就是品牌。

建议避免

  • 不要引入任何强调色、渐变或彩色背景,系统严格保持无彩色。
  • 不要为卡片、按钮或模态框添加投影、辉光或任何box-shadow高度效果。
  • 圆角不要超过2px,胶囊形、8px卡片圆角或大型圆形头像都会破坏编辑式气质。
  • 标题与正文不要使用不同字体家族;UI只使用一种无衬线BentonSansRE和一种窄体强调RelayCond,没有其他字体。
  • 任何UI场景中都不要使用#000000、#ffffff、#f0f0f0、#dddddd和#999999以外的颜色。
  • 正文或导航项不要居中,布局始终左对齐,并以左侧为锚。
  • 除了搜索放大镜,表单字段或按钮内部不要添加图标,界面主要由文字构成。