디자인 시스템 — Style B (KTDS 풍)

데이터 위주 미니멀 — CSS 변수명 표기, 컴포넌트별 Variants / Sizes / Usage 명시. 동일 토큰의 다른 표현으로 Style A (getdesign.md 풍) 참조.
출처: Figma YumYum-v1

Foundation

토큰 명명 규칙: --{category}-{role}-{tier} (예: --color-brand-main, --color-neutral-700).

카테고리	Prefix	예
Color	`--color-*`	`--color-brand-main`, `--color-error`
Typography	`--font-`, `--text-`	`--text-body`, `--font-family-base`
Spacing	`--space-*`	`--space-md`
Radius	`--radius-*`	`--radius-md`

Color · Brand

Brand / Main · #ffde36 · --color-brand-main
모든 primary CTA, 핵심 액센트, 로고. 단일 메인 컬러.

Brand / Orange · #ff8500 · --color-brand-orange
서브 브랜드. 포인트 / 보조 강조.

Brand / Onboarding Pink · #ff91c7 · --color-brand-onboarding-pink
온보딩 화면 전용. 일반 화면에서 미사용.

Color · Yellow Scale

Tier	Hex	Token
Yellow / 50	`#fff6cf`	`--color-yellow-50`
Yellow / 100	`#fff4c9`	`--color-yellow-100`
Yellow / 200	`#ffe6b8`	`--color-yellow-200`
Yellow / 300	`#ffd78c`	`--color-yellow-300`
Yellow / 400	`#fdbc45`	`--color-yellow-400`
Yellow / 500	`#f5c51d`	`--color-yellow-500`
Yellow / 600	`#ffcd1e`	`--color-yellow-600`
Yellow / 700 (Brand)	`#ffde36`	`--color-yellow-700` = `--color-brand-main`

Color · Orange / Pink / Magenta

Hex	Token	용도
`#ff8500`	`--color-brand-orange`	메인 오렌지
`#ff8a00`	`--color-orange-500`	변형
`#eb7501`	`--color-orange-600`	변형
`#ff7752`	`--color-salmon`	살몬
`#ff91c7`	`--color-brand-onboarding-pink`	온보딩 핑크
`#ffb8bf`	`--color-pink-200`	라이트 핑크
`#a40037`	`--color-magenta-900`	딥 마젠타
`#ba134b`	`--color-magenta-800`	와인
`#bc2f5b`	`--color-magenta-700`	와인 변형

Color · Neutral

Tier	Hex	Token
Black	`#000000`	`--color-neutral-1000`
Near-Black	`#080808`	`--color-neutral-950`
900	`#222222`	`--color-neutral-900`
800	`#2d2d2d`	`--color-neutral-800`
700	`#333333`	`--color-neutral-700`
600	`#464646`	`--color-neutral-600`
500	`#6b6b6b`	`--color-neutral-500`
400	`#777777`	`--color-neutral-400`
350	`#848484`	`--color-neutral-350`
300	`#999999`	`--color-neutral-300`
200	`#cecece`	`--color-neutral-200`
150	`#ededed`	`--color-neutral-150`
100	`#f7f7f7`	`--color-neutral-100`
White	`#ffffff`	`--color-neutral-0`

Color · Alpha

Token	정의
`--color-alpha-bg-gray-30`	`#777777 @ 30%`
`--color-alpha-bg-gray-70`	`#777777 @ 70%`
`--color-alpha-yellow-cart`	`#000000 @ 20%`

Color · Semantic

Error / Danger

Tier	Hex	Token
Error	`#eb2323`	`--color-error`
Error / BG	`#fcdede`	`--color-error-bg`

Success

Tier	Hex	Token
Success	`#3cde75`	`--color-success`
Success / Strong	`#99d162`	`--color-success-strong`
Success / Text	`#458a4b`	`--color-success-text`
Success / BG	`#c5ff9c`	`--color-success-bg`

Info / Link

