Buddy 网站预览
Buddy 网站预览

Buddy

工程蓝图绘制在格纸上。白色草图表面带有细微网格,以近黑色墨线勾勒,点缀着荧光的 黄绿色 注释和虹彩渐变笔触。

Buddy Works 的视觉呈现为一张绘制在格纸上的人工工程工作区 —— 一张近乎白色的画布,叠加了细微的蓝图网格,近黑色墨水用于文字,以及一个 一眼可辨的 的 青柠绿-绿色 CTA,能将所有操作精准聚焦。色彩被严格控制:界面 95% 保持无彩色,采用 藏青色-墨色 文字系统,而鲜艳的色彩能量则仅保留于 青柠绿 按钮、钴蓝色 链接强调色,以及用于标题下划和功能卡片边缘的彩虹径向渐变。表面质感柔和如低语 —— 白色卡片、细线 蓝灰色 边框、叠加的半透明阴影并染上品牌色调 —— 唯一明显的阴影来自产品截图和提升的用户见证卡片。字体采用 IBM Plex Sans,尺寸舒适,大尺寸显示时采用强烈的负字间距,使标题呈现出紧绷、工程样品般的质感,而非营销手册的浮夸感。组件几何结构建立在两个支柱之上:56px 半径的胶囊按钮和 24px 半径的功能/产品卡片,少数 14px 半径的内嵌卡片用于更紧凑的集群。最终效果是系统呈现出草拟、测量和仪器化的特征 —— 一个工具表面,而非落地页。

查看原始网站

使用规范

建议采用

  • 使用 #bfff5a(Lime Spark)作为唯一的主行动色彩 —— 同一屏幕上绝不与其他饱和按钮填充色并用。
  • 所有操作按钮的 border-radius 设为 56px,所有功能/产品卡片设为 24px;导航链接和标签胶囊仅使用 44px。
  • 按比例应用负字间距:80px 时为 -3.6px,48px 时为 -1.0px,22px 时为 -0.26px。在显示文本中,绝不将字间距设为 0。
  • 在每条标题中添加多色渐变笔触(青色→绿色→黄色→粉红),每条标题最多添加1到2个关键词——绝不要覆盖整个句子。
  • 所有大写眉题标签采用IBM Plex Mono 12px/500和2px字间距,颜色始终为 #6b6d72(Pewter)。
  • 产品截图的阴影采用五阶半透明 #1d2130 堆叠 —— 这是任何图像卡片的标志性抬升处理。
  • 保持画布为 #fcfcfd,搭配 24-32px 网格纸叠加层,用于首屏和功能区域;仅在用户见证/横幅带区域切换为 #0a0d16。

建议避免

  • 绝不将 青柠绿 #bfff5a 用于大面积填充、背景或非操作 UI —— 它的职责是每屏作为一个唯一的焦点。
  • 绝不引入额外的饱和色彩进入界面 —— 彩虹仅属于功能卡片笔触、笔触和用户见证填充。
  • 绝不使用方形角(0px)或默认 4px 半径于任何可见元素;所有可交互或容器元素必须呈现为胶囊或圆角卡片。
  • 绝不使用 #000000 作为文字颜色 —— 系统采用 #1d2130(Midnight Ink)用于导航,#151720(Carbon)用于正文,#0a0d16(Obsidian)用于标题显示。
  • 绝不为同一元素叠加多个不同基础色的阴影层 —— 色彩光晕(青色/青柠绿/薄荷绿)仅出现在最外层两个阴影停点。
  • 正文段落不要居中,正文始终左对齐;居中只用于标题、眉题和标志带。
  • 绝不将径向渐变用于文字、图标或边框 —— 这些渐变仅作为装饰性填充,用于卡片和笔触。