제품의 시각 언어를 이루는 기본 토큰들. 새 값을 만들기보다 Tailwind 기본을 큐레이션해 쓴다. 색상만 @theme 로 직접 정의한다.
역할(시맨틱)·중립·커스텀으로 나뉜 색. 라이트·다크 토큰.
크기와 회색조로 위계를 만든다. 로고는 Pretendard, 본문은 Geist.
여백·간격의 단위. Tailwind 4px 스케일에서 쓰는 단계만.
w-full 로 채우고 max-w-* 로 가독 폭을 제한한다.
한 줄에 놓이는 컨트롤(버튼·인풋) 높이를 통일.
모서리 반경과 테두리 두께. 실제 쓰는 단계만 큐레이션.
높이(elevation)를 표현. 다크모드에선 테두리로 대체.
짧고 절제된 전환. 색 전환 위주, 150–300ms.
쌓임 순서를 정해진 6개 층으로만 관리한다.
반응형 경계. Tailwind 기본(sm·md·lg·xl·2xl), 모바일 우선.
lucide-react 단일 세트. size 14~16, strokeWidth 1.8.