Tier	Hex	Token
Info	`#2597ba`	`--color-info`
Info / Dark	`#005878`	`--color-info-dark`
Info / Dark Alt	`#006699`	`--color-info-dark-2`
Link / Variant	`#1496c9`	`--color-link-alt`
Info / BG	`#c2e3eb`	`--color-info-bg`
Link	`#2763ff`	`--color-link`

Earth Tones (Food)

Tier	Hex	Token
Brown	`#bb7b4d`	`--color-earth-brown`
Brown / Dark	`#8f4d36`	`--color-earth-brown-dark`
Brown / Mid	`#996246`	`--color-earth-brown-mid`
Brown / Light	`#c18161`	`--color-earth-brown-light`
Brown / Orange	`#eb894b`	`--color-earth-brown-orange`
Coffee / Deep	`#191403`	`--color-earth-coffee`

Typography

Font Family

Role	Family	Token
Primary	Pretendard	`--font-family-base`
Mono / iOS	SF Pro	`--font-family-system`

Type Scale

Display · 28px / 700 / lh 1.2 · Pretendard Bold · --text-display

큰 헤드라인 — 화면 최상단

Heading · 18px / 700 / lh 1.4 · Pretendard Bold · --text-heading

섹션 제목입니다

Heading SM · 17px / 600 / lh 1.4 · Pretendard SemiBold · --text-heading-sm

부제목 / 카드 제목

Body Bold · 16px / 700 / lh 1.5 · Pretendard Bold · --text-body-bold

본문에서 굵게 강조해야 하는 단어

Body SemiBold · 16px / 600 / lh 1.5 · Pretendard SemiBold · --text-body-semibold

중간 강조의 본문 텍스트

Body Medium · 16px / 500 / lh 1.5 · Pretendard Medium · --text-body-medium

살짝 강조된 본문 — 메뉴 항목 등

Body · 16px / 400 / lh 1.5 · Pretendard Regular · --text-body

기본 본문 — 설명, 안내 문구가 들어갑니다.

Body SM · 14px / 400 / lh 1.5 · Pretendard Regular · --text-body-sm (사용 빈도 251회)

작은 본문 — 카드 내부 설명, 보조 안내

Caption Bold · 12px / 600 / lh 1.4 · Pretendard SemiBold · --text-caption-bold

강조 라벨 / 배지

Caption · 12px / 400 / lh 1.4 · Pretendard Regular · --text-caption (최다 사용 — 377회)

보조 텍스트 / 라벨 / 메타 정보

Caption XS · 10px / 400 / lh 1.4 · Pretendard Regular · --text-caption-xs (사용 빈도 145회)

매우 작은 메타 / 캡션

Spacing

Token	Value	용도
`--space-xs`	`4px`	미세 갭
`--space-sm`	`8px`	인라인 갭
`--space-md`	`16px`	표준 갭
`--space-lg`	`20px`	화면 좌우 패딩 (Side Padding)
`--space-xl`	`24px`	큰 갭
`--space-2xl`	`32px`	섹션 분리

Radius

Token	Value	용도
`--radius-sm`	`4px`	작은 인라인
`--radius-md`	`8px`	표준 카드, 버튼
`--radius-lg`	`12px`	큰 카드
`--radius-full`	`10000px`	원형, pill

Layout

Canvas

Property	Value
Mobile baseline	`390 × 844` (iPhone 13 portrait)
Status bar (top safe area)	`54px`
Home indicator (bottom safe area)	`21px`

Container patterns

Pattern	Size	용도
Full width	`390`	풀폭 콘텐츠
Side padding	`20` (좌우)	화면 좌우 여백
Onboarding	`350 × 463`	온보딩 박스
Button (Large)	`295 × 55`	메인 CTA
Bottom sheet (Large)	`390 × 549`	약관 long form
Bottom sheet (Medium)	`390 × 260`	위치 선택
Bottom sheet (Sort)	`390 × 226`	정렬 옵션
Bottom sheet (Terms)	`390 × 205`	약관 short
Popup (with content)	`300 × 247`	표준 팝업
Popup (empty)	`300 × 161`	빈 상태 팝업

Components

Button

Variants

