Elevated
Clean surface.
기본 elevation 1dp — 카드가 살짝 떠 있음.
View details →Welcome
Material Design 3
Tonal palette + elevation 5 단계 + rounded surface. Google 의 표준 디자인 언어. 모바일 친화 SaaS · Android-like web app 적합.
Display XL · 3.5rem
Display XL
Display · 2.6rem
Display Default
Title LG · 32px
Title LG
Title · 24px
Title default
Body · 1rem
Body 1rem regular. The quick brown fox jumps over the lazy dog.
Mono · 0.875rem
$ flutter run --releaseMessage
진행률 · 72%
Default
Primary
Success
Warning
Error
Inverted
Primary
Tonal accent.
primary container — accent 톤 surface.
View details →Inverted
Pure night.
on-surface 반전 — 강조용.
View details →Visitors
12,489
↑ 18.4% this week
Conversion
3.2%
↓ 0.6%p yesterday
Revenue
₩42.5M
↑ 7.1% MTD
Design System Guide
Why Tonal works
By Google · 2024 · 5 min read
Tonal palette 시스템은 단일 컬러 hue 에서 5 단계의 tone (10/30/40/80/90) 을 자동 생성합니다. 라이트/다크 모드 전환 시 동일 hue 에서 tone 만 swap — 디자이너의 결정 부담을 줄이는 메커니즘.
Elevation 1dp~12dp 의 5 단계도 동일 원리: 시각 위계를 surface tint 로 표현. 그림자가 아니라 surface color overlay 로 elevation 을 표현하는 게 M3 의 시그니처.
Token system 의 가치는 디자이너가 *결정하지 않을 자유*.
일반 SaaS · 모바일 친화 web app · Android-like product 에 적합합니다.
Tonal 시그니처: Elevation 5 단계 사다리 — surface tint 로 시각 위계 표현.
Elev 1
1 dp
resting surface
Elev 2
3 dp
card on scroll
Elev 3
6 dp
FAB / menu
Elev 4
8 dp
nav drawer
Elev 5
12 dp
modal · dialog
이 디자인, 내 프로젝트에 바로 쓸 수 있어요
크리에이터OS가 있으면 말 한마디로, 없어도 2단계면 즉시 적용돼요.
Creator OS 사용 중이라면
에이전트에게 말 한마디면 끝
테마 선택·CSS 세팅·컴포넌트 배치까지 자동이에요. 코드 한 줄 안 봐도 돼요.
"Tonal으로 앱 UI 만들어줘"Creator OS 시작하기 →
직접 적용하고 싶다면
2단계로 즉시 적용
① HTML 파일 <head> 안에 아래 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="tonal">
버튼·카드·폼·태그가 모두 구글 Tonal 디자인으로 바뀌어요. Framer · Wix 커스텀 코드에도 동일하게 작동해요.