#1A75EB
브랜드 색에서 Primary·Secondary·Tertiary·Neutral 하모니를 도출합니다 Neutral
배경·텍스트·보더·구분선 화면 대부분
50 배경 복사됨 100 표면 복사됨 200 보더 복사됨 300 복사됨 400 복사됨 500 복사됨 600 복사됨 700 복사됨 800 복사됨 900 텍스트 복사됨
50 복사됨 100 복사됨 400 복사됨 500 복사됨 600 Primary 복사됨 700 텍스트 복사됨 800 복사됨 900 복사됨
400 다크 복사됨 600 표시 복사됨 700 라이트 복사됨
400 다크 복사됨 500 표시 복사됨 700 라이트 복사됨
400 다크 복사됨 500 표시 복사됨 700 라이트 복사됨
400 다크 복사됨 500 표시 복사됨 700 라이트 복사됨
Violet
서포팅 액센트 태그·카테고리·일러스트
50 틴트 복사됨 100 복사됨 500 복사됨 600 복사됨 700 텍스트 복사됨 900 복사됨
50 틴트 복사됨 100 복사됨 500 복사됨 600 복사됨 700 텍스트 복사됨 900 복사됨
50 틴트 복사됨 100 복사됨 500 복사됨 600 복사됨 700 텍스트 복사됨 900 복사됨
50 틴트 복사됨 100 복사됨 500 복사됨 600 복사됨 700 텍스트 복사됨 900 복사됨
50 틴트 복사됨 100 복사됨 500 복사됨 600 복사됨 700 텍스트 복사됨 900 복사됨
그라데이션 — 히어로 · 마케팅 한정
복사됨 brand
복사됨 accent
복사됨 vivid
복사됨 surface
데이터 시각화 — 차트 카테고리 (색맹 안전 시퀀스)
라이트 배경 1 복사됨 2 복사됨 3 복사됨 4 복사됨 5 복사됨 6 복사됨 7 복사됨 8 복사됨
다크 배경 — 휘도 상향 변형 (어두운 색조 식별성 보강) 1 복사됨 2 복사됨 3 복사됨 4 복사됨 5 복사됨 6 복사됨 7 복사됨 8 복사됨
다크 변형은 어두운 배경(gray.900)에서 blue·violet·green 등 어두운 색조의 대비를 끌어올리고, 적·녹색맹(deuteranopia·protanopia)에서도 인접 색 분리가 유지되도록 휘도를 조정했습니다.
전체 색 토큰 표 — 데이터 그리드 primary·secondary 등 시멘틱 매핑과 surface/outline 티어는 디자인 토큰 ·테마빌더 가 정본입니다. 브랜드 잉크는 Quintal Bloom 심볼 전용(UI 미사용, 브랜드 아이덴티티 ).
토큰 값 설명 --wds-blue-50복사됨 #eaf3fe복사됨 파생(스펙 외) — subtle 배경 --wds-blue-100복사됨 #d6e6fd복사됨 파생(스펙 외) — hover 라이트 틴트 --wds-blue-400복사됨 #66aaff복사됨 — --wds-blue-500복사됨 #3c8ffd복사됨 — --wds-blue-600복사됨 #1a75eb복사됨 ★ Primary --wds-blue-700복사됨 #1252b2복사됨 P2 확정 — 시각 대조 결과 #125282(라벨)는 램프 색상 연속성 파괴, #1252B2 채택 --wds-blue-800복사됨 #0d285e복사됨 — --wds-blue-900복사됨 #0b1d3a복사됨 — --wds-gray-50복사됨 #f9fafb복사됨 파생(스펙 외) — 앱 배경 --wds-gray-100복사됨 #f3f4f6복사됨 — --wds-gray-200복사됨 #e5e7eb복사됨 — --wds-gray-300복사됨 #d1d5db복사됨 — --wds-gray-400복사됨 #9ca3af복사됨 파생(스펙 외) — placeholder/disabled 전경 --wds-gray-500복사됨 #6b7280복사됨 파생(스펙 외) — 보조 텍스트 --wds-gray-600복사됨 #4b5563복사됨 — --wds-gray-700복사됨 #374151복사됨 — --wds-gray-800복사됨 #1f2937복사됨 — --wds-gray-900복사됨 #111827복사됨 — --wds-white복사됨 #ffffff복사됨 — --wds-black복사됨 #000000복사됨 —
토큰 값 설명 --wds-violet-50복사됨 #f2eefe복사됨 서포팅 액센트 — subtle 배경(태그·카테고리). UI 본문 아님 --wds-violet-100복사됨 #e3dafd복사됨 — --wds-violet-500복사됨 #7c5cfc복사됨 Violet 원색 — 표시/솔리드 --wds-violet-600복사됨 #6938ef복사됨 — --wds-violet-700복사됨 #5b21b6복사됨 라이트 표면 텍스트용 (AA 4.5:1) --wds-violet-900복사됨 #2e1065복사됨 다크 표면 태그/카테고리 배경용 (시멘틱 tag-violet-bg 다크 — 명도 반전) --wds-teal-50복사됨 #e6fbf8복사됨 서포팅 액센트 — subtle 배경 --wds-teal-100복사됨 #c2f3ec복사됨 — --wds-teal-500복사됨 #0ea5a4복사됨 Teal 원색 — 표시/솔리드 --wds-teal-600복사됨 #0d8e8c복사됨 — --wds-teal-700복사됨 #0f766e복사됨 라이트 표면 텍스트용 (AA 4.5:1) --wds-teal-900복사됨 #042f2e복사됨 다크 표면 태그/카테고리 배경용 (시멘틱 tag-teal-bg 다크 — 명도 반전) --wds-magenta-50복사됨 #fdecf5복사됨 서포팅 액센트 — subtle 배경 --wds-magenta-100복사됨 #fbd0e6복사됨 — --wds-magenta-500복사됨 #e0489e복사됨 Magenta 원색 — 표시/솔리드 --wds-magenta-600복사됨 #c42c82복사됨 — --wds-magenta-700복사됨 #9d174d복사됨 라이트 표면 텍스트용 (AA 4.5:1) --wds-magenta-900복사됨 #500724복사됨 다크 표면 태그/카테고리 배경용 (시멘틱 tag-magenta-bg 다크 — 명도 반전) --wds-orange-50복사됨 #fff1e6복사됨 서포팅 액센트 — subtle 배경. Warning(amber)과 용도 구분: 장식·카테고리 --wds-orange-100복사됨 #ffe0c2복사됨 — --wds-orange-500복사됨 #f97316복사됨 Orange 원색 — 표시/솔리드 --wds-orange-600복사됨 #e25e07복사됨 — --wds-orange-700복사됨 #c2410c복사됨 라이트 표면 텍스트용 (AA 4.5:1) --wds-orange-900복사됨 #431407복사됨 다크 표면 태그/카테고리 배경용 (시멘틱 tag-orange-bg 다크 — 명도 반전) --wds-cyan-50복사됨 #e7fafe복사됨 서포팅 액센트 — subtle 배경 --wds-cyan-100복사됨 #c4f1fb복사됨 — --wds-cyan-500복사됨 #06b6d4복사됨 Cyan 원색 — 표시/솔리드 --wds-cyan-600복사됨 #0a9dba복사됨 — --wds-cyan-700복사됨 #0e7490복사됨 라이트 표면 텍스트용 (AA 4.5:1) --wds-cyan-900복사됨 #083344복사됨 다크 표면 태그/카테고리 배경용 (시멘틱 tag-cyan-bg 다크 — 명도 반전)
토큰 값 설명 --wds-green-400복사됨 #4ade80복사됨 P2 다크 램프 — 다크 표면 텍스트용 Success --wds-green-600복사됨 #16a34a복사됨 Success 원색 --wds-green-700복사됨 #15803d복사됨 P2 신설 — 라이트 표면 텍스트용 Success (AA 4.5:1) --wds-amber-400복사됨 #fbbf24복사됨 P2 다크 램프 — 다크 표면 텍스트용 Warning --wds-amber-500복사됨 #f59e0b복사됨 Warning 원색 — P2 확정(#F59E08 라벨과 시각 구분 불가, 표준값 채택) --wds-amber-700복사됨 #b45309복사됨 P2 신설 — 라이트 표면 텍스트용 Warning (AA 4.5:1) --wds-red-400복사됨 #f87171복사됨 P2 다크 램프 — 다크 표면 텍스트용 Error --wds-red-500복사됨 #ef4444복사됨 Error 원색 --wds-red-700복사됨 #b91c1c복사됨 P2 신설 — 라이트 표면 텍스트용 Error (AA 4.5:1) --wds-sky-400복사됨 #38bdf8복사됨 P2 다크 램프 — 다크 표면 텍스트용 Info --wds-sky-500복사됨 #3b82f6복사됨 Info 원색 --wds-sky-700복사됨 #1d4ed8복사됨 P2 신설 — 라이트 표면 텍스트용 Info (AA 4.5:1)
토큰 값 설명 --wds-chart-1복사됨 #1a75eb복사됨 데이터 시각화 카테고리 1 (색 확장 B) — 색맹 안전·이웃 색 최대 대비 순서. 차트 전용·테마 독립 상수(= blue.600). 흰 배경 4.39:1 --wds-chart-2복사됨 #7c5cfc복사됨 데이터 시각화 카테고리 2 (= violet.500). 흰 배경 4.38:1 --wds-chart-3복사됨 #0f766e복사됨 데이터 시각화 카테고리 3 (= teal.700). C-1 보정: teal.500 #0ea5a4는 흰 배경 3.03:1 경계라 .700로 하향(5.47:1). 휴 정체성(teal) 보존 --wds-chart-4복사됨 #c2410c복사됨 데이터 시각화 카테고리 4 (= orange.700). C-1 보정: orange.500 #f97316은 흰 배경 2.80:1 미달이라 .700로 하향(5.18:1). 휴 정체성(orange) 보존 --wds-chart-5복사됨 #e0489e복사됨 데이터 시각화 카테고리 5 (= magenta.500). 흰 배경 3.76:1 --wds-chart-6복사됨 #16a34a복사됨 데이터 시각화 카테고리 6 (= green.600). 흰 배경 3.30:1 --wds-chart-7복사됨 #0a9dba복사됨 데이터 시각화 카테고리 7 (= cyan.600). C-1 보정: cyan.500 #06b6d4는 흰 배경 2.43:1 미달이라 .600로 하향(3.21:1). cyan.700 #0e7490은 protanopia에서 magenta(5)와 ΔE 붕괴(12.7→7.8)라 미채택 — .600이 무회귀 최선 --wds-chart-8복사됨 #bf7a06복사됨 데이터 시각화 카테고리 8 (amber 휴 보존 휘도 보정 — amber.500 #f59e0b 선형 ×0.57). C-1 보정: amber.500은 흰 배경 2.15:1 미달, amber.700 #b45309은 deuteranopia에서 orange(4)와 ΔE 붕괴(1.2)라 미채택 → 골드 정체성 유지 커스텀(3.50:1) --wds-gradient-brand복사됨 linear-gradient(120deg, #1a75eb, #7c5cfc)복사됨 브랜드 — Blue(primary) → Violet. 히어로·브랜드 순간 --wds-gradient-accent복사됨 linear-gradient(120deg, #0ea5a4, #06b6d4)복사됨 액센트 — Teal → Cyan. 보조 강조 표면 --wds-gradient-vivid복사됨 linear-gradient(120deg, #7c5cfc, #e0489e)복사됨 비비드 — Violet → Magenta. 마케팅·캠페인 --wds-gradient-surface복사됨 linear-gradient(180deg, #ffffff, #f3f4f6)복사됨 표면 — White → Gray100. 미묘한 깊이(카드/패널), 텍스트 위 안전
토큰 값 설명 --wds-brand-blue복사됨 #155eef복사됨 심볼 블루 잉크 (라이트 표면) --wds-brand-cyan복사됨 #36bffa복사됨 심볼 시안 잉크 (라이트 표면) --wds-brand-cyan-light복사됨 #4fc8ff복사됨 심볼 시안 잉크 (다크 표면 — symbol-dark.svg)
타이포그래피#
Pretendard 한 패밀리로 역할 스케일 을 올립니다 — 크기가 아니라 역할 (Display·Headline·Title·Body·Label × L·M·S)로 고릅니다.
Weight 미리보기 토큰 Regular Medium SemiBold Bold
상단에서 샘플 문구·Weight·크기 배율을 바꿔 15개 역할 스케일을 직접 비교해 보세요. 표본·칩을 클릭하면 클래스·토큰이 복사됩니다.
Display 가장 큰 표제 — 히어로·마케팅. 절제해서 한 화면에 하나. Display L
히어로 · 랜딩 최상단 표제 .wds-type-display-l
함께 만드는 시스템 복사됨 48px 복사됨 Bold 700 복사됨 행간 1.2 복사됨 −2% 복사됨
Display M
대형 마케팅 표제 .wds-type-display-m
함께 만드는 시스템 복사됨 40px 복사됨 Bold 700 복사됨 행간 1.2 복사됨 −2% 복사됨
Display S
섹션 히어로 표제 .wds-type-display-s
함께 만드는 시스템 복사됨 36px 복사됨 Bold 700 복사됨 행간 1.2 복사됨 −2% 복사됨
Headline 섹션 표제 — 페이지·카드 제목. Headline L
페이지 제목 .wds-type-headline-l
함께 만드는 시스템 복사됨 32px 복사됨 Bold 700 복사됨 행간 1.3 복사됨 −2% 복사됨
Headline M
주요 섹션 제목 .wds-type-headline-m
함께 만드는 시스템 복사됨 28px 복사됨 Bold 700 복사됨 행간 1.3 복사됨 −1% 복사됨
Headline S
카드 · 블록 제목 .wds-type-headline-s
함께 만드는 시스템 복사됨 24px 복사됨 Bold 700 복사됨 행간 1.3 복사됨 −1% 복사됨
Title 소제목·강조 — 리스트·폼 그룹 헤더. Title L
리스트 · 폼 그룹 헤더 .wds-type-title-l
함께 만드는 시스템 복사됨 20px 복사됨 SemiBold 600 복사됨 행간 1.3 복사됨 −1% 복사됨
Title M
소제목 · 강조 라벨 .wds-type-title-m
함께 만드는 시스템 복사됨 18px 복사됨 SemiBold 600 복사됨 행간 1.3 복사됨 −1% 복사됨
Title S
조밀한 소제목 .wds-type-title-s
함께 만드는 시스템 복사됨 16px 복사됨 SemiBold 600 복사됨 행간 1.3 복사됨 −1% 복사됨
Body 본문 — 읽기 위한 텍스트. 넉넉한 행간(1.6). Body L
기본 본문 — 긴 읽기 .wds-type-body-l
함께 만드는 시스템 복사됨 16px 복사됨 Regular 400 복사됨 행간 1.6 복사됨 0 복사됨
Body M
보조 본문 · 설명 .wds-type-body-m
함께 만드는 시스템 복사됨 14px 복사됨 Regular 400 복사됨 행간 1.6 복사됨 0 복사됨
Body S
캡션 · 메타 본문 .wds-type-body-s
함께 만드는 시스템 복사됨 13px 복사됨 Regular 400 복사됨 행간 1.6 복사됨 0 복사됨
Label UI 라벨 — 버튼·탭·캡션. medium·약한 양수 자간. Label L
버튼 · 큰 탭 라벨 .wds-type-label-l
함께 만드는 시스템 복사됨 14px 복사됨 Medium 500 복사됨 행간 1.4 복사됨 +1% 복사됨
Label M
칩 · 배지 · 탭 .wds-type-label-m
함께 만드는 시스템 복사됨 12px 복사됨 Medium 500 복사됨 행간 1.4 복사됨 +1% 복사됨
Label S
메타 · 짧은 보조 라벨 .wds-type-label-s
함께 만드는 시스템 복사됨 11px 복사됨 Medium 500 복사됨 행간 1.4 복사됨 +1% 복사됨
원시 토큰 · 합성 규칙 역할 스타일은 tokens/core/typography.json composite 토큰이 SSOT로 웹(.wds-type-*)·Flutter(WizTextStyles)에 동시 생성됩니다(A3). 큰 표제일수록 자간을 좁히고(−2%) 라벨은 약한 양수 자간(+1%)으로 또렷하게 합니다. Dynamic Type·emphasis 티어는 A3 Phase 2 예정.
토큰 값 설명 --wds-font-sans복사됨 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif복사됨 — --wds-font-mono복사됨 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace복사됨 — --wds-font-size-display-1복사됨 3rem복사됨 48px — 히어로/마케팅 표제 (DD-1 해소, P2 신설). A3: Display L 앵커 --wds-font-size-h1복사됨 2rem복사됨 32px — A3: Headline L 앵커 --wds-font-size-h2복사됨 1.5rem복사됨 24px — A3: Headline S 앵커 --wds-font-size-h3복사됨 1.125rem복사됨 18px — A3: Title M 앵커 --wds-font-size-body-1복사됨 1rem복사됨 16px — A3: Body L / Title S 앵커 --wds-font-size-body-2복사됨 0.875rem복사됨 14px — A3: Body M / Label L 앵커 --wds-font-size-caption복사됨 0.75rem복사됨 12px — A3: Label M 앵커 --wds-font-size-display-m복사됨 2.5rem복사됨 40px — A3 신설. Display M (display-1 48 ↔ headline-l 32 중간, M3 Display M 비례) --wds-font-size-display-s복사됨 2.25rem복사됨 36px — A3 신설. Display S (M3 Display S 앵커) --wds-font-size-headline-m복사됨 1.75rem복사됨 28px — A3 신설. Headline M (h1 32 ↔ h2 24 중간, M3 Headline M 앵커) --wds-font-size-title-l복사됨 1.25rem복사됨 20px — A3 신설. Title L (h2 24 ↔ h3 18 중간, M3 Title L 22 → WIZ 20) --wds-font-size-body-s복사됨 0.8125rem복사됨 13px — A3 신설. Body S (body-2 14 ↔ caption 12 중간) --wds-font-size-label-s복사됨 0.6875rem복사됨 11px — A3 신설. Label S (M3 Label S 앵커). 용처: 짧은 보조 라벨·탭·배지·메타 전용. 본문(Body) 금지 — 11px는 본문 가독성/접근성 기준 미달. --wds-font-weight-bold복사됨 700복사됨 — --wds-font-weight-semibold복사됨 600복사됨 — --wds-font-weight-medium복사됨 500복사됨 — --wds-font-weight-regular복사됨 400복사됨 — --wds-font-weight-light복사됨 300복사됨 —
토큰 값 설명 --wds-line-height-tight복사됨 1.3복사됨 제목(Headline/Title) --wds-line-height-normal복사됨 1.6복사됨 본문(Body) --wds-line-height-snug복사됨 1.2복사됨 A3 신설 — Display 표제 leading(큰 글자는 좁은 행간) --wds-line-height-label복사됨 1.4복사됨 A3 신설 — Label leading(짧은 라벨) --wds-letter-spacing-h1복사됨 -0.02em복사됨 -2% (Display/Headline L) --wds-letter-spacing-h2복사됨 -0.01em복사됨 -1% (Headline) --wds-letter-spacing-h3복사됨 -0.01em복사됨 -1% (Title) --wds-letter-spacing-normal복사됨 0em복사됨 0 (Body) --wds-letter-spacing-label복사됨 0.01em복사됨 A3 신설 — +1% (Label, 짧은 라벨 가독성)
스페이싱#
8px 그리드 — 모든 간격은 4px 베이스 유닛의 배수입니다. 막대를 클릭하면 var(--wds-space-*) 토큰이 복사됩니다.
선택 기준은 레이아웃 시스템 의 스페이싱 리듬 절을 따릅니다.
요소 내부 · 1–3 --wds-space-1 4px 복사됨 --wds-space-2 8px 복사됨 --wds-space-3 12px 복사됨
요소 사이 · 4–6 --wds-space-4 16px본문 리듬 복사됨 --wds-space-5 20px 복사됨 --wds-space-6 24px 복사됨
블록 사이 · 8–12 --wds-space-8 32px 복사됨 --wds-space-10 40px 복사됨 --wds-space-12 48px 복사됨
섹션 사이 · 16–32 --wds-space-16 64px 복사됨 --wds-space-20 80px 복사됨 --wds-space-24 96px 복사됨 --wds-space-32 128px 복사됨
4px 베이스 유닛 — 모든 토큰은 4의 배수이며, space-4(16px)가 본문 리듬의 기준 한 칸입니다. 결번(5·7·9 …)은 의도입니다 — 위로 갈수록 성기게 증가해 선택을 단순하게 만듭니다.
스페이싱 토큰 표 — 데이터 그리드 토큰 값 설명 --wds-space-1복사됨 0.25rem복사됨 4px --wds-space-2복사됨 0.5rem복사됨 8px --wds-space-3복사됨 0.75rem복사됨 12px --wds-space-4복사됨 1rem복사됨 16px --wds-space-5복사됨 1.25rem복사됨 20px --wds-space-6복사됨 1.5rem복사됨 24px --wds-space-8복사됨 2rem복사됨 32px --wds-space-10복사됨 2.5rem복사됨 40px --wds-space-12복사됨 3rem복사됨 48px --wds-space-16복사됨 4rem복사됨 64px --wds-space-20복사됨 5rem복사됨 80px --wds-space-24복사됨 6rem복사됨 96px --wds-space-32복사됨 8rem복사됨 128px
라운딩#
곡률은 5단계입니다 — 각 토큰을 측정 블루프린트와 실물 표본으로 나란히 렌더합니다(셀 클릭 = var(--wds-radius-*) 복사).
radius.sm 6px 칩 · 뱃지 복사됨 radius.md 10px 버튼 · 인풋 · 카드 기본 복사됨 radius.lg 14px 큰 카드 · 모달 복사됨 radius.xl 20px 시트 · 대형 표면 복사됨 radius.full 높이 ÷ 2 알약 · 원형 아바타 복사됨 중첩 표면은 동심(concentric) 규칙 으로 곡률을 정렬합니다 — 안쪽 반지름 = 바깥 반지름 − 패딩.
아래에서 바깥 반지름과 패딩을 직접 맞춰, 안쪽 곡률이 어떤 토큰으로 떨어지는지 확인하세요.
바깥 반지름 radius.lg · 14px
sm md lg xl
바깥 표면 안에 패딩만큼 안쪽 표면을 띄운 모습 — 슬라이더를 움직이면 곡률이 따라 정렬됩니다. 안쪽 = max(0, 14 − 4 ) = 10px
calc( --wds-radius-lg − --wds-space-1 )
10px · radius.md 정합 ✓ 복사됨 동심 정합은 정확값 (바깥 − 패딩)을 그대로 써야 합니다 — 가까운 토큰으로 스냅하면 곡률 중심이 어긋나 동심이 깨집니다. 토큰에 딱 떨어지지 않으면 위 calc()로 관계를 유지하거나(권장) 패딩을 조정해 토큰에 떨어뜨리세요. Apple iOS 26 ConcentricRectangle 도 이 값을 자동 도출하며, 직각이 싫으면 0 대신 최소 반지름으로 바닥을 둡니다(.concentric(minimum:) ).
모서리의 곡률 자체도 끌어올릴 수 있습니다 — 원호(현행)에서 Apple식 연속 곡률 (스쿼클, superellipse(2))로.
곡률은 반지름·동심 공식과 직교합니다(같은 radius.lg 위에서 곡선만 교체). 지원 브라우저(Chromium 139+)에서만
적용되고 그 외에는 원호로 자연 폴백하는 점진적 향상입니다. (실험적 · 기획안 08)
이 브라우저: 미지원 — 원호로 표시 CSS corner-shape · Chromium 139+ · 미지원 시 border-radius 원호로 자연 폴백
원호 (round) — 현행 같은 radius.lg(14px) — 모서리 곡선만 다릅니다.
기본 버튼 스쿼클 (squircle) — 연속 곡률 같은 radius.lg(14px) — 모서리 곡선만 다릅니다.
기본 버튼 원호 스쿼클 직각 스쿱
superellipse(2) · Apple식 연속 곡률 corner-shape: squircle;복사됨
라운딩 토큰 표 — 데이터 그리드 토큰 값 설명 --wds-radius-sm복사됨 6px복사됨 — --wds-radius-md복사됨 10px복사됨 — --wds-radius-lg복사됨 14px복사됨 — --wds-radius-xl복사됨 20px복사됨 — --wds-radius-full복사됨 9999px복사됨 — --wds-radius-control복사됨 10px복사됨 표준 컨트롤(버튼/인풋) 라운딩 (P1 신설) --wds-radius-control-sm복사됨 6px복사됨 소형 컨트롤(체크박스) 라운딩 (P1 신설)
깊이 — Bloom Depth 엘리베이션#
WDS의 깊이는 틴트가 1차, 그림자가 2차 입니다 — 레벨이 오를수록 surface-container 틴트가
한 단 진해지고(다크에서는 밝아지고) 그림자는 보조로만 거듭니다. 브랜드 심볼의 "겹침의 농도"(Quintal
Bloom)를 표면 위계로 옮긴 것입니다. 아래에서 테마를 바꿔 틴트·그림자 거동을 직접 확인하세요.
깊이 라이브 — 테마를 바꾸면 틴트·그림자 거동을 본다 flat 휴지 페이지 · 베이스 카드 container-lowest · 그림자 없음
Aa 본문 텍스트 복사됨 raised 카드 · 올라온 컨트롤 container-low · 그림자 sm
Aa 본문 텍스트 복사됨 overlay 드롭다운 · 팝오버 · 툴팁 container-high · 그림자 md
Aa 본문 텍스트 복사됨 modal 모달 · 시트 · 다이얼로그 container-highest · 그림자 lg
Aa 본문 텍스트 복사됨 surface-container 틴트 농도 — 깊이의 1차 수단
lowest 복사됨 low 복사됨 base ambient 예약 복사됨 high 복사됨 highest 복사됨
엘리베이션 역할 매핑 · 본문 잉크 · 안티패턴 · forced-colors · shadow 토큰 엘리베이션은 숫자가 아니라 역할 로 명명합니다(flat·raised·overlay·modal). 유틸 클래스
.wds-elevation-<역할> 한 줄이 표면 틴트와 그림자를 함께 입히며, surface-container 5티어 중
가운데 base(ambient 예약)를 건너뛰어 매핑합니다(새 색 정의 0, 별칭 소비만).
레벨 클래스 표면 티어 그림자 권장 본문 잉크 용처 flat.wds-elevation-flatsurface-container-lowest없음 text-subtle 이상 (flat만 라이트 AA)휴지 페이지·베이스 카드 raised.wds-elevation-raisedsurface-container-lowsmtext-muted 이상카드·올라온 컨트롤 overlay.wds-elevation-overlaysurface-container-highmdtext-muted 이상드롭다운·팝오버·툴팁 modal.wds-elevation-modalsurface-container-highestlgtext-muted 이상모달·시트·다이얼로그
본문 잉크 — text-subtle은 라이트에서 flat에서만 AA(4.5:1)입니다(raised 위 4.38:1 미달). raised 이상 티어 위 본문은 text-muted(또는 text)를 쓰세요. 다크에서는 전 티어에서 text-subtle이 AA를 유지합니다.
안티패턴 — 그림자만 키운 카드는 다크에서 위계가 사라집니다(그림자 비가시). 항상 표면 티어를 먼저 올리고 그림자는 보조로만 더하세요.
고대비 · forced-colors — 인접 티어 틴트 대비는 3:1 미만이라, 비텍스트 경계 대비(3:1)가 필요하면 1px outline(전 티어 ≥3.5:1)을 함께 입히세요(스튜디오 "보더" 토글로 미리보기). @media (forced-colors: active)에서는 배경·그림자가 제거되므로 보더가 유일한 깊이 단서가 됩니다.
동심 라운딩 — 중첩 표면의 안쪽 반지름 = 바깥 반지름 − 간격. 라운딩 섹션의 concentric 규칙을 따릅니다.
토큰 값 설명 --wds-shadow-sm복사됨 0 1px 2px rgba(0, 0, 0, 0.05)복사됨 — --wds-shadow-md복사됨 0 4px 12px rgba(0, 0, 0, 0.08)복사됨 — --wds-shadow-lg복사됨 0 12px 24px rgba(0, 0, 0, 0.1)복사됨 — --wds-shadow-xl복사됨 0 24px 48px rgba(0, 0, 0, 0.16)복사됨 —
표준 이징 cubic-bezier(0.4, 0, 0.2, 1) · 과도한 애니메이션 금지 · prefers-reduced-motion 전면 대응.
토큰을 골라 직접 재생 해 곡선·지속 시간을 움직임으로 확인하세요 — 원칙 · spring 물리 · 연출은
모션 디자인 에서.
ease.standard 기본 양방향 전환 cubic-bezier(0.4, 0, 0.2, 1) · 400ms 0 / 400ms
standard out emphasized emph-decelerate emph-accelerate
duration · ease 토큰 토큰 값 설명 --wds-duration-fast복사됨 150ms복사됨 — --wds-duration-normal복사됨 250ms복사됨 — --wds-duration-slow복사됨 400ms복사됨 — --wds-ease-standard복사됨 cubic-bezier(0.4, 0, 0.2, 1)복사됨 — --wds-ease-out복사됨 cubic-bezier(0.16, 1, 0.3, 1)복사됨 — --wds-ease-emphasized복사됨 cubic-bezier(0.2, 0, 0, 1)복사됨 M3 emphasized — 화면 전환·강조 모션의 기본 (CSS 근사) --wds-ease-emphasized-decelerate복사됨 cubic-bezier(0.05, 0.7, 0.1, 1)복사됨 M3 emphasized decelerate — 표면 등장(enter). 오버레이 패널 진입에 사용 --wds-ease-emphasized-accelerate복사됨 cubic-bezier(0.3, 0, 0.8, 0.15)복사됨 M3 emphasized accelerate — 표면 퇴장(exit)