시그니처 컴포넌트
마케팅·앱·B마트·빈 상태 영역의 대표 패턴. 그라데이션 없음, 이모지 없음(일러스트 placeholder), 한국어 호칭 그대로.
로고 / 앱 아이콘
wordmark + mark
배달의민족
워드마크는 한나체 5글자 그대로. 별도 심볼 마크 없음 · 2024 리브랜드 앱 아이콘은 민트 배경 + 흰 "배민".
로고 = 한나체 워드마크(타입 자체가 마크). 앱 아이콘 자산만 별도 SVG로 분리.
search-bar
primary fill뭐예요?
민트 풀 배경 + 흰 캡슐 입력창. placeholder는 "마법주문어" — 위트 카피 허용.
service-cards · 3분할
entry cards가게배달
가게에서 자체 배달
B마트
장보기도 더 빠르게!
배민스토어
배달은 지금 옵니다
로그인 직후 가장 먼저 만나는 핵심 도메인 내비. 14px radius + 1px 보더, 타이틀 800, 서브 11px/fg-3 2줄. 실제 앱은 3D 미니어처(여기선 placeholder).
coupon-card-light
mint border + ticket고객님을 위해 준비한 할인 쿠폰
표면 카드 + 1.5px 민트 보더. 우측 64×44 오렌지 티켓 rotate(-4deg) + 스티커 그림자, 우상단 20px B코인 뱃지(검정 배경 + 민트 "B"). 오렌지 풀배경 배너와 구분되는 별도 패턴.
rating
star-gold compound별은 별점 전용 골드 14px(포인트 코인보다 약간 어둡고 채도 낮음), 점수 13px/800, 회색 리뷰수는 한국어 수 표기 그대로(리뷰 999 · 1만+ · 9).
badge-status · 4 variants
status + classify냉동 32px 원(파랑) · NEW 18px 핑크 pill · 민트틴트 분류 태그 · 핑크 아웃라인 태그(채움 대신 보더로 약한 강조). 가격·물류·분류 층위를 색으로 분리.
role-title-banner
honor + name등급명을 한국어 형용사 호칭으로 노출. 영문 "Gold member"의 자리를 그대로 흡수한 시그니처 패턴.
category-grid · 5×2
circle container실제 앱은 3D 미니어처 음식 렌더(Apple emoji 결을 닮은 배민 전용 자산). 이 프리뷰는 손그림 라인 stub.
product-card · B마트
1:1 thumb노르웨이산 생연어 200g
좌상단 빨강 할인 칩, 좌하단 냉동 인디케이터, 우하단 + 추가 버튼. 가격은 800 weight + tabular-nums.
tag-discount · 4 variants
pill 22px빨강 할인 / 민트 NEW / 보라 한그릇 / 냉동 원형. 그라데이션 금지, 모두 단색.
button · primary / mint / ghost
pill 48px다크에선 표준 primary 알약을 밝은 표면 + 검정 텍스트로 반전. mint 버튼에 시그니처 sticker-shadow(6px 오프셋, blur 0) 적용.
empty-state-clay
single hangul자주 찾는 가게를 찜 해보세요
점토 한 글자 + 작은 회색 안내. 마케팅·찜 영역 전용 (지갑·포인트는 3D 굿즈로 분리).
toast-notice
black pill색상 풀 배경 위 안내 — 검정 캡슐 + 흰 텍스트 90% opacity. 다크에서도 검정 유지(리터럴 잠금).
coupon-banner
orange fill왓더님, 바로 쓸 수 있는
5,000원 쿠폰이 있어요!
쿠폰함에서 확인하기
닉네임 호명 + 한나체 헤드라인 4~7자 라인 브레이크 그대로 적용.
bottom-tab-bar · 5 탭
84px height활성 탭은 검정 채움 아이콘, 비활성은 stroke 2px 라인. 항상 5탭 고정.
key-screen · 가게 목록 (배달 99+)
390pt mobile칭찬강정 딜리점
⏱ 30~45분 무료배달
최소주문 14,000원
설정하신 주소 근처 가게만 보여요.
search-app-bar(back + 검색 + cart-badge) → tab-bar-scroll(active underline) → filter-chip-row(정렬·필터·드롭다운) → restaurant-row(썸네일 + rating + ETA + 무료배달 빨강 pill + club-mini-badge) → ad-banner-dark(검정 + 노랑 캐릭터) → empty-area-note. 시그니처 컴포넌트가 한 화면에 묶인다.