Fiasco 网站预览
Fiasco 网站预览

Fiasco

近白色基底、胶囊形控件与居中构图。

页面以近白色为基底,搭配近黑色文字。字体采用 area-normal、HAL Timezone。视觉特点包括胶囊形控件、居中构图、网格布局、大幅摄影展示。适合参考的场景:设计工作室首页、案例展示页。

查看原始网站

使用规范

建议采用

  • 所有交互元素均使用胶囊形按钮(800px半径)——绝不使用方形或轻微圆角按钮
  • 让项目卡片拥有色彩:为每个卡片从强调色集合中选取一个鲜明的十六进制颜色,其余页面保持温暖的中性色
  • 正文文字设定为 18px 在 area-normal 400 字重——系统尺寸为编辑类,而非产品UI尺寸
  • 所有标题均锚定在 Ink Black(#1d1e19),由画布(#f8f9f3)传递温暖——绝不引入白色
  • 首屏与重点区域独占 40px 半径,卡片保持 8px 半径以维持画廊层级结构
  • 仅在首屏区块和项目卡片上应用 0 28px 80px 的深色阴影——深度来自少数精心布置的阴影,而非持续的堆叠
  • 微标签和时间戳使用 OC Highway 10px 字号,+0.10em 字间距——带字间距的全大写是标志性细节

建议避免

  • 按钮、导航或文字中不要使用色彩强调色系——这些色彩仅属于项目卡片背景
  • 同一张卡片或区块内不要混合多个鲜明色彩——每个表面仅允许一个色块
  • 不要使用纯黑色(#000000)作为填充——Ink Black(#1d1e19)是系统黑色,细微的暖调偏移是区别所在
  • 每页不要使用超过一个阴影层级——重阴影用于卡片和首屏,轻阴影用于输入框,其他情况均不使用
  • 正文文字不要小于 18px——系统为编辑风格,非数据密集型
  • 不要将 Cobalt Violet(#204ce5)用于任何非单一填充主行动——它是系统唯一的色彩行动,过度使用会削弱其意义
  • 输入框不要设置为 8px 圆角——3px 输入框半径与胶囊按钮形成刻意对比,是系统语言的一部分