파운데이션
라운드 · 그림자
계층은 먼저 배경색과 1px 라인으로 표현하고, 화면 위에 떠 있는 요소(오버레이)에만 그림자를 씁니다. 라운드는 요소 크기에 비례해 커집니다.
라운드
radius-xs 4px
체크박스(sm) · 인라인 코드
radius-sm 6px
뱃지 · 작은 태그
radius-md 8px
업무용 버튼 · 입력 · 메뉴 아이템
radius-lg 12px
카드 · 모바일 버튼 · 드롭다운
radius-xl 16px
앱 카드 · 키오스크 버튼
radius-2xl 20px
모달 · 대형 카드
radius-3xl 28px
바텀시트 상단 · 폰 프레임
radius-full full
칩 · 아바타 · 토글
그림자
shadow-xs
눌린 요소 · 세그먼트 선택
shadow-sm
Elevated 카드
shadow-md
카드 hover · 스티키 헤더
shadow-lg
드롭다운 · 팝오버 · 툴팁 · 토스트
shadow-xl
모달 · 바텀시트
계층 (z-index)
사용 규칙
정산 예정
1,284,000원
이렇게 하세요
- 콘텐츠 카드는 1px 라인(outline)이 기본
- 그림자는 떠 있는 요소에만
정산 예정
1,284,000원
이렇게 하지 마세요
- 컬러 그림자 · 강한 blur
- 카드마다 다른 그림자 강도 사용