Elevation
높이는 다섯 단계뿐이고, 그림자에는 파랑 기미(13,63,165)가 섞여 있어 회색 그림자보다 네이비 화면에 자연스럽습니다. 다크 테마에서는 그림자 대신 표면 단계로 높이를 표현합니다.
카드
떠오름
팝오버
모달
단계
0평면표 · 배너 · 입력. 선으로만 구분.
--fna-card--flat / border1 · card카드 · 스탯0 4px 14px rgba(13,63,165,.05)
--fna-shadow-card2 · raised선택된 카드 · 호버0 8px 20px rgba(13,63,165,.08)
--fna-shadow-raised3 · popover드롭다운 · 툴팁 · 검색 결과0 8px 24px rgba(16,28,64,.14)
--fna-shadow-popover4 · modal모달 · 드로어0 14px 40px rgba(0,0,0,.25) + 오버레이
--fna-shadow-modal4 · toast토스트0 8px 24px rgba(0,0,0,.2)
--fna-shadow-toastz-index
| 층 | z | 그림자 | 오버레이 |
|---|---|---|---|
| 상단 바 | 10 | 없음 (선) | — |
| 사이드바 | 30 | 없음 (네이비 면) | — |
| 팝오버·드롭다운·툴팁 | 40 | popover | — |
| 모달·드로어·시니어 시트 | 70 | modal | --fna-overlay rgba(10,16,40,.55) |
| 토스트 | 99 | toast | — |
다크 테마
어두운 배경에서 그림자는 보이지 않으므로 표면 단계로 높이를 표현합니다. 높을수록 밝습니다.
| 토큰 | 라이트 | 다크 | 용도 |
|---|---|---|---|
--fna-bg | #f4f6fb | #0b1220 | 0 · 페이지 |
--fna-surface | #ffffff | #131a2c | 1 · 카드 |
--fna-surface-container | #eef1f9 | #1a2238 | 2 · 카드 안 강조 영역·호버 |
--fna-surface-high | #e2e8f7 | #222c46 | 3 · 팝오버 |
--fna-surface-highest | #d7e2ff | #2b3654 | 4 · 토스트·툴팁 |
Do · Don't
Do 카드 1단계, 선택·호버만 2단계
Don't 모든 카드에 큰 그림자 · 검정 그림자화면이 떠다니고 네이비와 충돌
안정마지막 갱신 담당 디자인시스템 TF · jjo831@farmzone.kr소스 tokens.json shadow.* · color.*.surface.*Foundations · FNA 디자인 시스템 v1.0