디자인 시스템

🎨 통합 미리보기 (정적 HTML) — 모든 토큰·컴포넌트·상태를 한 페이지에서 시각적으로 확인
→ 00-design-system.html 열기 (새 탭)

냠냠픽업은 3종 화면 모두 YumYum Yellow #FFDE36 단일 사용으로 통일된 디자인 시스템을 운영합니다. 차별화는 컬러가 아닌 레이아웃·콘텐츠 밀도·캐릭터·다크 톤으로.

3종 화면 매핑

화면	URL	대상	디자인 시스템	메인 노랑
고객 앱	yumyum.im	일반 소비자	YumYum v3 (`01~09.md`)	`#FFDE36`
사장님 Portal	store.yumyum.im	가맹점주 (B2B)	YumYum + 도구 패턴	`#FFDE36`
내부 어드민	admin.yumyum.im	운영팀 (B2B)	YumYum + 도구 패턴 (Wanted 베이스)	`#FFDE36`

⭐ 모든 사이드 같은 노랑 — 진정한 브랜드 통일. 사장님 Portal과 어드민은 같은 디자인 시스템 1세트로 운영 (다크 사이드바 + 라이트 메인 등 도구 패턴 공통).

→ 통일 결정 배경·차별화 차원·체크리스트는 10-owner-strategy

파일	적용
00-design-system.html ↗	통합 미리보기 (정적 HTML — 새 탭)
01-colors	컬러 토큰 (Brand Yellow `#FFDE36`, Rating, Dim, Neutrals, Tier 2)
02-typography	타이포 (Pretendard)
03-spacing	스페이싱 (4px base)
04-elevation	엘리베이션 (Flat 위주)
05-components	컴포넌트 (Button, Tab Bar, Card, Modal 등)
06-stratis-ui-icons	아이콘 (Stratis UI Icons 토큰 v2) — 사용 원칙·사이즈·상태·토큰
07-states	Empty / Loading / Error 패턴
08-motion	모션 (2-track: UI + Character)
09-accessibility	접근성 (WCAG 2.1 AA)
10-owner-strategy	3종 화면 통일 전략 (v3)
11-admin-binance-mapping	B2B 도구 다크 톤 패턴 reference (Wanted + Binance 베이스)
12-characters	캐릭터 가족 10명 + 가게 아이콘 (정체성·말풍선·컬러 매핑)
13-color-positioning	컬러 포지셔닝 (경쟁 배달앱 5개 분석 + 노랑 차별점)
14-audit-consistency	디자인 일관성 감사 — DS v3 ↔ PWA 고객앱 (P0 6건 / P1 16건 / P2 10건, 2026-05-18 갱신)
15-status-snapshot	한 페이지 현황 스냅샷 + 다음 작업 우선순위 (2026-05-18)
16-figma-token-sync	Figma Variables 추가 작업 가이드 — 6개 토큰 (Yellow/Banner·Rating, Pink/Brown/Green Onboarding, Orange/Main) 등록 절차

차원	고객 앱	사장님 Portal	어드민
노랑 비중	60%	35%	25%
레이아웃	모바일 카드	다크 사이드바	다크 사이드바 (dense)
캐릭터 등장	자유	환영·성공만	거의 X
본문 폰트	16px+	14-15px	13-14px

💡 캐릭터 가족 10명(메인 7명: 야미·야무·쿠모·퐁지·칠라·홍지·강지 + Blue 가족 3명: 브라운·크림·블루)은 고객 앱에서 자유롭게 활용. B2B 도구에서는 환영/성공 모먼트에만 절제해서 사용. 상세: 12-characters