精选 · 开放 · 免费
Headspace
一个温暖、活泼的消费者健康平台，结合冥想、睡眠和心理治疗，配有友好插画和易读字体。
CalmFriendlyConsumerPlayfulMobile UI
01
设计气质 DNA
心理健康冥想心理治疗健康易获取
一位友好、平易近人的健康伙伴，运用温暖、吸引人的设计，让心理健康对每个人来说更少畏惧、更易获取。
02
色彩
#FFCE00Accent
#2D2C2BInk
#4B4C4DInk soft
#F9F4F2BG
#44433FMuted
rgba(75,76,77,0.3)Line
温暖米白色基底，搭配高饱和度的黄色和橙色点缀，辅以深炭灰色文字，确保最佳可读性和温暖感。
03
字体
humanist-sans · geometric-mono
- display
56px · 700 - h1
48px · 700 - h2
32px · 700 - body
16px · 400 - caption
12px · 400
标题使用紧凑行高（1.0-1.2），以保持紧凑、现代感 · 较大文本使用负字间距，增强字体视觉密度 · 正文使用标准16px基底，行距比默认值稍紧
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
基于4px一致网格，章节间距充足（48-64px），内边距舒适（24-32px），营造透气布局
05
表面 (圆角 / 阴影 / 边线)
sm · 8px
md · 16px
lg · 32px
pill · 999px
0px 1px 8px 0px rgba(20,19,19,0.2) · 0px 2px 0px 0px rgba(65,61,69,0.2)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中单栏主视觉区，配大字体，后接两栏卡片布局，然后是全宽滚动横幅和网格区
07
动效与交互
150msmicro
300mssmall
400msmedium
cubic-bezier(0.32, 0.94, 0.6, 1)easing
交互元素的色彩和背景过渡 · 悬停状态的变换过渡 · 内容显现时的透明度渐变
微妙的背景色和文字色变化，0.15秒缓动计时 · 通过变换和色彩变化提供即时视觉反馈
08
组件
- button 药丸形按钮，内边距充足（16-24px）。主按钮：亮蓝色（#0061EF）配白色文字。次按钮：深炭灰色（#2D2C2B）配白色文字。圆角大（32px+）。
- card 大圆角卡片（16-32px半径），柔和米白背景，微妙阴影，内含混合媒体（插画、照片、UI模型），采用活泼构图。
- chip 药丸形筛选标签，圆角边框，浅色背景，配小型emoji图标。激活状态使用更深填充色。
- input 表单输入通过简洁、极简的样式呈现，与整体克制的美学一致。
- hero 全宽居中布局，超大展示字体（56px+），下方支持勾选列表和大型插画/卡片展示。
09
文案语气与禁用清单
- 语气 温暖、鼓励、平易近人，避免临床化或说教感
- 标题风格 对话式、侧重益处的陈述，搭配大号友好字体
- 按钮文案 直接行动短语，如“免费试用”、“查看覆盖范围”、“$0 试用”，强调低门槛
- 避免使用尖锐、有棱角的形状——截图显示所有卡片和按钮均为圆角（16-32px半径）
- 避免使用冷蓝灰色背景——截图显示温暖米白色（#F9F4F2）为主背景
- 避免使用衬线或装饰字体——截图显示全程使用简洁人文无衬线体
- 避免创建密集、拥挤的布局——截图显示章节间留有充足空白（48-64px间距）
- 避免到处使用刺眼、高饱和的点缀色——截图将高饱和色限定于特定行动号召和插画
- 避免标题使用纤细、微妙的字重——截图标题统一使用粗体（700）
- 避免省略插画——截图显示活泼的角色插画和抽象图形是核心视觉元素
- 避免: 临床或医学术语
- 避免: 激进的销售语言
- 避免: 复杂行话
- 避免: 黑暗或忧郁的信息
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Headspace 是一款消费者心理健康应用，定位为友好、易获取的健康伙伴。设计采用温暖米白色背景（#F9F4F2），搭配炭灰色文字（#2D2C2B）和亮黄色（#FFCE00）及蓝色（#0061EF）点缀。字体采用人文无衬线体，标题粗体紧凑，正文间距充足。布局居中，使用大号展示字体和活泼插画构图。关键禁忌：绝不使用冷灰或蓝色作为背景，避免临床/医学视觉语言，不创建拥挤或密集布局，避免标题使用纤细字重，不因纯UI而忽略插画，绝不使用激进或暗色调配色。整体感觉应温暖、吸引人且心理安全。
en · zh-CN · zh-TW · ja · ko