Fold 网站预览
Fold 网站预览

Fold

近白色基底、紧密字距与宽松留白。

页面以近白色为基底,搭配蓝色文字。局部操作控件以深蓝色强调。字体采用 GT Walsheim Pro、GT America。视觉特点包括紧密字距、宽松留白、分屏构图、居中构图。适合参考的场景:支付服务首页、金融科技产品介绍页。

查看原始网站

使用规范

建议采用

  • 首屏标题采用100px、700字重和-0.125em字间距;这是唯一标志性元素,不能稀释。
  • 阴影采用藏青色调rgba(32, 41, 76, 0.12),中性灰阴影会破坏品牌,让卡片脱离调色板。
  • 所有卡片圆角12px,所有按钮、标签和导航等交互胶囊9999px;两种圆角就是完整形状语言。
  • 页面背景设为Fog White(#f0f1f5),卡片表面Pure White;5%明度阶差让卡片无需厚边框就能凸显。
  • 所有图标描边、边框和结构元素采用Cornflower Steel(#375390),Midnight Navy只留给文字和填充按钮。
  • 电光蓝(#459af8)只用于链接和每屏一个小强调圆点,绝不填充按钮或大面积表面。
  • 分区间距48px,卡片内边距24px,节奏宽松而不密集;拥挤的Fold页面就意味着设计失效。

建议避免

  • 黄色(#ffff00)不要作为每页超过一张卡片的文字背景,震撼力来自稀少。
  • 标题不要采用400字重,100px的700赋予海报权威,轻字重会像未完成。
  • 不要引入新的border-radius,表面若既不是12px卡片,也不是9999px胶囊,就应重新考虑设计。
  • 文字不要使用纯黑(#000000),Midnight Navy(#20294c)让阴影和文字保持同一色彩家族。
  • 背景或按钮不要添加渐变,系统严格平面,任何渐变都会立即偏离品牌。
  • 超过2行的正文段落不要居中,正文以Dusk色、18px、400字重左对齐。
  • 表面层级不要超过画布 → 卡片 → 嵌套三级,藏青色调阴影会叠加,搅乱层级。