Krill 디자인 시스템

Tailwind CSS 위에서 쓰는 디자인 시스템. 설치할 패키지가 없다. 토큰 CSS 한 장을 붙여넣고 클래스 조합을 복사해서 쓴다.

언제 쓰는가

• UI 컴포넌트를 새로 만들거나 스타일을 고칠 때
• 색·간격·타이포를 정해야 할 때
• 다이얼로그·드롭다운·툴팁의 접근성 동작을 구현할 때

먼저 확인할 것

프로젝트에 Krill 토큰이 이미 있는지 본다. styles.css나 globals.css에서 --color-primary, --color-fg-muted 같은 변수를 찾는다.

없으면 assets/krill.css를 프로젝트의 Tailwind 진입점에 붙여넣는다.