Flatfile 网站预览
Flatfile 网站预览

Flatfile

浅色基底、胶囊形控件与细线分隔。

页面以浅色为基底,搭配深蓝色文字。字体采用 FlatfileDiatypeVariable、Flatfile Diatype (Variable)。视觉特点包括胶囊形控件、细线分隔、衬线字形、居中构图。适合参考的场景:技术产品首页、开发工具说明页。

查看原始网站

使用规范

建议采用

  • 全部主要 CTA 采用 #151515 填充的 99px 圆角胶囊形,不使用矩形按钮。
  • 所有展示标题采用 60px Flatfile Diatype 400、-1.92px 字间距,展示语气不重于 500。
  • 所有结构分隔与表格线使用 #e5e7eb,它是体系的连接组织。
  • Source Serif 4 只用于客户评价卡片内的主视觉引述文字。
  • 画布按 Parchment(#e5ebd3)→ Paper(#ffffff)→ Linen(#f8f8f8)叠层建立深度,而非阴影。
  • 每个新页面分区上方采用 88px 内边距,维护编辑呼吸空间。
  • 页面内容在 max-width 1200px 内居中,内容区内部不从边缘到边缘铺开。

建议避免

  • 不引入辅助彩色品牌色,Midnight Ink(#090b2b)是唯一品牌色。
  • 卡片不用 box-shadows 分隔,改为将表面颜色变化一级。
  • 正文只采用 Graphite(#1b1b1e)或 #090b2b,不使用彩色正文。
  • 不使用矩形非胶囊形按钮,99px 圆角是标志性特征。
  • 彩色图标不配彩色背景,保持白表面,让图标成为唯一彩色。
  • letter-spacing 不宽于 -0.0050em,所有尺寸都采用紧凑字间距。
  • Parchment(#e5ebd3)铺色不用于首屏之外,它是首屏氛围,而非通用表面。