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 的字间距本已压缩;松开会破坏系统