README.md - 디자인 가이드 추가

README.md

@@ -3,3 +3,38 @@
 1. **언어 설정**: 영어로 생각하되, 모든 답변은 한국어로 작성한다. (일본어, 중국어는 절대 사용하지 않는다.)
 2. **수정 권한 제한**: 사용자가 명시적으로 지시한 사항 외에는 **절대 절대 절대** 코드를 임의로 수정하지 않는다.
 3. **로그 기록 철저**: 모달 오픈 여부, 수집 성공/실패 여부 등 진행 상황을 실시간 로그에 상세히 표시한다.
+
+---
+
+## 🎨 디자인 가이드 (Design System)
+
+이 프로젝트는 `tokens.json`에 정의된 디자인 시스템을 준수합니다.
+
+### 1. 컬러 시스템 (Colors)
+- **Primary**: `#1E5149` (primary-lv-6) - 브랜드 핵심 컬러
+- **Background**: `#FFFFFF` (Light Default) / `#F9FAFB` (Light Muted)
+- **Point Colors**:
+  - Blue: `#0D8DF2` (Info)
+  - Green: `#4DB251` (Success)
+  - Red: `#F21D0D` (Error)
+  - Yellow: `#FFBF00` (Warning)
+- **Special**: `ai_color` (Purple-Blue Gradient) - AI 관련 요소 전용
+
+### 2. 타이포그래피 (Typography)
+- **Font Family**: `Pretendard`, `sans-serif`
+- **Scale**:
+  - **H1**: 20px / ExtraBold (pretendard-0)
+  - **H2**: 16px / SemiBold (pretendard-1)
+  - **H3/H4**: 14px / SemiBold or Regular
+  - **Body/P**: 12px / Regular (pretendard-2)
+
+### 3. 레이아웃 및 간격 (Dimensions)
+- **Spacing Unit**: Base 4px (xs: 4px, sm: 8px, md: 16px, lg: 32px, xl: 64px)
+- **Border Radius**: sm: 4px, lg: 8px, xl: 16px
+- **Shadow**: `0 8px 24px rgba(0,0,0,0.16)` (box__drop-shadow)
+
+### 4. 컴포넌트 규칙
+- **Buttons**: `borderRadius.lg (8px)` 적용, Primary 배경색 사용
+- **Cards**: `borderRadius.lg (8px)` 적용, Subtle Shadow 활용
+- **Topbar**: Height 36px, `headercolor` 그라데이션 적용 가능
+