Depot

近黑色基底、等宽文字标注与紧密字距。
页面以近黑色为基底,搭配近白色文字。局部操作控件以深绿色强调。字体采用 Red Hat Display Variable、Red Hat Text Variable。视觉特点包括等宽文字标注、紧密字距、细线分隔、网格布局。适合参考的场景:开发者工具官网、API 服务介绍页。
查看原始网站使用规范
建议采用
- Signal Green(#71d083)只用于主要CTA;它是任何屏幕上唯一应要求视觉注意力的元素。
- 维持三字体系统,Red Hat Display用于标题,Red Hat Text用于正文,Red Hat Mono用于代码和状态,绝不互相替代。
- 所有36px+展示字号应用-0.025em letter-spacing,所有10-20px正文字号应用+0.025em;字间距对比定义排版个性。
- 表面采用五级中性色阶:Carbon(#04040b)→ Graphite(#121113)→ Obsidian(#1a191b)→ Slate(#232225),各层配Basalt(#2b292d)的1-2px边框。
- 按钮和卡片采用6px圆角,标签和导航项2px;小圆角是定义系统的几何选择,而非疏忽。
- 分区通过Basalt(#2b292d)的1px细线边框分隔,而非只靠间距;细线形成开发者控制台感。
- 完全不使用阴影,以内嵌白色高光(rgba(255,255,255,0.06) 0px 1px 0px 0px inset)定义表面边缘,取代投影。
建议避免
- Signal Green(#71d083)绝不要用于主要CTA填充之外的内容;次级用途将它弱化为绿色阶#366740、#2d5736、#1d3a24、#1b2a1e。
- 绝不要采用投影;设计系统刻意依靠细线边框与表面层级变化,而非抬升阴影。
- 绝不要采用12px+大圆角;系统最大圆角6px,即使10px也只偶尔出现,大胶囊或圆润卡片会破坏身份。
- 字间距方向绝不要混淆;正文始终为+0.025em正字间距,展示文字始终为-0.025em负字间距,绝不全部改为normal。
- Link Blue(#70b8ff)绝不要用于按钮或CTA,它只留给行内阅读链接;操作元素必须为绿色或中性色。
- 没有充分理由时,绝不要引入新的强调色;系统以绿色为主,蓝色用于链接,紫罗兰用于三级装饰,添加第四种彩色会破坏3色身份。
- 文字绝不要使用纯白(#ffffff),始终采用Chalk(#e5e5e5)或Ash(#eeeef0),形成细微暖意,减少强对比刺目感。