BaseHub 网站预览
BaseHub 网站预览

BaseHub

午夜画布,熔融纤维

BaseHub 使用近乎单色的视觉语言:近黑色画布、灰阶文字层级,以及一种熔融橙色强调色,承担整套彩色系统的作用。产品是主角,大型无边框编辑器截图悬浮在暗色中,而非使用悬浮插画;最左侧的一条细橙色竖线像页边注释般锚定每个区块。排版紧凑而安静:Geist 的半粗字重用于标题,常规字重用于正文,每个字号都使用紧致的负字间距,让文字像机械加工而成,而非传统排字。表面平坦,采用细线边框而非阴影;12px 卡片圆角和 4px 按钮圆角保持利落的几何形态,以及开发工具的熟悉感。橙色是唯一的暖色,用于 CTAs、区块标签、发光的产品框架和手绘注释;冷蓝色(#55c2ff)严格限于信息性徽章。

查看原始网站

使用规范

建议采用

  • 每个视口仅使用 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)用于除信息徽章和状态标签之外的任何用途