Jam 网站预览
Jam 网站预览

Jam

近黑色基底、胶囊形控件与渐变展示。

页面以近黑色为基底,搭配浅灰色文字。局部操作控件以绿色强调。字体采用 Oldschool Grotesk、SF Pro Text。视觉特点包括胶囊形控件、渐变展示、大字排版、细线分隔。适合参考的场景:开发者工具官网、API 服务介绍页。

查看原始网站

使用规范

建议采用

  • 所有首屏和区块标题使用 Oldschool Grotesk 字重 900,字号 66–116px——这是品牌的真正声音,而非建议。
  • 仅为主操作按钮填充 Signal Mint(#73e5bf),并搭配三层绿色发光阴影;切勿将青色用于文本、边框或装饰元素。
  • 仅使用 Jam 粉色(#ff4070)用于品牌标识和持久页眉 CTA——它是品牌的标志性色彩,而非通用点缀。
  • 正文文本使用 Mist Gray(#8b94a3),字号 14–15px,字重 400–500;仅在标题、按钮文字和悬浮产品卡片表面使用白色(#ffffff)。
  • 所有卡片和列表边界均使用 1px 边框(#e5e7eb)定义,而非阴影——系统通过边框线而非层高来区分不同表面。
  • 在每个首屏标题中,精确使用 85 度的青色到紫罗兰色渐变,或水平紫罗兰到粉红渐变,为单个关键词提供色彩强调。
  • 在特性胶囊内的图标和次要 UI 图标中,使用 Electric Violet(#a37af5)1.5px 线宽。

建议避免

  • 切勿使用紫罗兰、粉红或白色填充按钮——在主要操作系统中,唯一允许的按钮填充色是青色(#73e5bf)。
  • 切勿在展示尺寸下使用 SF Pro Text 字体——标题必须专属使用 Oldschool Grotesk;混合展示字体会破坏排版层级。
  • 切勿为卡片或面板添加阴影——系统依赖表面色阶(#130f18 → #21192a → #2e2d36)和 1px 边框来营造深度,而非阴影。
  • 切勿在除单个悬浮产品截图外的卡片背景中使用白色(#ffffff)——白色表面是每页唯一的视觉设计元素。
  • 切勿使用暖红色、橙色或黄色——色彩调性仅限于青、紫罗兰和粉红;引入第四种色彩会破坏冷色调的电感氛围。
  • 切勿对展示字体增加字间距——Oldschool Grotesk 的压缩几何结构仅在默认字间距下有效;增加字间距会使 116px 的标题显得松散无力。
  • 切勿在未测试对比度的情况下直接在画布上放置文本——任何文本容器均应使用 Graphite Plum(#21192a),切勿单独使用 #130f18 作为文本在表面上的背景。