Zipline 网站预览
Zipline 网站预览

Zipline

暖白色基底、大字排版与居中构图。

页面以暖白色为基底,搭配近黑色文字。字体采用 fkGroteskNeue、fkScreamer。视觉特点包括大字排版、居中构图、大幅摄影展示。适合参考的场景:建筑作品集、空间项目展示页。

查看原始网站

使用规范

建议采用

  • 编辑标题用 fkScreamer 700,90–150px,行高 0.85 不可妥协,它让文字像盖印而非排字。
  • 每个正文区块画布保持 Meadow Cream #f7f4e8,鲜明白色只留给特意希望显得洁净临床的场景。
  • 所有按钮、卡片和图片默认 20px 圆角,这唯一值统一系统,是最常重复的形状 Token。
  • fkGroteskNeue 正文 16px/1.4 配 fkScreamer 展示,fkScreamer 绝不用在 40px 以下。
  • Drone Violet #643aed 只作为卡片或功能块表面,绝不作为文字色或边框;它让内容块突出,而非给排版染色。
  • 用 1px Hillside Ink 边框替代阴影表示浮起,系统默认平面,边框承担分隔。
  • 首屏与区块分隔摄影满幅,大尺度下避免容纳在圆角图片卡片中。

建议避免

  • fkScreamer 不要用于正文、导航、图注或 40px 以下任何文字,小字号下字重和行高会崩塌。
  • 不要引入额外彩色强调,整个系统克制依赖恰好一种紫罗兰。
  • 卡片或按钮不要添加 box-shadow,改用 1px 边框或紫罗兰表面分隔。
  • 背景不要用纯白 #ffffff,Meadow Cream 才是画布,鲜白会破坏暖编辑语气。
  • 默认正文只能是 fkGroteskNeue 16px/1.4,避免混入衬线或次级无衬线。
  • 交互元素圆角不要低于 20px,按钮、卡片和图片共用同样宽大的圆角。
  • fkScreamer 不要设置字间距,它自带 normal,紧密字形间隔是冲击的一部分。