Flecto 网站预览
Flecto 网站预览

Flecto

暖白色基底、细线分隔与居中构图。

页面以暖白色为基底,搭配近黑色文字。字体采用 Aeonik、roobert。视觉特点包括细线分隔、居中构图、网格布局、插画元素。适合参考的场景:软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 所有文字都使用 Aeonik 的 400 字重,不引入粗体或细体;依靠尺寸和负字间距建立层级。
  • 56px 及以上采用 -0.043em 字间距;32–36px 收紧至 -0.030em;8–12px 的说明文字放宽至 +0.020em。
  • 首屏背景和主要结构边框使用 Forest Ink(#004737);不要把它当作小面积强调色,它是表面颜色。
  • Mint Pulse(#56f09f)仅用于填充按钮、激活图标和装饰形状;稀少出现本身就是体系规则。
  • 深色分区使用 Forest Ink,浅色分区使用 Stone Mist(#ccdad7),以 1–2px 边框代替阴影。
  • 页面背景使用 Cream Canvas(#fffbec),基础画布不使用纯 #ffffff。
  • 所有按钮使用 40px border-radius,卡片使用 19px,胶囊形标签使用 9999px。

建议避免

  • 不要引入更多字重;单一字重体系是标志性特征。
  • Mint Pulse(#56f09f)不要用于大面积表面,否则会失去冲击力;仅用于按钮和图标大小的场景。
  • 投影不要超过 rgba(0,0,0,0.04) 0px 3px 2px 0px;扁平效果是有意为之。
  • 页面背景不要使用纯 #ffffff;奶油色的暖意是植物感的关键支撑。
  • 不要使用渐变;体系严格采用扁平色块。
  • #8f37ff(Iris Spark)不要用作功能色;它仅用于装饰,且应少量出现。
  • 正文或列表不要居中;仅标题居中,正文左对齐以维持阅读节奏。