Default
Soft & raised.
3중 shadow — inner dark + inner highlight + outer colored.
View →WELLNESS · 2026
Breathe in.
Soft & playful.
부풀어 오른 점토 · 3중 inset shadow · 캔디 팔레트 · 큰 radius. Duolingo · Headspace · 웰니스 · 키즈 · 게임 톤이에요.
Display XL
Display XL
Display
Display Default
Title LG
Title LG
Title
Title default
Body
Body 1rem regular. The quick brown fox jumps over the lazy dog.
Mono
$ welcome.shHover 시 살짝 떠오르고, :active에서 점토가 눌리듯 inset shadow로 가라앉아요.
Message
진행률 · 72%
Default
Accent
Success
Warning
Danger
Inverted
Meditations
142
↑ 8 this week
Streak
21d
Personal best 🔥
Mood
8.4
↑ 0.7 vs last week
DISPATCH · 042
Soft surfaces, soft minds.
BY RYAN · 2026.05.22 · 4 MIN
Claymorphism은 화면 안의 모든 요소가 *부풀어 오른 점토*처럼 보이는 스타일이에요. 큰 radius(28px), 캔디 팔레트, 그리고 3중 shadow — 안쪽 하이라이트, 안쪽 그림자, 바깥 컬러 그림자가 결합돼 마치 만지면 말랑할 것 같은 질감을 만들어요.
Duolingo의 캐릭터 배지, Headspace의 명상 카드, 키즈 앱들의 동그란 버튼 — 모두 같은 공식이에요. 차가운 디지털을 따뜻하게 만드는 데 가장 효과적인 방식.
The interface should feel warmer than the screen.
Claymorphism 시그니처: 3중 shadow + 큰 radius + 캔디 팔레트.
SHADOW
3-layer clay
inset dark + inset light + outer colored.
RADIUS
28px
큰 radius는 부드러움의 핵심.
PALETTE
Candy
pink · blue · mint · yellow · purple.
이 디자인, 내 프로젝트에 바로 쓸 수 있어요
크리에이터OS가 있으면 말 한마디로, 없어도 2단계면 즉시 적용돼요.
Creator OS 사용 중이라면
에이전트에게 말 한마디면 끝
테마 선택·CSS 세팅까지 자동이에요. 코드 한 줄 안 봐도 돼요.
"Claymorphism 스타일로 명상 앱 만들어줘"Creator OS 시작하기 →
직접 적용하고 싶다면
2단계로 즉시 적용
① <head> 에 CSS 2줄
<link rel="stylesheet"
href="https://design-tokens.creator-os.app
/design-tokens.css">
<link rel="stylesheet"
href="https://design-tokens.creator-os.app
/design-components.css">
② <body> 에 테마 한 줄
<body data-theme="claymorphism">