Headspace 网站预览
Headspace 网站预览

Headspace

近白色基底、紧密字距与分屏构图。

页面以近白色为基底,搭配近黑色文字。字体采用 Headspace Apercu。视觉特点包括紧密字距、分屏构图、居中构图、网格布局。适合参考的场景:工作流工具首页、产品功能说明页。

查看原始网站

使用规范

建议采用

  • 使用页面奶油色(#f9f4f2)作为默认画布——页面背景绝不可用纯灰色或白色替代
  • 所有主要按钮、行动号召(CTA)和药丸元素的圆角半径统一使用 800px,以保持其柔软、圆润的特性
  • 应用 Headspace Apercu 字重 700,字间距 -0.0300em,适用于任何显示尺寸的标题(40px 及以上)—— 紧凑的字间距是其标志性特征
  • 谨慎使用 Sunbeam Yellow(#ffce00)作为情感强调,仅用于横幅和重点突出区域,不可作为默认背景色
  • 将深色按钮(#2d2c2b)与 2px 实线灰黑色外阴影搭配,营造类似印刷贴纸的立体感效果
  • 仅将 Mindful Blue(#0061ef)用于每个页面中最高优先级的单个操作按钮——严禁在多个按钮上使用
  • 用64px的垂直间距分隔主要板块,以营造清晰的视觉节奏;同一板块内的卡片之间采用24-32px的间距,使内容更显呼吸感
  • 每页页面左上角均以橙色品牌标识点(#f47d31)作为视觉锚点,它是唯一永不变更的元素

建议避免

  • 正文文本请勿使用#000000——采用温暖深色#2d2c2b可避免界面显得冷冰冰
  • 卡片无需使用厚重的阴影效果;建议通过奶油色/白色表面对比以及1px的Linen(#e2ded9)边框来增强视觉层次
  • 不要在卡片或按钮上使用尖角(圆角范围为0-4px)——整个系统传递的是柔和且圆润的视觉语言
  • 不要在品牌色系之外引入新的饱和色;每一种色彩选择都应映射到正念/平静/活力的语义上
  • 长段落正文不要居中对齐——16px及以上文本段落应左对齐;仅短标题和单句可居中
  • 不要使用仅描边的单线图标——Headspace图标是实心的、彩色的,并带有圆润处理
  • 不要将导航栏或页脚拉伸至与页面奶油色背景不同的颜色——保持温暖的纸张质感连续一致
  • 标题的字间距不得为0或正值——在400px及以上字号时必须使用负字间距,以确保品牌识别度