Files

joungmin 50018c17fa Saffron 디자인 시스템 적용: 브랜드 컬러 + Pretendard 폰트 + 크림 배경

- 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>

2026-03-11 21:15:45 +09:00

2.8 KiB

Raw Permalink Blame History

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 개별 적용

적용 계획

컨셉 선택
CSS 변수로 디자인 토큰 정의 (globals.css)
Tailwind v4 @theme 에 커스텀 컬러 등록
컴포넌트별 하드코딩된 orange → 시맨틱 토큰으로 교체
다크모드 팔레트 정의
폰트 교체 (필요시)
로고/아이콘 톤 맞춤

2.8 KiB Raw Permalink Blame History