Three 网站预览
Three 网站预览

Three

枪铁灰表面上的熔融余烬:一处炽热橙色火花划破几乎完全的黑暗,所有表面都褪去色彩,直到某个要素变得重要的那一刻。

ThreeTools是一块哑光黑色的开发者画布,由一处熔融橙色火花照亮。界面几乎完全由无彩色构成:接近黑色的表面、白色文字与灰色极细边框;唯一的彩色元素是鲜亮的#ff4300,专门用于主要操作表面和装饰性强调。排版大胆而厚重:从9px徽标到68px展示标题,所有字号都采用系统字体和700字重;随着字体放大,紧凑的负字间距也进一步收紧。组件使用柔和圆角,控件和卡片为15–25px,输入框和胶囊为50–999px,以亲切感平衡原本严肃的深色背景。设计系统保持极简与单色调,让品牌橙色承担100%的彩色叙事,像石墨色海洋中唯一的一点暖光。

查看原始网站

使用规范

建议采用

  • #ff4300只用于主要操作的填充和对品牌至关重要的装饰性强调,绝不用于正文、边框或次要表面。
  • 所有文字均使用系统字体栈和700字重;依靠字号与颜色建立层级,不依靠字重变化。
  • 按钮采用15px圆角,卡片采用20-25px圆角,胶囊输入框采用50px圆角,完全圆润的标签采用999px圆角。
  • 使用#111111 → #181818 → #343434的表面层级,通过明暗变化表达高度,绝不依靠投影。
  • 展示字号采用紧凑的负字间距:68px时为-0.056em,46-48px时为-0.025em,16-18px时为-0.015em。
  • 画布保持#111111,内容卡片使用浅一级的#181818;这一级对比差就是完整的高度系统。
  • 默认极细边框和图标描边采用#cacaca,让它们在深色表面上呈现中性的结构感。

建议避免

  • 绝不引入第二种彩色;单色调的严格约束正是橙色Ember呈现火花感的原因。
  • 系统字体绝不使用300/400/500/600字重;只使用700是标志性特征。
  • 绝不使用浓重投影或辉光效果;高度仅通过表面明暗的变化来体现。
  • 标题绝不使用宽松或正值字间距;压紧的字间距对整体感受至关重要。
  • 文字或表面绝不使用#000000填充;画布使用比纯黑浅一级的#111111,以避免边缘显得生硬。
  • 绝不添加作为背景装饰的渐变;如果使用渐变,应出现在3D艺术作品上,而非UI表面。
  • 绝不将填充Ember色的按钮放在另一个带有Ember色调的元素上;橙色需要周围的深色空白才能被清晰感知。