Better Stack 网站预览
Better Stack 网站预览

Better Stack

如同午夜的SRE控制台。

Better Stack像一台午夜SRE控制台:近黑画布与单色表面,以细线边框承担其他系统中抬升效果的作用,唯一的紫蓝强调只出现在操作、链接和渐变中。排版采用启用风格替代字形的Helvetica Now,让标题显得清晰、工程化,字间距紧密、字重适中,没有装饰性花样。界面像深色IDE:边框定义形状,内嵌白色高光提示深度,却不使用投影;色彩像稀缺资源一样用于标记交互性。组件轻巧、平面且自信,卡片采用16px圆角,按钮采用9999px胶囊形,没有厚重面板或拟物深度。

查看原始网站

使用规范

建议采用

  • 卡片、输入框和分隔线的默认边框色使用#939db8;它是系统的结构边框。
  • 紫蓝渐变(linear-gradient(353deg, #5b63d3, #7c87f7))只用于主要CTA;一种渐变只承担一个任务。
  • 导航和填充按钮采用内嵌白色高光(rgba(255,255,255,0.25) 0 1px 3px inset),形成1px顶部边缘光。
  • 标题采用Helvetica Now Display 500字重,而非700;权威来自精确,而非重量。
  • 所有字号统一保持-0.01em letter-spacing;字间距是系统身份的一部分。
  • 正文启用字体特性“ss01”、“ss03”、“ss04”和“ss19”,展示文字额外启用“salt”和“ss02”;它们塑造有辨识度的字形。
  • 通过表面色调(#0f101a → #151621 → #1f2433)定义深度,而非投影。

建议避免

  • 不要使用投影表现抬升;系统只采用内嵌高光和表面对比。
  • 不要将长春花蓝(#98a4f7)作为填充按钮背景;它属于链接和渐变色标。
  • 正文或导航文字不要使用700字重;UI最高为500,700只保留给强调。
  • 不要引入新的彩色;10%色彩丰富度的预算已经全部用于紫蓝强调。
  • 卡片或按钮不要采用0-4px的锐利圆角;卡片为16px,按钮为9999px,输入框为10px。
  • 卡片表面不要采用画布色(#0f101a);卡片至少要达到#151621,才能与背景区分。
  • 不要使用鲜亮或饱和的文字颜色;文字只能为白色、#c9d3ee或#646e87。