큐레이션 · 오픈 · 무료

Headspace

명상, 수면, 치료를 친근한 일러스트레이션과 접근성 높은 타이포그래피로 결합한 따뜻하고 장난스러운 소비자 웰니스 플랫폼.

CalmFriendlyConsumerPlayfulMobile UI
Headspace 스크린샷
↓ 디자인 시스템 다운로드 (9 MB)OpenDesign 에서 열기

원본 사이트: https://www.headspace.com

📦 팩 내용 보기 →

01

디자인 DNA

정신건강명상치료웰니스접근성

따뜻하고 매력적인 디자인을 사용하여 정신건강을 덜 위협적이고 모두에게 더 접근 가능하게 만드는, 친근하고 접근성 높은 웰니스 동반자.

02

컬러

#FFCE00Accent
#2D2C2BInk
#4B4C4DInk soft
#F9F4F2BG
#44433FMuted
rgba(75,76,77,0.3)Line

따뜻한 오프화이트 베이스에 고채도의 노랑과 주황 강조색을 적용하고, 깊은 차콜 텍스트를 사용하여 최대한의 가독성과 따뜻함을 확보합니다.

03

타이포그래피

humanist-sans · geometric-mono

타이트한 행간(1.0-1.2)을 사용하여 헤드라인의 컴팩트하고 현대적인 느낌을 유지합니다 · 큰 텍스트에는 네거티브 letterSpacing을 사용하여 타이포그래피 존재감을 강조합니다 · 본문 텍스트는 기본 16px를 사용하되, 기본값보다 약간 더 타이트한 leading을 적용합니다

04

여백

4px
8px
16px
24px
32px
48px
64px
96px

일관된 4px 기본 그리드를 사용하고, 넉넉한 섹션 간격(48-64px)과 편안한 내부 패딩(24-32px)을 적용하여 호흡이 가능한 레이아웃을 만듭니다.

05

표면 (라운드 / 그림자 / 경계선)

sm · 8px
md · 16px
lg · 32px
pill · 999px

최소한의 테두리를 사용합니다. 카드에는 미묘한 그림자를 사용합니다. 테두리가 필요할 경우, 2px solid를 차콜 음영으로 사용합니다.

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

인터랙티브 요소의 색상 및 배경 전환 · 호버 상태의 transform 전환 · 콘텐츠 노출을 위한 불투명도 페이드

0.15초 ease 타이밍으로 미묘한 backgroundColor 및 color 변화 · transform과 color 변경을 통한 즉각적인 시각적 피드백

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

Headspace — 桌面首屏（hero）
桌面首屏（hero）
Headspace — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Headspace — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Headspace — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Headspace — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Headspace — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Headspace — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Headspace — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Headspace — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Headspace — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Headspace — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Headspace — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Headspace — 移动首屏
移动首屏

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

Headspace는 친근하고 접근성 높은 웰니스 동반자로 포지셔닝된 소비자 정신건강 앱입니다. 디자인은 따뜻한 오프화이트 배경(#F9F4F2)과 차콜 텍스트(#2D2C2B), 밝은 노랑(#FFCE00)과 파랑(#0061EF) 강조색을 사용합니다. 타이포그래피는 볼드하고 타이트하게 세팅된 헤드라인과 넉넉한 본문 텍스트를 가진 휴머니스트 산세리프입니다. 레이아웃은 큰 디스플레이 타이포그래피와 장난스러운 일러스트레이션 구성을 사용한 중앙 정렬입니다. 중요한 '하지 말 것': 배경으로 차가운 그레이 또는 블루를 절대 사용하지 마세요, 임상적/의학적 시각 언어를 피하세요, 비좁거나 빈틈없는 레이아웃을 만들지 마세요, 헤드라인에 얇은 글꼴 두께를 피하세요, 단순한 UI를 위해 일러스트레이션을 건너뛰지 마세요, 그리고 공격적이거나 어두운 색상 구성을 절대 사용하지 마세요. 전체적인 느낌은 따뜻하고 초대하며 심리적으로 안전해야 합니다.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

en · zh-CN · zh-TW · ja · ko