냠냠픽업

테마

YumYum B2B 도구 — 다크 톤 패턴 reference (Wanted + Binance 베이스) ​

사장님 Portal + 내부 어드민 공통 다크 톤 / 레이아웃 패턴 reference 문서 작성일: 2026-05-13 → 2026-05-14 v3 (노랑 #FFDE36으로 통일된 후 다크 패턴만 정리) 노랑은 YumYum 통일 → 10-owner-strategy.md 참고 베이스: Wanted DS (typography·spacing) + Binance Design.md (다크 톤 영감, https://getdesign.md/binance/design-md) 실제 구현: admin.yumyum.im

1. 이 문서의 목적 ​

사장님 Portal과 내부 어드민이 공유하는 다크 톤 시각 패턴을 정리합니다.

⭐ 노랑은 YumYum #FFDE36으로 통일 (10-owner-strategy.md 참고). 이 문서는 그 외의 부분 — 다크 사이드바, 카드, 보더 등 Wanted+Binance 베이스 패턴만 reference로 남깁니다.

  • 어드민(admin.yumyum.im)의 살아있는 코드가 가장 정확한 reference
  • 이 문서는 그 코드의 다크 톤 설계 의도와 사용 원칙을 설명
  • 새 화면(사장님 Portal 등)을 만들 때 어떤 토큰을 어떻게 쓸지 안내

2. 핵심 정체성 ​

2.1 단일 브랜드 노랑 — YumYum Yellow ​

#FFDE36 가 모든 브랜드 임팩트를 짊어집니다 (3종 화면 통일).

  • Primary CTA 배경
  • 액티브 메뉴 배경
  • 로고
  • 핵심 강조 영역

⚠️ Yellow 위 텍스트는 반드시 검정 (#181A20). 이게 시그니처. 절대 흰색 X.

2.2 다크/라이트 두 테마 ​

  • Light (default): 라이트 메인 영역. 데이터 카드, 폼, 테이블
  • Dark ([data-theme="dark"]): 사이드바, 로그인 hero, 트레이딩 대시보드

Yellow CTAs와 trading green/red는 두 테마에서 동일.

2.3 트레이딩 시그널 그린/레드 ​

  • Trading Up #0ECB81: 매출↑, 양수 변화. 텍스트 색만 (배경 fill 금지)
  • Trading Down #F6465D: 매출↓, 음수 변화. 텍스트 색만 (배경 fill 금지)

2.4 Flat 위주 디자인 ​

  • 그라데이션, 무거운 그림자 ❌
  • 컬러 블록 대비로 elevation 표현
  • Hairline (#EAECEF) 적극 활용

3. 컬러 토큰 (admin/colors_and_type.css 기준) ​

3.1 Brand (YumYum 통일) ​

TokenValue용도
--b-yellow#FFDE36 ⭐Primary CTA, 액티브 메뉴, 브랜드 (YumYum 통일)
--b-yellow-active#F2CC0Fhover/press
--b-yellow-disabled#3A3A1F다크 배경 위 disabled
--b-yellow-soft#FFFCE5배지, tint, 강조 배경

📌 v3 업데이트 (2026-05-14): Binance 골드 #FCD535 → YumYum #FFDE36 통일. 톤 차이 거의 없음 (HSL 2-3%), 브랜드 통일성 ↑

3.2 Neutrals — Dark ​

TokenValue용도
--b-canvas-dark#0B0E11사이드바, 다크 메인 배경
--b-surface-card-d#1E2329다크 위 카드
--b-surface-elev-d#2B3139nested 카드, hover nav
--b-hairline-dark#2B3139다크 보더 (= surface-elev)

3.3 Neutrals — Light ​

TokenValue용도
--b-canvas-light#FFFFFF라이트 메인
--b-surface-soft-l#FAFAFA푸터, disabled
--b-surface-strong-l#F5F5F5폼 input 배경
--b-hairline-light#EAECEF가장 많이 쓰는 1px 보더
--b-border-strong#CDD1D6무거운 보더 (disabled 등)

3.4 Text ​

TokenValue용도
--b-ink#181A20라이트 위 가장 진한 텍스트, Yellow 위 텍스트
--b-body-on-dark#EAECEF다크 위 본문
--b-muted#707A8A보조 라벨, 캡션, 푸터
--b-muted-strong#929AA5강조된 보조 라벨

3.5 Trading Semantics ​

TokenValue용도
--b-trading-up#0ECB81양수 변화 (텍스트 색만)
--b-trading-down#F6465D음수 변화 (텍스트 색만)
--b-trading-up-softrgba(14, 203, 129, 0.12)양수 강조 배경 (드물게)
--b-trading-down-softrgba(246, 70, 93, 0.12)음수 강조 배경 (드물게)

3.6 Info / Focus ​

TokenValue용도
--b-info#3B82F6인포 배지, focus-ring 베이스
--b-info-ringrgba(59, 130, 246, 0.5)input focus ring

3.7 Single-product Accent ​

TokenValue용도
--b-accent-turquoise#2DBDB6Smart Money 전용 (일반화 금지). KPI 카테고리 sparingly OK

3.8 Semantic Aliases (Wanted DS 명명) ​

Wanted DS의 의미별 토큰 이름을 보존하면서 값만 Binance 팔레트에 매핑.

  • --color-primary = --b-yellow
  • --color-fg-strong / --color-fg-normal = --b-ink
  • --color-bg-base = --b-canvas-light (light) / --b-canvas-dark (dark)
  • --color-line-normal = --b-hairline-light / --b-hairline-dark
  • --color-trading-up / --color-trading-down = trading 토큰
  • --color-focus-ring = --b-info-ring

자세한 매핑은 어드민 코드 (colors_and_type.css) 참고.

4. Typography (Wanted DS 스케일, 한글 최적화) ​

Pretendard 베이스. KR-first letter-spacing. BinanceNova/Plex는 사용 안 함 (한글 가독성 우선).

4.1 핵심 타입 스케일 ​

TokenSizeWeightLine H.용도
display164px7001.25포스터급 디스플레이
display248px7001.25큰 디스플레이
heading136px7001.334페이지 헤딩
heading230px7001.334섹션 헤딩
heading324px7001.334KPI 값 (admin 기본)
heading420px6001.40서브 헤딩
title118px6001.45큰 타이틀
title216px6001.50카드 타이틀
title314px6001.50작은 타이틀, 테이블 헤더
body116px5001.50본문 (라지)
body215px5001.55본문 (기본)
body314px4001.50본문 (스몰)
label114px6001.43버튼 라벨
label213px6001.43작은 라벨
label312px6001.50마이크로 라벨
caption112px5001.50캡션
caption211px5001.45가장 작은 메타

4.2 숫자 표시 ​

별도 폰트 패밀리 없이 font-feature-settings: "tnum" 을 글로벌 적용해서 모든 숫자가 자동으로 tabular nums 됩니다.

css
html, body {
  font-feature-settings: "ss10", "tnum", "cv11";
}

→ 가격, 매출, 변화율 등 모든 숫자가 정렬됨. 별도 클래스 불필요.

추가 강조가 필요하면 .t-num 유틸 클래스 사용 가능.

5. Spacing & Radius ​

5.1 Spacing (4px 베이스) ​

TokenValue
--space-12px
--space-24px
--space-38px
--space-412px
--space-516px
--space-620px
--space-724px
--space-832px
--space-940px
--space-1048px
--space-1164px
--space-1280px (Section padding)
--space-13128px

5.2 Radius ​

TokenValue용도
--radius-14px마이크로 칩, 인라인 pill
--radius-26px버튼, 입력
--radius-38px검색 input, 콘텐츠 카드
--radius-410px—
--radius-512px큰 카드 (KPI, 차트)
--radius-6 ~ radius-1016~32px추가 옵션
--radius-pill9999pxPill 버튼

6. 핵심 시각 패턴 ​

6.1 다크 사이드바 + 라이트 메인 (하이브리드) ​

비즈니스 도구의 만국 공통 언어. 풀 다크는 한국 사용자에게 부담스러워서 하이브리드 채택.

  • 사이드바: #0B0E11 (canvas-dark)
  • 로고 영역: 노란 "Y" 원형 + 흰 텍스트
  • 액티브 메뉴: #FFDE36 배경 + #181A20 텍스트 ⭐ 브랜드 시그니처 모먼트
  • 메뉴 텍스트 (기본): #EAECEF
  • 사이드바 너비: 220~240px

6.2 KPI 카드 ​

대시보드 핵심 컴포넌트.

  • 카드 배경: 흰색 + #EAECEF 1px 보더 + radius-5
  • 라벨 (상단): muted text, 작은 사이즈
  • 큰 숫자: heading3 (24px, 700) — 자동 tabular nums
  • 증감 표시: .delta.up / .delta.down (trading green/red 텍스트 색)
  • 우상단 아이콘: Tier 2 컬러 카테고리 배경
    • 매출 = yellow (--b-yellow)
    • 주문 = blue (--b-info rgba)
    • 매장 = green (--b-trading-up-soft)
    • 회원 = turquoise (--b-accent-turquoise)

6.3 상태 배지 (6종) ​

리스트/테이블의 상태 표시. 색 dot + light bg + dark text.

상태색용도
활성/완료그린운영중, 픽업완료
진행중노랑준비중, 검토중
대기블루수락, 접수됨
일시정지amber일시정지
취소/오류레드취소, 오류
비활성그레이대기, 비활성

⚠️ 색 dot + 텍스트(아이콘) 함께 사용 필수. 색만으로 의미 전달 X (접근성).

6.4 카테고리 배지 ​

상태가 아닌 분류용 (가벼운 표현).

  • 포장 (takeout) — yellow tint
  • 매장식사 (dine-in) — blue tint
  • 매장수 카운트 — yellow tint

6.5 데이터 테이블 ​

  • 흰 카드 안에 테이블
  • 헤더: #FAFAFA 또는 흰 배경, muted text, 작은 사이즈 굵게
  • 행 구분: hairline (#EAECEF)
  • 행 hover: #FAFAFA
  • 행 padding: 12~16px (정보 밀도)
  • 액션 메뉴: ⋮ 세 점 아이콘 (muted)
  • 페이지네이션 활성: 노랑 배경 + 검정 텍스트

6.6 Split 로그인 패턴 ​

마케팅성 hero가 필요할 때 활용 (로그인, 시작 가이드).

  • 좌측 50%: --b-canvas-dark 배경 + 로고 + 헤드라인 + 통계 + 노란 ambient glow (radial gradient)
  • 우측 50%: 흰 배경 + 폼 + 노란 CTA full-width

7. Do's & Don'ts (Binance 철학 차용) ​

✅ Do ​

  • Yellow 희소성 유지 (Primary CTA, 헤드라인, 로고에만)
  • 노랑 위 검정 텍스트는 절대 변경 금지 (시그니처)
  • 트레이딩 그린/레드는 텍스트 색으로만 (배경 fill 금지)
  • Flat 위주, 색대비로 elevation 표현
  • Section spacing 80px (--space-12)
  • 노랑 + 검정 조합으로 Primary Button을 두 테마에서 동일하게

❌ Don't ​

  • 두 번째 브랜드 컬러 도입 금지
  • Yellow를 본문 텍스트나 큰 면적에 채우지 말 것
  • 트레이딩 그린/레드를 일반 "성공/오류" 상태로 일반화 금지
  • 디스플레이 weight를 400으로 낮추지 말 것 (포트폴리오처럼 보임)
  • 캔버스에 그라데이션, mesh, glow 효과 금지 (트레이딩 플로어 느낌 손상)
  • 노랑 위 흰 텍스트 절대 금지 (대비 1.7:1로 불가)

8. 의사결정 이력 ​

날짜결정비고
2026-05-13어드민에 적용된 Binance + Wanted 디자인 시스템 확인admin.yumyum.im (Vercel 배포)
2026-05-13(v1) YumYum 노랑 통일을 위한 Phase 1+2+3 매핑 시도어드민에 실제 적용
2026-05-14시각 검증 결과 Binance 원본 유지가 더 적합따뜻한 톤이 트레이딩 도구다움 해침
2026-05-14옵션 B 채택 — Phase 1+2+3 풀 롤백어드민 코드 git HEAD 복귀
2026-05-14사장님 Portal도 동일한 Binance + Wanted 시스템으로 결정B2B 도구 통합 운영
2026-05-14이 문서를 "교체 지시서"에서 "B2B 도구 reference"로 전환v2

9. 사장님 Portal 적용 시 권장 사항 ​

사장님 Portal을 새로 만들 때 이 시스템을 베이스로 활용하세요.

  1. admin 코드를 베이스 템플릿으로: app.jsx, layout.jsx, ui.jsx, page-*.jsx 패턴 재사용
  2. 콘텐츠 차이: 사장님은 외부 사용자라 살짝 더 친근하게
    • 환영 모먼트 (입점 신청, 첫 매출 등)에는 캐릭터 등장 OK
    • 본문 사이즈 살짝 크게 (15-16px, admin은 14-15px)
  3. 메뉴 구조 차이: 매장 단위 운영 중심 (메뉴 등록, 영업시간, 정산, 리뷰)
  4. 공유 컴포넌트: KPI 카드, 상태 배지, 데이터 테이블, 다크 사이드바 패턴은 그대로

10. 참고 자료 ​

이 문서는 살아있는 문서입니다. 사장님 Portal 구축이 시작되면 패턴 발견을 함께 업데이트하세요.

냠냠픽업 — 지속가능한 중개수수료 2% 음식 픽업 서비스

© 2026 YumYum