FORA 网站预览
FORA 网站预览

FORA

白色基底、错落拼贴与网格布局。

页面以白色为基底,搭配近黑色文字。字体采用 Theinhardt、Theinhardt Medium。视觉特点包括错落拼贴、网格布局、大字排版、大幅摄影展示。适合参考的场景:设计工作室首页、案例展示页。

查看原始网站

使用规范

建议采用

  • Terracotta(#a9553c)与 Lilac Veil(#ddbdea)仅用于铺满边缘的面板填充,不用于按钮背景、文字色或边框。
  • letter-spacing 随尺寸增长:15px 时为 0.01em,35px 时为 0.024em;标题不采用负字间距。
  • 所有文字保持 400 字重,仅极少微型标签使用 700;字重对比是一种资源,须克制使用。
  • 页面由严格的边缘相接图块网格构成,图块间的白色画布就是栏间距,不加外边距、阴影或细线。
  • 全部面板与卡片采用 0px border-radius;按钮用 5px,9999px 仅留给胶囊形标签。
  • 面板内部四侧均为 25px 内边距,标题距边缘 25px,贴合而非悬浮。
  • 每个彩色面板只配一个简短文字元素,即标题加可选行内箭头链接,不在面板内堆叠多个组件。

建议避免

  • 黑色不柔化成近黑或加底色;#000000 的绝对性与对比是体系基础。
  • 不引入第三种彩色、渐变或中性中灰;双色纪律就是品牌。
  • 卡片不添加阴影、发光或抬升;网格扁平,表面落在页面上,而非悬于其上。
  • 任何尺寸不使用负 letter-spacing;正字间距是标志性特征,不是待纠正的错误。
  • 卡片或面板圆角不超过 0px;尖锐 90° 边缘形成编辑印刷感。
  • 不混用多个字体,也不把标题设为 600-700 字重;所有位置使用 Theinhardt 400,仅极少微型标签采用 700。
  • 不创建居中 max-width 容器;网格铺满边缘,内容完整填满所属图块。