Bun 网站预览
Bun 网站预览

Bun

近黑色基底、紧密字距与扁平表面。

页面以近黑色为基底,搭配白色文字。字体采用 JetBrains Mono。视觉特点包括紧密字距、扁平表面、分屏构图、网格布局。适合参考的场景:技术产品首页、开发工具说明页。

查看原始网站

使用规范

建议采用

  • 所有主要操作均使用#f472b6作为唯一粉色调,禁止用#ec4899或更浅的粉色调替代按钮填充色
  • 为所有应具备触控友好的交互元素(按钮、标签、标签、徽章)应用9999px的胶囊圆角
  • 仅将2px亮粉边框处理保留于安装命令框中——其他代码块使用#282a36细线
  • 正文文本设为16px,行高1.63,使用#9ca3af或#d1d5db用于描述内容,#e5e7eb用于主要内容
  • 任何看起来像命令、路径、版本或包名的文本均使用JetBrains Mono——绝不用于正文段落
  • 工具辅助元素需统一配色:运行时=粉,包管理器=青,测试运行器=金,打包器=紫
  • 堆叠表面从#0d0e11 → #14151a → #1e2028以营造深度——禁止使用阴影来创建立体感

建议避免

  • 禁止将#f472b6用于正文或大面积背景填充——粉是强调色,不是表面色
  • 禁止在卡片或面板上添加阴影——深度来自表面颜色层级和1px边框
  • 禁止在同一组件中同时使用8px卡片圆角和9999px圆角——每个元素类型需选择一个圆角家族
  • 不要在‘已使用’行中使用彩色标志 — 保持所有第三方标志颜色为 #9ca3af 以确保视觉一致性
  • 禁止打破深色表面系统使用亮色卡片或白色背景——即使功能对比也需保持深色调
  • 禁止使用system-ui字重300用于正文——仅将轻量级字重保留给大尺寸标题展示
  • 每个部分最多仅使用一个色彩强调——Bun的纪律是单一亮色与众多灰色的对比