Campsite 网站预览
Campsite 网站预览

Campsite

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

页面以白色为基底,搭配近黑色文字。字体采用 Inter、emoji。视觉特点包括胶囊形控件、紧密字距、居中构图、产品图像展示。适合参考的场景:效率工具官网、协作产品介绍页。

查看原始网站

使用规范

建议采用

  • 正文使用 Inter 400 字重,UI 标签使用 500,标题使用 600——绝不低于 400 或高于 600
  • 在 58px 显示尺寸下使用 -1.8px 字间距,并按比例递减至 15px 正文时的 -0.27px
  • 所有按钮、标签和头像使用 9999px 半径——胶囊形状是系统的标志性特征
  • 保持画布为 #fffdf9(暖白色)——页面背景绝不使用纯白 #ffffff,仅用于卡片和抬升表面
  • 产品卡片使用分层 5% 不透明度阴影堆叠,首屏区域产品原型仅使用更强的多段渐变阴影
  • 色彩仅限于功能性角色:绿色表示已解决,#fef3c7 用于突出,#ef4444 用于破坏性操作——其余一律保持单色
  • 区块间距 64px,元素间距 8px,卡片内边距 16px——4px 基础单位确保所有元素对齐精准

建议避免

  • 不要引入第二套字体——Inter 作为唯一字体承载整个层级结构
  • 不要使用厚重的投影、彩色投影或不透明度超过 10% 的阴影
  • 不要在任何交互元素上使用锐角(0px 半径)——最小半径为 8px,优先使用胶囊形
  • 不要将 赭色 品牌色(#451a03)用于正文或列表项——仅作为装饰性品牌标识
  • 不要使用渐变、玻璃态、或拟物化效果——表面为平面,仅以细线边框呈现
  • 不要使用纯黑色(#000000)作为文字——使用 #171717 以增加温暖感
  • 显示标题最大不超过 58px,最小文字不得低于 11px——尺寸范围刻意保持紧凑