FLORA 网站预览
FLORA 网站预览

FLORA

近黑色基底、细线分隔与分屏构图。

页面以近黑色为基底,搭配近白色文字。字体采用 Geist、Redaction 10。视觉特点包括细线分隔、分屏构图、网格布局、大字排版。适合参考的场景:AI 工具官网、产品能力介绍页。

查看原始网站

使用规范

建议采用

  • 使用 Carbon(#191919)为所有提升层级的表面——卡片、输入框、弹窗——使其在视觉上略高于黑色画布
  • 将主文本和关键标题设为 Bone(#eeeeee);次要元数据使用 Ash(#7b7b7b),正文和边框使用 Fog(#b4b4b4)
  • 使用 Redaction 10/50 斜体用于编辑部区块标题和首屏问题;将 Geist 用于所有功能UI文本
  • 为卡片、输入框和大表面设置 24px 圆角;按钮和标签为 10px;仅对主要胶囊形CTA和快速提示芯片设置 9999px 圆角
  • 在 60–80px 的显示字号下使用 -0.0300em 字间距,在 20–22px 的副标题字号下使用 -0.0170em 字间距,以维持压缩的编辑性语气
  • 保持界面完全单色——任何组合中,生成的图像必须是唯一的色彩来源
  • 为卡片和输入框使用 1px Fog(#b4b4b4)边框;绝不使用阴影来表示层级

建议避免

  • 不要引入品牌色点缀——零色彩性的调性是其标志
  • 不要将 Redaction 用于正文、按钮或功能性UI;它仅用于展示场景
  • 不要为卡片或面板添加盒阴影——系统依赖于 #191919 表面与 #000000 画布之间的对比,而非阴影来表现层级
  • 不要在长标题中使用 Satoshi 700 字重;它仅作为副标题强调字体,而非展示字体
  • 不要对正文段落或卡片描述进行居中对齐——应使用左对齐以匹配编辑性左边缘的节奏
  • 不要为卡片或输入框使用 4px 或 5px 圆角;应坚持 10/24/9999px 的圆角系统
  • 不要使用颜色编码的状态指示(绿色/黄色/红色)——若需反馈,应通过灰度中的字重、大小或位置变化来实现