Flox 网站预览
Flox 网站预览

Flox

白色基底、渐变展示与细线分隔。

页面以白色为基底,搭配近黑色文字。局部操作控件以粉色强调。字体采用 GeistSans、GeistMono。视觉特点包括渐变展示、细线分隔、分屏构图、网格布局。适合参考的场景:开发者工具官网、API 服务介绍页。

查看原始网站

使用规范

建议采用

  • 仅在主要 CTA 和用于点缀渐变文字的星芒符号上使用 鸢尾色 到 洋红色 渐变
  • 按钮圆角设为 6px,卡片圆角设为 12px —— 严禁混合或进一步四舍五入
  • 每个渐变 CTA 必须搭配一个实心 Obsidian 次要操作,距离不超过 16px,以形成系统的标志性双动作节奏
  • 代码和终端内容使用 GeistMono 14px 500,绝不使用 GeistSans —— 等宽字体的语气被保留
  • 所有结构边框和分隔线使用 #e2e8f0,线宽 1px;系统依赖细线边框,而非阴影深度
  • 展示标题设为 76px,字间距 -3.5px(行高 1.0),使文字呈现出建筑感,而非编辑感
  • 仅将 Rose Hot / Ember Orange 强调色用于三个受众支柱图标及其子标签——绝不用于按钮或文本块

建议避免

  • 不要将紫色到粉色渐变用于除主要 CTA 和装饰性星芒之外的任何元素——过度使用渐变会破坏有限色彩系统
  • 不要在按钮、文本或背景上使用 Ember Orange 或 Rose Hot —— 它们仅作为图标强调色
  • 不要将卡片或按钮圆角设得超过 12px —— 系统保持紧凑;任何超出标签的胶囊形元素都显得不品牌化
  • 不要在扁平内容卡片上添加阴影 —— 三层阴影仅用于终端窗口和渐变 CTA
  • 不要在透明导航按钮上使用彩色边框;使用 #020817 1px 保持其安静,以与白色导航背景形成对比
  • 不要将正文行高设得高于 1.5 或低于 1.35 —— 1.43 至 1.5 的区间是保持段落像终端输出而非编辑内容的关键
  • 不要对渐变 CTA 文字或 12–14px 范围内的文字设置字间距超过 -0.12px —— Geist 的字间距本已压缩;松开会破坏系统