SYMPLE Design System
EN하나의 시스템으로
마음을 돌보는 제품들
SDS는 SYMPLE의 웹과 제품(KKEBI, 오리의 꿈)을 관통하는 색·타이포그래피·컴포넌트·모션·보이스 토큰을 한곳에 모은 공개 디자인 시스템입니다. 제품마다 성격은 다르지만, 같은 기반 위에서 일관되게 보이고 들리도록 합니다.
01 · 브랜드 구조
SYMPLE이 KKEBI와 오리의 꿈을 보증하는 엔도스드(endorsed) 구조입니다. 기업이 신뢰를, 서비스가 각자의 약속을 전합니다.
SYMPLE
기업 (Endorser)
“변화를 가장 먼저 이해하는 멘탈헬스테크”
KKEBI
B2B 서비스
“번아웃이 오기 전에, 목소리로”
오리의 꿈
B2C 서비스
“걱정은 오꿈이에게 (연못 세계관)”
02 · 색
중립 그레이 표면 위에 화면당 하나의 강조색. 그림자 대신 표면 톤 차이로 위계를 만듭니다.
강조색 — 제품의 인격
SYMPLE / Team
#00bf7f
기업·팀·기본 강조
KKEBI
#fa5454
KKEBI (B2B)
오리의 꿈 / Duck
#779966
Duck (B2C)
중립 · 텍스트
Page BG
#f4f5f7
BG 2
#eceef1
Surface
#ffffff
Surface 2
#f1f3f5
Dark
#111111
Text 1
#15161a
Text 2
#5b5e66
Text 3
#989ba3
03 · 타이포그래피
본문 Inter + Noto Sans KR, 에디토리얼 강조에 Instrument Serif. 크기는 뷰포트에 따라 유연하게(clamp) 스케일됩니다.
Display
clamp(36px, 4.8vw, 58px)
변화를 먼저 이해한다
H1
clamp(30px, 3.8vw, 44px)
무너지기 전의 회복
H2
clamp(24px, 3vw, 36px)
목소리로 보는 신호
H3
clamp(19px, 2.3vw, 26px)
개인 기저선
H4
clamp(16px, 1.8vw, 20px)
마음 체크인
Body LG
clamp(15px, 1.4vw, 17px)
사람은 어느 날 갑자기 무너지지 않습니다.
Body
15px
스트레스는 일상의 리듬 속에서 조금씩 쌓입니다.
Small
13px
출처 · 메타 정보
XS
11px
LABEL · CAPTION
04 · 모서리 반경
sm
8px
md
12px
lg
16px
xl
20px
2xl
24px
full
9999px
05 · 여백
element → block → section 3단계. 모두 clamp로 화면 크기에 비례합니다.
06 · 컴포넌트
같은 토큰에서 파생되는 기본 요소. 강조색만 제품에 맞게 바뀝니다.
Buttons
Chips
Card
번아웃은 어느 날 갑자기 오지 않는다
일상의 리듬 속에서 쌓이는 변화를 더 일찍 알아차리는 방법.
07 · 모션
기본 이징 cubic-bezier(.22, 1, .36, 1) · 지속 fast 200ms / normal 400ms / slow 600ms. 과하지 않게, 변화를 부드럽게 알아차리도록.
08 · 보이스 & 카피
카피 공식
특징 → “그래서?”를 두 번 물어 고객의 장면으로. 첫 줄은 스펙이 아니라 고객이 겪는 순간으로 시작합니다. 데이터(근거)는 그 뒤에 둡니다.
톤
차분하고 솔직하게, 조금 더 따뜻하게. 꾸밈말·과장은 쓰지 않습니다. 핵심 철학은 “무너지기 전의 회복”.