Design System Enforcement

prototypes/ 디렉토리에서 UI 구현 시 반드시 Design System 토큰만 사용한다.

Typography

• globals.css에 정의된 typo-{style}-{weight} 유틸리티만 사용 (예: typo-body-1-normal-medium, typo-heading-1-bold)
• typo- 접두사는 typography 전용, text- 접두사는 color 전용 (tailwind-merge 충돌 방지)
• Tailwind 기본 typography 클래스 사용 금지: text-sm, text-lg, text-xl, font-bold, font-semibold, leading-6, tracking-tight 등
• 임의 typography 값 사용 금지: text-[16px], font-[500], leading-[24px], tracking-[0.01em] 등

Color

• globals.css의 시멘틱 컬러 토큰만 사용 (예: text-label-normal, bg-bg-alternative, border-line-normal, text-brand)
• Tailwind 기본 색상 팔레트 직접 사용 금지: text-gray-500, bg-neutral-100, text-red-500 등
• 임의 색상 값 사용 금지: text-[#ff0000], bg-[#4944FE] 등

Spacing

• 4배수(4px) 간격만 사용: p-1(4px), p-2(8px), p-3(12px), p-4(16px) ...

참조

허용되는 전체 토큰 목록은 prototypes/sokind-admin/src/app/globals.css의 @theme과 @utility 섹션 참조.