Gitbook 网站预览
Gitbook 网站预览

Gitbook

白色基底、胶囊形控件与紧密字距。

页面以白色为基底,搭配近黑色文字。字体采用 General Sans Variable、General Sans。视觉特点包括胶囊形控件、紧密字距、细线分隔、居中构图。适合参考的场景:软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 所有展示文本和标题使用 General Sans Variable 700;几何粗体字重即为品牌标识
  • 使用 Ink(#1c1917)作为主要操作按钮和所有主文本的颜色——UI组件的边框或背景绝不可使用纯黑色(#000000),仅用于 SVG 填充
  • 所有按钮、标签和胶囊按钮元素的圆角半径统一为 99px,以维持胶囊按钮的形态特征
  • 在不同字号下应用负字间距:55px 时为 -0.04em,45px 时为 -0.03em,字号越大字间距越紧
  • 谨慎使用 Flame Orange(#fe551b)——仅用于徽章、悬浮的提问组件和装饰性3D元素,绝不用于正文或大面积背景
  • 默认保持界面单色,让橙色作为点缀,而非营造整体氛围
  • 使用 Bone(#fafaf9)作为卡片表面颜色,以实现纸张叠放的视觉层次,无需阴影

建议避免

  • 按钮或操作组件不可使用彩色——主要行动按钮始终为中性深色(Ink),而非橙色或蓝色
  • 卡片组件的圆角值不可在 12-24px 之间——应严格遵循设计系统中的 8px 或 16px
  • 文本或背景不可使用纯黑色(#000000)——应使用 Ink(#1c1917)以增加温暖感
  • 卡片组件不可添加阴影——应通过背景色渐变(白色 → Bone → Pebble)实现立体感
  • 标题文本不可使用 General Sans 低于 20px——在小字号下会失去表现力;应切换为 Inter
  • 不可添加装饰性渐变——系统风格为扁平化,深度来自表面色彩层级关系
  • 不可使用多个强调色——橙色是唯一的彩色强调;应抵制添加其他辅助色彩