Headspace 网站预览
Headspace 网站预览

Headspace

暖色纸张上的阳光疗愈休憩地。

Headspace 位于温暖纸张上的阳光疗愈休憩地:一片奶油色画布(#f9f4f2),充满呼吸感,具有圆润的边缘,以及紧密字间距的标题,既自信又平和,而非冷冰冰的临床感。配色以无彩色为主,搭配温暖的深色文字(#2d2c2b,#44423f),在正文部分从不使用冷黑色,色彩作为有意识的情感强调——Headspace 黄色代表活力,电蓝色用于主要注册按钮,深紫色则用于沉思时刻。圆角设计宽大:卡片和功能块为 16-32px,按钮和输入框为 8px,而胶囊形和圆形元素为 9999px(设计变量中为 800px),使每个界面都呈现出柔软、可亲的质感。字体采用单一定制的几何无衬线字体(Headspace Apercu),包含 400/500/700 三种字重,字间距为负值,且随着字号增大而收紧,使标题看起来更像精心雕琢,而非大声呐喊。

查看原始网站

使用规范

建议采用

  • 使用页面奶油色(#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及以上字号时必须使用负字间距,以确保品牌识别度