BaseHub 网站预览
BaseHub 网站预览

BaseHub

近黑色基底、产品图像展示与紧密字距。

页面以近黑色为基底。字体采用 Geist、Geist Mono。视觉特点包括产品图像展示、紧密字距、细线分隔、扁平表面。适合参考的场景:开发者工具官网、API 服务介绍页。

查看原始网站

使用规范

建议采用

  • 每个视口仅使用 Ember Orange(#ff6c02)于一个元素:主要行动号召按钮、区块标签或产品边框——绝不同时出现多个
  • 标题使用 Geist 600 字重,字间距 -0.04em(48px)和 -0.05em(60px);正是这种紧密的字间距让文字呈现出机械质感
  • 卡片使用 12px 圆角,按钮使用 4px 圆角;9999px 仅用于标签、徽章和胶囊形控件
  • 使用 1px 的 #252525 或 #303030 细线边框定义表面,而非阴影;页面应读作扁平的代码编辑器几何结构
  • 每个区块前以 Ember Orange 色的区块标签胶囊形控件锚定——这是系统中的重复主题
  • 让产品截图完全填满容器边缘到边缘;它们唯一的边框是橙色线
  • 正文文字保持 14–16px,使用 Fog Gray(#909090);仅将 Bone White(#f3f3f3)用于标题和主要操作

建议避免

  • 绝不引入第二个暖色;橙色是唯一的暖色,添加红色、黄色或其他邻近橙色会削弱单色点缀系统
  • 卡片、按钮或导航控件禁止使用阴影;设计拒绝通过视觉层级传达立体感
  • 绝不将正文文字设为 Bone White(#f3f3f3)——段落应使用 Fog Gray(#909090)以营造低饱和产品画布氛围
  • 避免在大区域使用渐变;唯一渐变是模板卡片装饰条上的橙色到桃色配对
  • 卡片或按钮的圆角绝不超过 12px 或 4px;大圆角会读作友好的消费者级应用,而这并非此类场景
  • 绝不居中对齐正文内容;BaseHub 为编辑风格,全文始终左对齐,包括描述与引语
  • 绝不将 Glacier Blue(#55c2ff)用于除信息徽章和状态标签之外的任何用途