컴포넌트	채움	텍스트
Primary	`--color-brand-main` (`#ffde36`)	`--color-neutral-1000` (Black)
Secondary	`--color-neutral-100`	`--color-neutral-900`
Disabled	`--color-neutral-200`	`--color-neutral-400`

Sizes

Size	Width × Height	용도
Large	`295 × 55`	메인 CTA
Small	—	보조 액션
Bottom (full)	`390 × 한정`	화면 하단 고정
Icon frame	—	아이콘 + 텍스트

Usage

메인 CTA 는 화면당 1개만 — Primary 버튼이 여러 개 있으면 위계가 무너집니다. 보조 액션은 Secondary 또는 텍스트 링크(Under_Bnt) 로.

Input

Variants

컴포넌트	용도
Input field	기본 텍스트 입력
Input field (message icon)	메시지 아이콘 포함
Input field (function icon)	기능 아이콘 포함
Input field (indicator icon)	인디케이터 포함
Login / input	로그인 입력 (variant set)
Coupon input	쿠폰 입력

Selection

Variants

컴포넌트	Variants
Check box	`Checked = Yes / No`
Radio btn	—
Toggle	`On` / `Off`, `Selected = Yes / No`, `Show = Yes / No`
Quantity selector	`−` / `+`
Duration selector	시간 선택
Dropdown	`status = Open / Closed`

Card

Variants

컴포넌트	용도
Store card	매장 카드
Store card (home)	홈 매장 카드 (358 × 195)
Favorite store	즐겨찾기 카드
Meal card	메뉴 카드
Order card	주문 카드
Notification card	알림 카드
Banner	배너
Review card	리뷰 (`Review` / `Review card - client`)

Cart / Coupon

Variants

컴포넌트	Variants
Cart	`= Add to / Remove from / Disabled`
Coupon	`= Added / Not added`
Add to cart	—
Ordered meal	—

Store Status

Variants

Variant	의미
`Open now`	영업 중
`Closed`	영업 종료
`Opening time`	오픈 시간 표시 (Figma typo: `Opnenig`)
`Receive orders at`	주문 접수 시간
`Store call`	전화 주문

Order State Machine

고객 측 (User App)

pending → received → Accepted → Preparing → Done

Figma typo: recieved → received

사장 측 (Store App)

New order → Active
              ├─ Paused
              ├─ Busy
              └─ Closed

추가 상태: Replied, started, Middle state

Map / Location

Variants

컴포넌트	용도
Map_pin (open / close)	매장 핀 (영업 / 마감)
MiniMap_pin (open / close)	미니맵
Map_view-Button (On / Off)	지도 / 리스트 토글
Map_view (open / close)	지도 뷰 상태
Map_view-open-Discount	할인 강조 지도
Current location	현재 위치
Location	`= Default / Detect location`

Feedback / Overlay

Variants

컴포넌트	용도
Toast	토스트 메시지 (자동 dismiss)
Snackbar content	스낵바
Popup	`1-line / 2-line / 3-pic / NO-text`
Alert	위치 알림 (140 × 35)

Avatar / Mascot

Roster (브랜드 핵심 자산)

Yami · Yamu · Kumo · Pong-ji · Hong-ji · Chila · 무무 · 무지 · 상수 · 흰둥이 · 효희

Variants

컴포넌트	용도
User avatar	일반 사용자
User avatar / 사장님	사장님
Avatar / Image-60	60px 아바타
Character	캐릭터 일러스트 (Figma typo: `Charater`)

Icon System

--icon-* — 약 40종

Group	Icons
Navigation	Back, Cancel, Down, Up, Right, Left, More
Action	Edit, Delete, Plus, Minus, Reload, Reorder, Search, Upload, Download
Status	Success, Error, Hint, Hide, View, Mandatory, Maintenance, Repair
Content	Cart, Cart out, Calendar, Date, Time, Won, Flag, Email, Phone number
Personal	User-Profile, ID, Date of birth, Gender, Lock, Lock-Password, Passport, Language
Location	Location, User location
Misc	Checkout, WhatsApp, Hide, Assign to unit, Change accommodation

