YumYum 디자인 시스템 — 컬러 토큰 v3.1

냠냠픽업 디자인 시스템 컬러 가이드 작성일: 2026-05-13 최종 갱신: 2026-05-18 v3.1 — Figma single source of truth(node 6972:8016) 정렬: Neutrals 200/600/700을 Figma 값(#EDEDED/#777777/#464646)으로 복귀. Notification/Alert HEX도 Figma neutral 값에 맞춰 갱신. 버전: v3.1 (cool gray v3 시리즈 + Figma sync) 진실의 원천: Figma YumYum-v1 / Design System (node 6972:8016)

1. 디자인 원칙

1.1 핵심 컨셉

밝고 친근, 활기찬 식음료 픽업 서비스
Brand Yellow 하나로 강력하게 (멀티 컬러 브랜드 X)
베이스는 심플하게, 이벤트는 풍성하게

1.2 컬러 사용 비율

Brand Yellow: 60% (주요 액션, 강조)
Neutrals: 30% (텍스트, 배경, 보더)
Secondary (Event): 10% (배너, 카테고리, 프로모션)

1.3 컬러 계층 (Tier)

Tier	용도	사용 빈도	포함 토큰
Tier 1 — Base	일상 화면 (주문, 결제, 메뉴)	95%	Brand Yellow + Neutrals + Notification
Tier 2 — Event	이벤트, 프로모션, 시즌 캠페인	5%	Secondary Brand Colors

2. Tier 1 — Base Tokens

2.1 Brand Yellow (Primary)

브랜드 정체성의 핵심. 모든 주요 액션(CTA), 로고, 강조 영역에 사용. 기준 컬러: #FFDE36 — 디자이너 원안. 11단계 스케일은 이 값을 중심으로 균등 분포.

Token	HEX	용도
`yellow-50`	`#FFFCE5`	페이지 배경 강조, 토스트 옅은 배경
`yellow-100`	`#FFF6B0`	알림 배경, 카드 hover 배경
`yellow-200`	`#FFEC80`	보더, 구분선 (옅은 강조)
`yellow-300`	`#FFE55C`	disabled 버튼, 보조 강조
`yellow-400`	`#FFE140`	호버 시 살짝 밝아지는 표현
`yellow-500` ⭐	`#FFDE36`	메인 브랜드 컬러 (CTA, 로고, 강조)
`yellow-600`	`#F2CC0F`	버튼 active(pressed) 상태
`yellow-700`	`#C8A607`	Banner pressed, 진한 강조
`yellow-800`	`#8E7505`	노란 배경 위 텍스트, 아이콘
`yellow-900`	`#5C4D03`	매우 진한 강조 텍스트
`yellow-950`	`#3A3001`	최강 강조 (거의 안 씀)
`yellow-login` ⭐	`#FFF4C9`	로그인 화면 배경 전용 (Figma `Yellow/Login`, yellow-50과 yellow-100 사이 톤)
`yellow-banner` ⭐	`#FFCC1F`	홈 배너 배경 전용 (Figma 5837:16428, yellow-500과 yellow-600 사이 톤)

📌 이전 기준값(#FFCC33)에서 #FFDE36으로 변경 (2026-05-14). 디자이너 원안 존중 + 더 임팩트 있는 CTA.

2.1.1 노란 CTA Interaction States ⭐ (2026-05-18 시스템화)

Brand 노란 버튼/CTA의 상태별 표준 — Tailwind filter(brightness/opacity) 절대 금지, yellow scale stop 한 단계씩 진하게 이동.

컴포넌트 기본색	default	hover	active	disabled
yellow-500 (메인 CTA — 확인 버튼, 온보딩, access)	`yellow-500` `#FFDE36`	`yellow-banner` `#FFCC1F`	`yellow-600` `#F2CC0F`	`yellow-100` + `opacity-50`
yellow-banner (홈 배너 등 정적 강조)	`yellow-banner` `#FFCC1F`	`yellow-600` `#F2CC0F`	`yellow-700` `#C8A607`	(해당 없음)

규칙

각 상태는 정확히 한 단계씩 진해짐 (yellow-500 → banner → 600 → 700)
transition-colors 사용 (filter transition 금지)
채도(saturation)는 그대로, 명도만 한 톤씩 내려가므로 brand 정체성 유지

Why: brightness-95 같은 filter는 RGB 전체를 어둡게 갉아먹어서 노란색이 탁한 카키처럼 보임. 같은 yellow scale 안에서 stop만 이동하면 brand 채도 유지 + 명확한 인터랙션 피드백.

2.2 Neutrals (Cool Gray · v3)

텍스트, 배경, 보더의 80%를 차지하는 핵심 토큰. 순수 중성 그레이(R=G=B) — 코니가 작업한 Bottom Tab Bar 색상 5개를 anchor로 잡고 균등 보간.

📌 2026-05-16 v3 변경: 기존 warm gray (R값 높음) → cool gray (R=G=B). 이유: 탭바 디자인이 cool gray로 진행되었고, Brand Yellow와의 대비도 더 잘 살아남.

Token	HEX	용도
`neutral-50`	`#FAFAFA`	앱 전체 배경 (가장 연한 톤)
`neutral-100` ⭐	`#F7F7F7`	카드 배경, 입력창 배경, 호버 영역, 탭바 배경
`neutral-200` ⭐	`#EDEDED`	구분선, 보더, 비활성 배경, 탭바 보더, 카드 보더 (Figma Variables Neutral/200)
`neutral-300`	`#D4D4D4`	기본 보더, 입력창 테두리
`neutral-400`	`#B8B8B8`	placeholder, 비활성 텍스트
`neutral-500` ⭐	`#999999`	secondary 텍스트, 부가 설명, 탭바 비활성
`neutral-600`	`#777777`	caption, 보조 텍스트 (전체보기/별점/거리/시간 등) (Figma Variables Neutral/600)
`neutral-700`	`#464646`	본문 텍스트 (body), Badge 텍스트 (Figma Variables Neutral/700)
`neutral-800` ⭐	`#333333`	제목 (heading), 탭바 활성
`neutral-900` ⭐	`#222222`	강한 강조, 큰 제목, 탭바 활성 진한 톤
`neutral-950`	`#0A0A0A`	가장 진한 검정 (거의 안 씀)

⭐ = 코니가 작업한 Bottom Tab Bar에서 실제로 사용된 색상 (5개 anchor)

2.3 Notification (무채색 Semantic)

success/error/warning/info를 색이 아닌 아이콘 모양으로 구분. Neutrals 토큰을 재활용.

기본 알림 (Soft)

Token	HEX	매핑
`notification-bg`	`#F7F7F7`	= neutral-100
`notification-text`	`#464646`	= neutral-700
`notification-icon`	`#333333`	= neutral-800
`notification-border`	`#EDEDED`	= neutral-200 (선택)

강한 알림 (High-emphasis)

정말 중요한 에러나 시스템 알림에만 사용.

Token	HEX	매핑
`alert-bg`	`#333333`	= neutral-800
`alert-text`	`#FAFAFA`	= neutral-50
`alert-icon`	`#FAFAFA`	= neutral-50

의미별 아이콘 매핑 (Stratis UI Icons)

의미	아이콘	클래스명
Success	✓ 체크 원	`ti-circle-check`
Error	× 엑스 원	`ti-circle-x`
Warning	△ 삼각 경고	`ti-alert-triangle`
Info	i 인포 원	`ti-info-circle`

2.4 Dim & Overlay (오버레이)

화면 위에 덮는 반투명 레이어. 모달 백드롭, 드로어 오버레이, 비활성 상태, 매장 카드 영업종료 표시 등에 사용.

Dark Dim (다크 오버레이 — 가장 빈번)

neutral-950 (#0A0A0A) 기반. 순수 중성 그레이라 깔끔하고 차분한 그림자 느낌.

Token	RGBA	용도
`dim-strong`	`rgba(10, 10, 10, 0.7)`	풀스크린 모달 (집중도 ↑), 콘텐츠 숨김
`dim-medium`	`rgba(10, 10, 10, 0.5)` ⭐	표준 모달 백드롭, 드로어
`dim-soft`	`rgba(10, 10, 10, 0.3)`	옅은 dim, 툴팁 백드롭

Image Dim (이미지 위 오버레이 — 매장 카드 등)

매장 영업안함, 준비중, 임시휴무 등 이미지 위에 안내 텍스트를 올릴 때.

Token	RGBA	용도
`dim-image`	`rgba(10, 10, 10, 0.55)` ⭐	영업안함, 임시휴무 매장 카드 (전체 dim)
`dim-image-bottom`	`linear-gradient(transparent → rgba(13,12,10,0.7))`	카드 하단 텍스트 가독성 (그라데이션)
`dim-image-soft`	`rgba(10, 10, 10, 0.35)`	약한 강조 (인기 매장 표시 등)

사용 예시 (매장 카드):

[음식 사진]
└─ 위에 dim-image 오버레이
   └─ 중앙에 흰 텍스트 "오늘 오후 03:00 오픈"

White Dim (라이트 오버레이)

흰 배경 위에 추가 dim이 필요할 때 (로딩, 셔터 효과 등).

Token	RGBA	용도
`dim-white-strong`	`rgba(255, 255, 255, 0.85)`	강한 화이트 오버레이 (로딩 마스크)
`dim-white-medium`	`rgba(255, 255, 255, 0.6)`	중간 셔터, 부분 가림
`dim-white-soft`	`rgba(255, 255, 255, 0.3)`	가벼운 마스크

Opacity Tokens (요소 자체 투명도)

요소 전체에 투명도 적용 (배경 dim과 별개).

Token	Value	용도
`opacity-disabled`	`0.4`	비활성화된 버튼, 입력창, 메뉴 항목
`opacity-pressed`	`0.85`	버튼 눌렀을 때 (active 피드백)
`opacity-hover`	`0.92`	호버 시 미세 변화
`opacity-loading`	`0.6`	로딩 중 흐려짐
`opacity-skeleton`	`0.08`	스켈레톤 베이스

Image Overlay 텍스트 가이드

dim 이미지 위 안내 텍스트 작성 시:

요소	토큰 / 값
텍스트 색	`#FFFFFF` (흰색)
폰트 weight	600 (SemiBold) 이상
폰트 사이즈	14-16px (카드 크기 대비)
배경 dim	`dim-image` (rgba(13,12,10,0.55))
위치	카드 중앙 정렬
추가 그림자 (선택)	`text-shadow: 0 1px 2px rgba(0,0,0,0.3)`

상태별 권장 텍스트:

영업안함 → "오늘 오후 03:00 오픈" (오픈 시각 명시)
준비중 → "영업 준비중" (간결)
임시휴무 → "임시 영업 중지" (정중)
일시정지 → "잠시 후 다시 와주세요"

⚠️ dim 위 텍스트는 반드시 대비비 4.5:1 이상. dim 강도를 더 높이거나 (rgba 0.65) text-shadow 추가로 보완.

3. Tier 2 — Event Tokens (Secondary Brand Colors)

⚠️ 일상 화면에는 등장하지 않음. 이벤트, 프로모션, 시즌 캠페인, 배너에만 사용.

3.1 Pink — 이벤트, 프로모션, 혜택

신규 가입, 쿠폰, 사랑/혜택 관련 캠페인, 발렌타인 시즌

Token	HEX	비고
`pink-50`	`#FDE7EF`
`pink-200`	`#F8BBD0`
`pink-500`	`#E97DA5`
`pink-800`	`#8C3A5B`
`pink-onboarding` ⭐	`#FF91C7`	온보딩 슬라이드 배경 전용 (Figma `Onboarding_pink-`). 일반 Pink 시리즈보다 hot pink

3.2 Green — 신선식품, 건강, 친환경

신선 식재료, 친환경 캠페인, 헬시 메뉴, 봄 시즌

Token	HEX	비고
`green-50`	`#DCEDD6`
`green-200`	`#A3D2A3`
`green-500`	`#4A9B5A`
`green-800`	`#2A5A33`
`green-onboarding` ⭐	`#419A49`	온보딩 3 슬라이드 배경 전용 (Figma 5839:17013). 사장님+고객 듀오 슬라이드 — 일반 green-500과 다른 anchor

3.3 Brown — 카페, 디저트, 베이커리

카페·디저트 카테고리, 베이커리, 가을 시즌

Token	HEX	비고
`brown-50`	`#F4E6D4`
`brown-200`	`#D9B286`
`brown-500`	`#B6764A`
`brown-800`	`#6B4326`
`brown-onboarding` ⭐	`#C48257`	온보딩 2 슬라이드 배경 전용 (Figma 5839:16943). 쿠모/도시락 슬라이드 — 일반 brown-500과 다른 anchor

3.4-1 Orange — 알림 액센트 (재방문, 마지막 로그인 등)

Token	HEX	비고
`orange-main` ⭐	`#FF8500`	알림 토스트 배경 (Figma `main_orange`) — 부드러운 정보 알림 전용

3.4 Blue — 음료, 시원함, 쿨 메뉴

음료 카테고리, 여름 시즌, 쿨 메뉴, 시원함

Token	HEX
`blue-50`	`#DCEAEE`
`blue-200`	`#A5CDD9`
`blue-500`	`#5BA8C0`
`blue-800`	`#2D5566`

4. 사용 가이드라인

4.1 Tier 2 사용 원칙

한 화면에 Secondary 1~2개만 — 4개 다 쓰면 다시 알록달록해짐
주요 액션은 항상 Brand Yellow — 주문/결제 버튼은 Secondary로 바꾸지 말 것
배너, 카테고리 라벨, 일러스트에만 — 본문 텍스트 색으로 사용 금지
이벤트 종료 후 Tier 1으로 복귀 — 시즌별 운영

4.2 접근성 (WCAG 2.1 AA 기준)

텍스트 대비비 권장

본문 텍스트: neutral-700 (#464646) on neutral-50 (#FAFAFA) → 9.1:1 ✅ AAA
제목 텍스트: neutral-800 (#333333) on neutral-50 → 12.6:1 ✅ AAA
Brand Yellow 위 텍스트: 반드시 검정 계열 사용 (neutral-800 이상)
- ❌ Yellow #FFDE36 + 흰색 텍스트 → 1.6:1 (불가)
- ✅ Yellow #FFDE36 + 검정 #333333 → 12.4:1 / #222222 → 14.8:1
Secondary 500 위 텍스트: 흰색 사용 가능 (대비비 4.5 이상 검증됨)

색약/색맹 고려

Semantic 의미 전달은 반드시 아이콘과 함께 사용
색만으로 의미 전달 금지 (예: 빨간 글씨로만 "에러" 표시 X)

4.3 다크모드 확장 (추후)

현재는 라이트모드 우선 설계. 다크모드 추가 시:

neutral-50 ↔ neutral-900 같은 식으로 매핑
Brand Yellow는 다크모드에서도 동일 (#FFDE36)
채도가 살짝 높은 노랑이라 어두운 배경에서도 잘 보임

5. CSS Variables 구현 예시

css

:root {
  /* Tier 1 — Brand Yellow (#FFDE36 기준, 디자이너 원안) */
  --color-yellow-50: #FFFCE5;
  --color-yellow-100: #FFF6B0;
  --color-yellow-200: #FFEC80;
  --color-yellow-300: #FFE55C;
  --color-yellow-400: #FFE140;
  --color-yellow-500: #FFDE36;
  --color-yellow-600: #F2CC0F;
  --color-yellow-700: #C8A607;
  --color-yellow-800: #8E7505;
  --color-yellow-900: #5C4D03;
  --color-yellow-950: #3A3001;

  /* Tier 1 — Neutrals (Cool Gray, R=G=B · v3) */
  --color-neutral-50: #FAFAFA;
  --color-neutral-100: #F7F7F7;  /* ⭐ 탭바 배경 anchor */
  --color-neutral-200: #EDEDED;  /* ⭐ 탭바 보더 anchor (Figma Variables Neutral/200) */
  --color-neutral-300: #D4D4D4;
  --color-neutral-400: #B8B8B8;
  --color-neutral-500: #999999;  /* ⭐ 탭바 비활성 anchor */
  --color-neutral-600: #777777;  /* Figma Variables Neutral/600 */
  --color-neutral-700: #464646;  /* Figma Variables Neutral/700 */
  --color-neutral-800: #333333;  /* ⭐ 탭바 활성 anchor */
  --color-neutral-900: #222222;  /* ⭐ 탭바 활성 진한 anchor */
  --color-neutral-950: #0A0A0A;

  /* Tier 1 — Semantic Aliases */
  --color-brand: var(--color-yellow-500);
  --color-brand-hover: var(--color-yellow-600);
  --color-brand-pressed: var(--color-yellow-700);

  --color-bg-page: var(--color-neutral-50);
  --color-bg-card: #FFFFFF;
  --color-bg-subtle: var(--color-neutral-100);

  --color-text-primary: var(--color-neutral-800);
  --color-text-body: var(--color-neutral-700);
  --color-text-secondary: var(--color-neutral-500);
  --color-text-placeholder: var(--color-neutral-400);

  --color-border-default: var(--color-neutral-300);
  --color-border-subtle: var(--color-neutral-200);

  /* Tier 1 — Notification */
  --color-notification-bg: var(--color-neutral-100);
  --color-notification-text: var(--color-neutral-700);
  --color-notification-icon: var(--color-neutral-800);
  --color-notification-border: var(--color-neutral-200);

  --color-alert-bg: var(--color-neutral-800);
  --color-alert-text: var(--color-neutral-50);
  --color-alert-icon: var(--color-neutral-50);

  /* Tier 1 — Dim & Overlay */
  --dim-strong:        rgba(10, 10, 10, 0.7);   /* 풀스크린 모달 */
  --dim-medium:        rgba(10, 10, 10, 0.5);   /* 표준 모달, 드로어 */
  --dim-soft:          rgba(10, 10, 10, 0.3);   /* 옅은 dim */
  --dim-image:         rgba(10, 10, 10, 0.55);  /* 영업안함 매장 카드 */
  --dim-image-soft:    rgba(10, 10, 10, 0.35);  /* 약한 강조 */
  --dim-white-strong:  rgba(255, 255, 255, 0.85); /* 로딩 마스크 */
  --dim-white-medium:  rgba(255, 255, 255, 0.6);
  --dim-white-soft:    rgba(255, 255, 255, 0.3);

  /* Opacity tokens */
  --opacity-disabled:  0.4;
  --opacity-pressed:   0.85;
  --opacity-hover:     0.92;
  --opacity-loading:   0.6;
  --opacity-skeleton:  0.08;

  /* Tier 2 — Pink */
  --color-pink-50: #FDE7EF;
  --color-pink-200: #F8BBD0;
  --color-pink-500: #E97DA5;
  --color-pink-800: #8C3A5B;

  /* Tier 2 — Green */
  --color-green-50: #DCEDD6;
  --color-green-200: #A3D2A3;
  --color-green-500: #4A9B5A;
  --color-green-800: #2A5A33;

  /* Tier 2 — Brown */
  --color-brown-50: #F4E6D4;
  --color-brown-200: #D9B286;
  --color-brown-500: #B6764A;
  --color-brown-800: #6B4326;

  /* Tier 2 — Blue */
  --color-blue-50: #DCEAEE;
  --color-blue-200: #A5CDD9;
  --color-blue-500: #5BA8C0;
  --color-blue-800: #2D5566;
}

6. Figma 변수 적용 방법

6.1 컬렉션 구조 권장

Yumyum/
├── 01-Primitives/        (원시 값. 직접 사용 X)
│   ├── Yellow/ (50~950)
│   ├── Neutral/ (50~950)
│   ├── Pink/ (50, 200, 500, 800)
│   ├── Green/ (50, 200, 500, 800)
│   ├── Brown/ (50, 200, 500, 800)
│   └── Blue/ (50, 200, 500, 800)
│
└── 02-Semantic/          (실제 사용. Primitives 참조)
    ├── brand/
    ├── bg/
    ├── text/
    ├── border/
    ├── notification/
    └── alert/

6.2 권장 Figma 플러그인

Tokens Studio — JSON으로 토큰 일괄 import/export 가능
Figma Variables — 기본 변수 기능 (단순한 경우 충분)

7. 기존 vs 신규 비교 요약

항목	기존	v2 (신규)
Brand Color	Yellow + Orange + Black + Light Yellow (4개)	Yellow 하나
Yellow Scale	7단계, 어두운 톤 없음, 명도 순서 깨짐	11단계, 균등 분포
Neutrals	13단계, 중복 많음, 차가운 회색	11단계, 균등, warm gray
Semantic	7개 (의미 충돌, warning 없음)	2개 알림 + 아이콘 매핑
Secondary	6개 (톤 제각각, 용도 불명)	4개, 톤 일관, 카테고리 매핑
사용 가이드	없음	Tier 1/2 명시, 비율 정의
접근성	검증 안 됨	WCAG AA 검증

8. 다음 단계 (After Color)

이 컬러 시스템이 자리잡으면, 다음 디자인 시스템 요소도 같은 방식으로 정리:

[ ] Typography — 한글 폰트(LaundryGothic), 영문 폰트, 크기 스케일
[ ] Spacing — 4px 베이스 그리드 (4, 8, 12, 16, 24, 32, 40, 64)
[ ] Radius — 4, 8, 12, 16, 24 (pill)
[ ] Elevation/Shadow — 0~4단계
[ ] Components — Button, Input, Card, Modal, Badge, Toast 등
[ ] Stratis UI Icons — Stratis UI Icons 통일, 사이즈 가이드

이 문서는 살아있는 문서입니다. 디자인 시스템이 발전하면서 함께 업데이트하세요.

YumYum 디자인 시스템 — 컬러 토큰 v3.1 ​

1. 디자인 원칙 ​

1.1 핵심 컨셉 ​

1.2 컬러 사용 비율 ​

1.3 컬러 계층 (Tier) ​

2. Tier 1 — Base Tokens ​

2.1 Brand Yellow (Primary) ​

2.1.1 노란 CTA Interaction States ⭐ (2026-05-18 시스템화) ​

2.2 Neutrals (Cool Gray · v3) ​

2.3 Notification (무채색 Semantic) ​

기본 알림 (Soft) ​

강한 알림 (High-emphasis) ​

의미별 아이콘 매핑 (Stratis UI Icons) ​

2.4 Dim & Overlay (오버레이) ​

Dark Dim (다크 오버레이 — 가장 빈번) ​

Image Dim (이미지 위 오버레이 — 매장 카드 등) ​

White Dim (라이트 오버레이) ​

Opacity Tokens (요소 자체 투명도) ​

Image Overlay 텍스트 가이드 ​

3. Tier 2 — Event Tokens (Secondary Brand Colors) ​

3.1 Pink — 이벤트, 프로모션, 혜택 ​

3.2 Green — 신선식품, 건강, 친환경 ​

3.3 Brown — 카페, 디저트, 베이커리 ​

3.4-1 Orange — 알림 액센트 (재방문, 마지막 로그인 등) ​

3.4 Blue — 음료, 시원함, 쿨 메뉴 ​

4. 사용 가이드라인 ​

4.1 Tier 2 사용 원칙 ​

4.2 접근성 (WCAG 2.1 AA 기준) ​

텍스트 대비비 권장 ​

색약/색맹 고려 ​

4.3 다크모드 확장 (추후) ​

5. CSS Variables 구현 예시 ​

6. Figma 변수 적용 방법 ​

6.1 컬렉션 구조 권장 ​

6.2 권장 Figma 플러그인 ​

7. 기존 vs 신규 비교 요약 ​

8. 다음 단계 (After Color) ​