색
shadcn 형 팔레트를 oklch 로 적습니다. 왼쪽 칩이 라이트, 오른쪽이 다크입니다.
라이트 모드의 배경은 oklch(0.98) 로 거의 흰색입니다. 흰 배경 위에 흰 테두리를 두면 테두리가 없는 것과 같고, 카드를 배경보다 더 밝게 만들 수도 없습니다. 그래서 구분은 바깥 모서리의 잉크 헤어라인이 만듭니다 — 안쪽 흰 헤어라인(빛을 받는 유리 윗날)과 바깥 잉크 헤어라인(배경과의 경계)이 겹쳐 두께 없이 또렷해집니다.
Tailwind 에서는 bg-primary, text-muted-foreground 처럼 변수 이름 그대로 씁니다. 파스텔은 bg-accent-mint 처럼 씁니다.
바탕과 글자
배경은 거의 흰색(0.98)이고 글자는 남색이다. 순검정을 쓰지 않는다.
--background
- 라이트
- oklch(0.98 0.005 240)
- 다크
- oklch(0.17 0.03 245)
--foreground
- 라이트
- oklch(0.33 0.07 255)
- 다크
- oklch(0.96 0.005 240)
--card
- 라이트
- oklch(0.98 0.005 240)
- 다크
- oklch(0.22 0.03 245)
--card-foreground
- 라이트
- oklch(0.33 0.07 255)
- 다크
- oklch(0.96 0.005 240)
--popover
- 라이트
- oklch(0.98 0.005 240)
- 다크
- oklch(0.22 0.03 245)
--popover-foreground
- 라이트
- oklch(0.33 0.07 255)
- 다크
- oklch(0.96 0.005 240)
강조
primary 는 브랜드 파랑 하나. 라이트·다크가 같은 값이라 버튼 색이 테마에 흔들리지 않는다.
--primary
- 라이트
- oklch(0.67 0.14 240)
- 다크
- oklch(0.67 0.14 240)
버튼·활성 탭·info 배지
--primary-foreground
- 라이트
- oklch(0.99 0.002 240)
- 다크
- oklch(0.99 0.002 240)
--secondary
- 라이트
- oklch(0.85 0.06 225)
- 다크
- oklch(0.28 0.03 245)
--secondary-foreground
- 라이트
- oklch(0.33 0.07 255)
- 다크
- oklch(0.96 0.005 240)
--muted
- 라이트
- oklch(0.94 0.02 230)
- 다크
- oklch(0.28 0.03 245)
--muted-foreground
- 라이트
- oklch(0.55 0.04 245)
- 다크
- oklch(0.7 0.03 240)
보조 문구·라벨
--accent
- 라이트
- oklch(0.94 0.02 230)
- 다크
- oklch(0.28 0.03 245)
--accent-foreground
- 라이트
- oklch(0.33 0.07 255)
- 다크
- oklch(0.96 0.005 240)
--destructive
- 라이트
- oklch(0.577 0.245 27.325)
- 다크
- oklch(0.704 0.191 22.216)
danger 버튼·배지·오류 문구
선
흰 카드 위에서 흰 선은 보이지 않는다. 입력 테두리는 유리 흰 선이 아니라 잉크 선(--input)이다.
--border
- 라이트
- oklch(0.88 0.03 230)
- 다크
- oklch(1 0 0 / 16%)
--input
- 라이트
- oklch(0.88 0.03 230)
- 다크
- oklch(1 0 0 / 20%)
--ring
- 라이트
- oklch(0.67 0.14 240)
- 다크
- oklch(0.67 0.14 240)
차트
다섯 색은 라이트·다크가 같다. 데이터 색이 테마에 따라 바뀌면 범례가 어긋난다.
--chart-1
- 라이트
- oklch(0.67 0.14 240)
- 다크
- oklch(0.67 0.14 240)
--chart-2
- 라이트
- oklch(0.72 0.1 170)
- 다크
- oklch(0.72 0.1 170)
--chart-3
- 라이트
- oklch(0.75 0.12 310)
- 다크
- oklch(0.75 0.12 310)
--chart-4
- 라이트
- oklch(0.8 0.1 80)
- 다크
- oklch(0.8 0.1 80)
--chart-5
- 라이트
- oklch(0.7 0.14 25)
- 다크
- oklch(0.7 0.14 25)
사이드바
shadcn 사이드바 계약을 그대로 둔다. 바탕보다 한 단 어두운 판이다.
--sidebar
- 라이트
- oklch(0.96 0.01 235)
- 다크
- oklch(0.2 0.03 245)
--sidebar-foreground
- 라이트
- oklch(0.33 0.07 255)
- 다크
- oklch(0.96 0.005 240)
--sidebar-primary
- 라이트
- oklch(0.67 0.14 240)
- 다크
- oklch(0.67 0.14 240)
--sidebar-primary-foreground
- 라이트
- oklch(0.99 0.002 240)
- 다크
- oklch(0.99 0.002 240)
--sidebar-accent
- 라이트
- oklch(0.94 0.02 230)
- 다크
- oklch(0.28 0.03 245)
--sidebar-accent-foreground
- 라이트
- oklch(0.33 0.07 255)
- 다크
- oklch(0.96 0.005 240)
--sidebar-border
- 라이트
- oklch(0.88 0.03 230)
- 다크
- oklch(1 0 0 / 10%)
--sidebar-ring
- 라이트
- oklch(0.67 0.14 240)
- 다크
- oklch(0.67 0.14 240)
파스텔
배지 success·warning 의 바탕. 다크에서는 명도만 낮춘다 — 밝은 파스텔을 어두운 배경에 얹으면 얼룩이 된다.
--accent-lavender
- 라이트
- oklch(0.82 0.08 300)
- 다크
- oklch(0.55 0.08 300)
--accent-mint
- 라이트
- oklch(0.85 0.08 165)
- 다크
- oklch(0.55 0.08 165)
success 배지 (30%)
--accent-peach
- 라이트
- oklch(0.85 0.08 55)
- 다크
- oklch(0.55 0.08 55)
warning 배지 (40%)
배지 톤과 색
Badge 5톤이 어느 토큰에 매핑되는지입니다.
| 톤 | 바탕 | 글자 | 미리보기 |
|---|---|---|---|
| neutral | bg-muted | text-muted-foreground | neutral |
| success | --accent-mint / 30% | text-foreground | success |
| warning | --accent-peach / 40% | text-foreground | warning |
| danger | --destructive / 15% | text-destructive | danger |
| info | --primary / 15% | text-primary | info |