Empty / Exception

Variants

컴포넌트	용도
Empty	빈 상태
Empty_icon	빈 상태 아이콘
Warning_icon	경고 (Figma typo: `Warring`)
X-2	닫기

Patterns

CTA Hierarchy

Primary — Button - Large (295 × 55, --color-brand-main)
Bottom-fixed — Bottom bnt
Secondary — Button - Small
Text link — Under_Bnt

Bottom Sheet — 용도별 높이

Use	Height
약관 동의 (long)	549
약관 동의 (short)	205
위치 선택	260
정렬 옵션	226

State	Size
With content	300 × 247
Empty	300 × 161

Toast

화면 하단 슬라이드 업 → 자동 dismiss.

Guidelines

Do

--color-brand-main (#ffde36) 는 primary 액션 / 핵심 액센트 / 로고에만
노랑 위에는 검은 텍스트 (--color-neutral-1000 또는 --color-neutral-950)
마스코트 캐릭터를 적극 활용 — 친근한 톤이 브랜드의 핵심
타이포는 Pretendard 단일 사용 (한글 가독성)
iOS 390 × 844 baseline + Safe Area (54 + 21) 안에서 설계
모든 컴포넌트는 변형(variant) 으로 관리

Don't

노랑 위 흰색 텍스트 X — contrast 부족
두 번째 메인 브랜드 컬러 도입 X — 오렌지·핑크는 보조 위계 유지
카테고리 강조 컬러를 Brand main 자리에 사용 X
Radius 단계를 다양하게 늘리지 X — 4 / 8 / 12 / full 4단계 안에서

Token Cleanup (Figma 정리 권장)

[ ] Text Style 부재 — 폰트 사이즈 / 웨이트가 raw value 적용. Pretendard Text Style 등록 권장
[ ] Color Style 1개 — main 외 시멘틱 컬러 미정의. 위 토큰 표 기반으로 paint style / variable 등록 권장
[ ] Component naming typo 정정 — Resauratn → Restaurant, Opnenig → Opening, Bussiness → Business, Warring → Warning, Charater → Character, recieved → received
[ ] Property 1=… 익명 variant → 의미 있는 property 이름

References

디자인 파일: YumYum-v1 (Figma)
BM Flow 보드: YumYum BM Flow / 기획 (FigJam)
서비스 페이지: https://www.yumyum.im
화면 명세서: 02-screen-specs
개발자 핸드오프: 04-developer-handoff
용어 정의: Glossary

디자인 시스템 — Style B (KTDS 풍) ​

Foundation ​

Color · Brand ​

Color · Yellow Scale ​

Color · Orange / Pink / Magenta ​

Color · Neutral ​

Color · Alpha ​

Color · Semantic ​

Error / Danger ​

Success ​

Info / Link ​

Earth Tones (Food) ​

Typography ​

Spacing ​

Radius ​

Layout ​

Components ​

Button ​

Input ​

Selection ​

Card ​

Cart / Coupon ​

Store Status ​

Order State Machine ​

Map / Location ​

Feedback / Overlay ​

Avatar / Mascot ​

Icon System ​

Empty / Exception ​

Patterns ​

CTA Hierarchy ​

Bottom Sheet — 용도별 높이 ​

Popup ​

Toast ​

Guidelines ​

Do ​

Don't ​

Token Cleanup (Figma 정리 권장) ​

References ​

디자인 시스템 — Style B (KTDS 풍)

Foundation

Color · Brand

Color · Yellow Scale

Color · Orange / Pink / Magenta

Color · Neutral

Color · Alpha

Color · Semantic

Error / Danger

Success

Info / Link

Earth Tones (Food)

Typography

Spacing

Radius

Layout

Components

Button

Input

Selection

Card

Cart / Coupon

Store Status

Order State Machine

Map / Location

Feedback / Overlay

Avatar / Mascot

Icon System

Empty / Exception

Patterns

CTA Hierarchy

Bottom Sheet — 용도별 높이

Popup

Toast

Guidelines

Do

Don't

Token Cleanup (Figma 정리 권장)

References