Color
Semantic 색 토큰 31개와 light·dark 값, 대비 기준이에요.
Foundation
모든 화면이 공유하는 값이에요. Figma Variables가 그대로 CSS 변수(--sn-*)가 되고, light와 dark를 함께 정의해요. 토큰 밖의 값은 쓰지 않아요.
Typography
IBM Plex Sans KR·Mono로 만든 텍스트 스타일 8개예요.
Spacing · Radius
4px 단위 간격 12단계와 radius 4단계예요.
Motion
hover, 열기·닫기, 반복 애니메이션에 쓰는 시간과 곡선이에요.
Icon
Lucide 아이콘의 크기, 선 두께, 색 규칙이에요.
Illustration
빈 상태, 에러, 에러 페이지에만 쓰는 캐릭터 그림이에요. 색 토큰 밖의 이미지 자산이에요.