Squarespace 网站预览
Squarespace 网站预览

Squarespace

白色基底、大幅摄影展示与胶囊形控件。

页面以白色为基底,搭配近黑色文字。字体采用 Clarkson、Clarkson Serif。视觉特点包括大幅摄影展示、胶囊形控件、大字排版、紧密字距。适合参考的场景:软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 所有展示类标题均使用 300 字重的 Clarkson,字号范围为 40–72px — 轻量级是品牌的标志性风格,而非 700 字重
  • 在 72px 字号时设定字间距为 -0.06em,并按比例递减 — 严禁在大字号文本中使用默认字间距
  • 页面区块交替使用全黑 #000000 与全白 #ffffff 背景 — 页面节奏由黑白对比定义,而非色彩
  • 按钮使用 0px 圆角,卡片使用 8px 圆角 — 从锐利到柔和的圆角对比是刻意设计
  • 所有胶囊形标签、标签和滤镜芯片的圆角均设为 100px
  • 首屏区域必须由满幅摄影或视频承载 — 严禁使用纯色或渐变背景
  • 在浅色区块中,将章节标题和行动号召(CTA)居中对齐;在深色特征网格中左对齐

建议避免

  • 绝不要将有彩色加入配色——这个系统按设计保持 0% 色彩丰富度。
  • 绝不使用 700 或 800 字重的 Clarkson — 品牌调性最高仅到 500 字重
  • 绝不使用纯色首屏背景 — 首屏必须始终为摄影或视频
  • 绝不将 100px 胶囊圆角应用于矩形按钮或卡片 — 胶囊形态仅限于滤镜标签和标签
  • 绝不将正文文本设置在低于 14px 或高于 #898989 的白色背景上 — 对比层级必须清晰
  • 绝不为卡片添加阴影 — 深度来自与画布的对比,而非立体感
  • 绝不为 UI 组件添加渐变背景 — 唯一检测到的渐变仅作为装饰性存在(柔和的蓝到黄到白过渡),并非 UI 模式