그림자

진행 중 (Shadow tokens — work in progress)

그림자 recipe 5단계(--ds-shadow-xs/sm/md/lg/xl)를 box-shadow로 직접 적용합니다.
칩 전용(--ds-shadow-chip-*), 투명 표면용 drop-shadow(--ds-drop-shadow-popover/modal)는 별도 토큰.
Figma Variables엔 그림자 recipe가 전파되지 않습니다 (--ds-shadow-color만 변수화). box-shadow는 Figma 변수로 1:1 매핑이 어렵습니다.
자세한 진행 현황은 목표 & 로드맵 참고.

규칙 (강제) · 코딩 에이전트용 — 사람은 접힌 채로 두어도 됩니다

그림자(elevation) 강제 규칙. 상세·값·미리보기는 아래 본문.

인라인 box-shadow 금지. box-shadow: 0 4px 6px rgba(...) 처럼 직접 쓰지 말고 DS 토큰을 쓸 것 — box-shadow: var(--ds-shadow-md).
elevation 5단계 — --ds-shadow-xs(미세 단차: input·작은 칩) · --ds-shadow-sm(카드 rest) · --ds-shadow-md(hover·dropdown) · --ds-shadow-lg(popover·메뉴) · --ds-shadow-xl(모달·최상위 표면).
둥근/투명 표면은 box-shadow가 아니라 filter — popover·모달 컨테이너처럼 사각 박스가 아닌 표면은 filter: var(--ds-drop-shadow-popover) / var(--ds-drop-shadow-modal).
칩 전용: --ds-shadow-chip-rest / --ds-shadow-chip-hover.
그림자 색 단일 기준은 --ds-shadow-color(rgb(7 7 7 / 6%)).
시맨틱 토큰은 아직 없음(--ds-shadow-card/overlay 미정의) — 임의로 만들지 말고 xs~xl 중 용도에 맞게 선택.

단일 출처

packages/static/styles/design-system.css

모든 그림자 토큰은 위 파일의 한 블록(Shadow recipes)에서 관리합니다.

Tailwind 스케일에 맞춘 5단계 + 프로젝트 고유값. 인라인 box-shadow: 0 4px 6px rgba(...) 금지 — 아래 토큰을 사용하세요.

Token	값	용도
`--ds-shadow-xs`	`0 1px 2px rgba(0,0,0,0.1)`	미세 단차 (input·작은 칩)
`--ds-shadow-sm`	`0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.1)`	카드 rest
`--ds-shadow-md`	`0 4px 6px -1px rgba(0,0,0,0.1)`	hover·dropdown
`--ds-shadow-lg`	`0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)`	popover·메뉴
`--ds-shadow-xl`	`0 18px 36px -12px rgba(0,0,0,0.28)`	모달·최상위 표면

작은 칩/태그의 1px border-shadow.

Token	값	용도
`--ds-shadow-chip-rest`	`0 1px 0 rgba(15,15,15,0.02)`	칩 기본
`--ds-shadow-chip-hover`	`0 1px 2px rgba(15,15,15,0.06)`	칩 hover

box-shadow는 사각형 박스에만 적용되므로, 둥근/투명 표면(popover·모달 컨테이너)에는 filter: var(--ds-drop-shadow-*)를 사용합니다.

Token	값
`--ds-drop-shadow-popover`	`drop-shadow(0 2px 2px rgba(7,7,7,0.06)) drop-shadow(0 0 2px rgba(7,7,7,0.06))`
`--ds-drop-shadow-modal`	`drop-shadow(0 0 1px rgba(7,7,7,0.06)) drop-shadow(0 4px 4px rgba(7,7,7,0.06)) drop-shadow(0 4px 8px rgba(7,7,7,0.06))`

보조 토큰 --ds-shadow-color: rgb(7 7 7 / 6%) — 그림자 색의 단일 기준값(Figma shadow-color 변수로 전파).

DS 그림자 토큰 — box-shadow: var(--ds-shadow-md) / 투명 표면은 filter: var(--ds-drop-shadow-popover)
하드코딩 금지 — box-shadow: 0 4px 6px rgba(0,0,0,0.1) ← 사용하지 마세요 (디자인 토큰 규칙 위반)

Tailwind utility 매핑

NotificationBell 등에서 쓰던 shadow-xl → shadow-popover로 토큰화하는 등, 앱별로 Tailwind 그림자 utility를 DS 토큰으로 교체하는 작업이 진행 중입니다.

🟡 Tailwind utility ↔ DS 토큰 매핑 미완: spacing·opacity처럼 @theme에서 --shadow-*를 DS 토큰으로 직접 연결하면 shadow-md utility가 자동으로 DS 그림자를 참조하게 됨. 현재는 일부만 수동 교체.
🟡 시맨틱 레벨 정의: --ds-shadow-card, --ds-shadow-overlay 같은 의미 기반 토큰이 없어 컴포넌트마다 xs/sm/md를 직접 선택.
🟢 Figma 전파: box-shadow recipe는 Figma 변수 모델과 맞지 않아 미전파 — --ds-shadow-color만 변수화. 현 상태 유지가 합리적.

날짜	내용
2026-06-18	그림자 문서 신규 작성 — `--ds-shadow-xs~xl` recipe + 칩/ drop-shadow 토큰표·미리보기, Figma 비전파 사유 명시