1. Typography (타이포그래피)
가장 현대적이고 가독성이 높은 Pretendard를 메인 서체로 사용하며, 동양적인 감성을 보조하기 위해 Cormorant Garamond를 시스템에 포함하고 있습니다.
| 요소 |
서체 (Font Family) |
크기 (Size) |
굵기 (Weight) |
특징 |
| Main Title |
Pretendard (Sans) |
24~28px |
Semibold (600) |
행간 1.3~1.4, 자간 -0.02em |
| Body Text |
Pretendard (Sans) |
14~15px |
Regular (400) |
Muted 컬러 적용, 행간 1.6 |
| Badge |
Pretendard (Sans) |
10~11px |
Bold (700) |
대문자, 자간 0.1em (Wide) |
| Button |
Pretendard (Sans) |
16px |
Semibold (600) |
버튼 내 중앙 정렬 |
| Caption |
Pretendard (Sans) |
10~11px |
Regular (400) |
저채도 컬러, 안내 문구용 |
2. Color Palette (컬러 팔레트)
자연의 재료와 사주의 오행에서 영감을 받은 Earth & Ink 테마입니다.
Core Colors
- Primary (Clay): #B85C38 - 에너지와 행동을 유도하는 핵심 강조색.
- Secondary (Ink): #2C2C2C - 깊이감과 신뢰를 주는 메인 텍스트색.
System Colors
- Background (Cream): #F9F7F2 - 눈이 편안한 따뜻한 미색 배경.
- Outer BG (Stone): #E2DFD8 - 프레임 외부의 무게감을 잡아주는 그레이.
- Accent (Soft Beige): #F0EADF - 배지나 보조 요소에 사용되는 연한 베이지.
- Muted: #8E8E8E / Disabled: #B2B2B2 - 정보의 위계를 나누는 회색조.
3. Layout & Spacing (레이아웃 및 간격)
모바일 퍼스트 환경에 최적화된 Full-Height Responsive 구조입니다.
- Grid & Padding: 기본 여백은 **24px(p-6)**에서 32px(p-8) 사이를 유지하여 시각적 숨통을 틔워줍니다.
- Mobile Frame: 최대 너비 430px, 높이 100vh 고정으로 스크롤 없이 한눈에 들어오는 구성을 원칙으로 합니다.
- Corner Radius:
- 메인 프레임: 40px (부드러운 곡선)
- 카드 요소: 24px ~ 32px
- 버튼: 9999px (완전한 라운드)