精選 · 開放 · 免費
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
互動元素的色彩與背景過渡 · hover 狀態的變形過渡 · 內容揭示的透明度淡化
細微的 background-color 與 color 變化，搭配 0.15s ease 時間設定 · 透過變形與色彩變化提供立即視覺回饋
08
組件
- button 膠囊形按鈕，搭配寬裕內邊距（16-24px）。主要按鈕：亮藍色（#0061EF）配白字。次要按鈕：深炭灰色（#2D2C2B）配白字。高圓角半徑（32px+）。
- card 大型圓角卡片（16-32px 圓角），柔軟的米白色背景搭配細微陰影，內含混合媒體（插圖、照片、UI 模型），以活潑構圖呈現。
- chip 膠囊形篩選標籤，搭配圓角邊框、淺色背景與小型 emoji 圖示。啟用狀態使用較深填充色。
- input 表單輸入欄位以簡潔、極簡的樣式暗示，與整體克制的美學保持一致。
- hero 全寬居中佈局，搭配超大展示字型（56px+），輔助清單與下方大型插圖/卡片展示。
09
文案語氣與禁用清單
- 語氣 溫暖、鼓舞人心且平易近人，不顯臨床或說教
- 標題風格 對話式、聚焦利益的陳述，搭配大型親和字體
- 按鈕文案 直接行動詞彙，如「免費試用」、「查看涵蓋範圍」與「0 元體驗」，強調低進入門檻
- 避免使用尖銳、有角度的形狀——截圖顯示所有卡片與按鈕皆採用圓角（16-32px 圓角半徑）
- 避免使用冷色調灰藍背景——截圖顯示溫暖米白色（#F9F4F2）作為主要背景
- 避免使用襯線或裝飾性字體——截圖顯示整體採用簡潔人文無襯線字體
- 避免創造密集、擁擠的佈局——截圖顯示區段間採用寬裕的留白（48-64px 間距）
- 避免在所有地方使用刺眼、飽和的強調色——截圖將高彩度色彩限制於特定 CTA 與插圖
- 避免使用細、微妙的字重作為標題——截圖所有標題一致使用粗體（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