50018c17fa
- CSS 변수 기반 brand-50~950 컬러 팔레트 추가 (Tailwind @theme inline) - Pretendard Variable 폰트 로드 및 기본 폰트로 설정 - 라이트모드 배경 #FFFAF5 크림색 적용 (다크모드 기본 유지) - 전체 컴포넌트 orange-* → brand-* 마이그레이션 - 식당 리스트 채널명에 YouTube SVG 아이콘 추가 - 디자인 컨셉 문서 추가 (docs/design-concepts.md) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
86 lines
2.8 KiB
Markdown
86 lines
2.8 KiB
Markdown
# Tasteby Design Concept 후보
|
|
|
|
> Oracle의 Redwood처럼, Tasteby만의 디자인 언어를 정의하기 위한 컨셉 후보안.
|
|
|
|
---
|
|
|
|
## 1. Saffron (사프란) 🟠
|
|
|
|
따뜻한 금빛 오렌지. 고급스러운 미식 큐레이션 느낌.
|
|
|
|
| 역할 | 색상 | Hex |
|
|
|------|------|-----|
|
|
| Primary | 깊은 오렌지 | `#E8720C` |
|
|
| Primary Light | 밝은 오렌지 | `#F59E3F` |
|
|
| Primary Dark | 진한 오렌지 | `#C45A00` |
|
|
| Accent | 골드 | `#F5A623` |
|
|
| Accent Light | 라이트 골드 | `#FFD080` |
|
|
| Background | 크림 화이트 | `#FFFAF5` |
|
|
| Surface | 웜 그레이 | `#F7F3EF` |
|
|
| Text Primary | 다크 브라운 | `#2C1810` |
|
|
| Text Secondary | 미디엄 브라운 | `#7A6555` |
|
|
|
|
**키워드**: 프리미엄, 미식, 큐레이션, 따뜻함, 신뢰
|
|
**어울리는 폰트**: Pretendard, Noto Sans KR (깔끔 + 웜톤 배경)
|
|
|
|
---
|
|
|
|
## 2. Gochujang (고추장) 🔴
|
|
|
|
한국 음식 DNA. 약간 붉은 오렌지 톤으로 대담하고 강렬.
|
|
|
|
| 역할 | 색상 | Hex |
|
|
|------|------|-----|
|
|
| Primary | 고추장 레드 | `#D94F30` |
|
|
| Primary Light | 밝은 레드 | `#EF7B5A` |
|
|
| Primary Dark | 진한 레드 | `#B53518` |
|
|
| Accent | 따뜻한 오렌지 | `#FF8C42` |
|
|
| Accent Light | 라이트 피치 | `#FFB88C` |
|
|
| Background | 소프트 화이트 | `#FFFBF8` |
|
|
| Surface | 웜 베이지 | `#F5F0EB` |
|
|
| Text Primary | 차콜 | `#1A1A1A` |
|
|
| Text Secondary | 다크 그레이 | `#666052` |
|
|
|
|
**키워드**: 한국, 활기, 식욕, 대담, 강렬
|
|
**어울리는 폰트**: Spoqa Han Sans Neo, Pretendard (모던 + 힘있는)
|
|
|
|
---
|
|
|
|
## 3. Citrus (시트러스) 🍊
|
|
|
|
밝고 상큼한 비비드 오렌지. 현대적이고 친근한 느낌.
|
|
|
|
| 역할 | 색상 | Hex |
|
|
|------|------|-----|
|
|
| Primary | 비비드 오렌지 | `#FF6B2B` |
|
|
| Primary Light | 라이트 오렌지 | `#FF9A6C` |
|
|
| Primary Dark | 딥 오렌지 | `#E04D10` |
|
|
| Accent | 피치 | `#FFB347` |
|
|
| Accent Light | 소프트 피치 | `#FFD9A0` |
|
|
| Background | 퓨어 화이트 | `#FFFFFF` |
|
|
| Surface | 쿨 그레이 | `#F5F5F7` |
|
|
| Text Primary | 뉴트럴 블랙 | `#171717` |
|
|
| Text Secondary | 미디엄 그레이 | `#6B7280` |
|
|
|
|
**키워드**: 캐주얼, 트렌디, 활발, 친근, 상큼
|
|
**어울리는 폰트**: Geist (현재 사용 중), Inter
|
|
|
|
---
|
|
|
|
## 현재 상태 (Before)
|
|
|
|
- Tailwind 기본 `orange` 팔레트 사용 (커스텀 없음)
|
|
- 폰트: Geist (Google Fonts)
|
|
- 다크모드: `prefers-color-scheme` 기반 자동 전환
|
|
- 브랜드 컬러 정의 없음 — 컴포넌트마다 `orange-400~700` 개별 적용
|
|
|
|
## 적용 계획
|
|
|
|
1. 컨셉 선택
|
|
2. CSS 변수로 디자인 토큰 정의 (`globals.css`)
|
|
3. Tailwind v4 `@theme` 에 커스텀 컬러 등록
|
|
4. 컴포넌트별 하드코딩된 orange → 시맨틱 토큰으로 교체
|
|
5. 다크모드 팔레트 정의
|
|
6. 폰트 교체 (필요시)
|
|
7. 로고/아이콘 톤 맞춤
|