Foundations / New
Elevation
Elevation tells people what sits above what. DYNGLE keeps it calm: four soft shadows, a clear stacking order, and color doing most of the separating work.엘리베이션은 무엇이 무엇 위에 놓였는지 알려 줍니다. DYNGLE은 차분하게 유지합니다. 부드러운 그림자 4단계, 명확한 쌓임 순서, 그리고 대부분의 구분은 색이 맡습니다.
Lift a surface표면 들어 올리기
Switch levels to see how far a surface floats and where each level belongs.단계를 바꾸며 표면이 얼마나 떠오르는지, 각 단계가 어디에 쓰이는지 확인하세요.
Shadow scale그림자 단계
| Token토큰 | Level단계 | Use for사용처 |
|---|---|---|
| --dy-shadow-sm | 1 | Cards at rest, segmented thumbs, inputs on tinted backgrounds기본 상태 카드, 세그먼트 썸, 색 배경 위 입력창 |
| --dy-shadow-md | 2 | Hovered cards, dropdown menus, popovers호버된 카드, 드롭다운 메뉴, 팝오버 |
| --dy-shadow-lg | 3 | Toasts, floating action buttons, onboarding sheets토스트, 플로팅 버튼, 온보딩 시트 |
| --dy-shadow-xl | 4 | Dialogs and the search palette, one at a time대화상자와 검색 팔레트, 한 번에 하나만 |
Stacking order쌓임 순서
Higher layers always cover lower ones. Never invent a z-index between steps.높은 층은 항상 낮은 층을 덮습니다. 단계 사이에 임의의 z-index를 만들지 않습니다.
Usage사용 가이드
Separate with color first먼저 색으로 구분
Group content with a subtle background or a 1px border. Save shadows for things that truly float.옅은 배경이나 1px 테두리로 콘텐츠를 묶습니다. 그림자는 정말 떠 있는 요소에만 씁니다.
Don't stack shadows on every card. The page turns muddy and nothing stands out.모든 카드에 그림자를 겹치지 않습니다. 화면이 탁해지고 아무것도 돋보이지 않습니다.
One modal at a time모달은 한 번에 하나
Close the current dialog before opening the next step, or move the flow onto its own page.다음 단계를 열기 전에 현재 대화상자를 닫거나, 흐름을 별도 페이지로 옮깁니다.
Don't open a dialog on top of a dialog. People lose track of where they are.대화상자 위에 대화상자를 열지 않습니다. 사용자가 현재 위치를 잃습니다.
Elevation in dark mode다크 모드의 엘리베이션
CSS
.card { box-shadow: var(--dy-shadow-sm); transition: box-shadow 200ms var(--dy-ease-standard); }
.card:hover { box-shadow: var(--dy-shadow-md); }
.dialog { box-shadow: var(--dy-shadow-xl); }