로고 / 앱 아이콘
wordmark + mark배달의민족
워드마크는 한나체 5글자 그대로. 별도 심볼 마크 없음 · 2024 리브랜드 앱 아이콘은 민트 배경 + 흰 "배민".
로고 = 한나체 워드마크(타입 자체가 마크). 앱 아이콘 자산만 별도 SVG로 분리.
BAEMIN 2.0 · 2024BAEMIN 2.0 · 2024 · DARK
배달의민족
오늘도 가장 앞서 뜨겁게 달립니다. 한국 길거리 간판 미학을 디지털로 가져온 음식·생필품 슈퍼앱.
⚑ 다크 모드 토큰은 추정값입니다
services/baemin.md는 다크 모드 토큰을 싣지 않습니다. 이 프리뷰의 다크 표면(bg-page · bg-surface · border 등)은 라이트 토큰을 토대로 재구성한 추정치이며, 우아한형제들이 공식 배포한 값이 아닙니다. 브랜드 민트 primary와 액센트 컬러는 라이트와 동일하게 유지했습니다.
마케팅·앱·B마트·빈 상태 영역의 대표 패턴. 그라데이션 없음, 이모지 없음(일러스트 placeholder), 한국어 호칭 그대로.
배달의민족
워드마크는 한나체 5글자 그대로. 별도 심볼 마크 없음 · 2024 리브랜드 앱 아이콘은 민트 배경 + 흰 "배민".
로고 = 한나체 워드마크(타입 자체가 마크). 앱 아이콘 자산만 별도 SVG로 분리.
민트 풀 배경 + 흰 캡슐 입력창. placeholder는 "마법주문어" — 위트 카피 허용.
가게배달
가게에서 자체 배달
B마트
장보기도 더 빠르게!
배민스토어
배달은 지금 옵니다
로그인 직후 가장 먼저 만나는 핵심 도메인 내비. 14px radius + 1px 보더, 타이틀 800, 서브 11px/fg-3 2줄. 실제 앱은 3D 미니어처(여기선 placeholder).
고객님을 위해 준비한 할인 쿠폰
흰 표면 + 1.5px 민트 보더. 우측 64×44 오렌지 티켓 rotate(-4deg) + 스티커 그림자, 우상단 20px B코인 뱃지(검정 배경 + 민트 "B"). 오렌지 풀배경 배너와 구분되는 별도 패턴.표면 카드 + 1.5px 민트 보더. 우측 64×44 오렌지 티켓 rotate(-4deg) + 스티커 그림자, 우상단 20px B코인 뱃지(검정 배경 + 민트 "B"). 오렌지 풀배경 배너와 구분되는 별도 패턴.
별은 별점 전용 골드 14px(포인트 코인보다 약간 어둡고 채도 낮음), 점수 13px/800, 회색 리뷰수는 한국어 수 표기 그대로(리뷰 999 · 1만+ · 9).
냉동 32px 원(파랑) · NEW 18px 핑크 pill · 민트틴트 분류 태그 · 핑크 아웃라인 태그(채움 대신 보더로 약한 강조). 가격·물류·분류 층위를 색으로 분리.
등급명을 한국어 형용사 호칭으로 노출. 영문 "Gold member"의 자리를 그대로 흡수한 시그니처 패턴.
실제 앱은 3D 미니어처 음식 렌더(Apple emoji 결을 닮은 배민 전용 자산). 이 프리뷰는 손그림 라인 stub.
좌상단 빨강 할인 칩, 좌하단 냉동 인디케이터, 우하단 + 추가 버튼. 가격은 800 weight + tabular-nums.
빨강 할인 / 민트 NEW / 보라 한그릇 / 냉동 원형. 그라데이션 금지, 모두 단색.
검정 알약이 표준 primary. mint 버튼에 시그니처 shadow-sticker(블랙 6px 오프셋, blur 0) 적용.다크에선 표준 primary 알약을 밝은 표면 + 검정 텍스트로 반전. mint 버튼에 시그니처 shadow-sticker(6px 오프셋, blur 0) 적용.
자주 찾는 가게를 찜 해보세요
점토 한 글자 + 작은 회색 안내. 마케팅·찜 영역 전용 (지갑·포인트는 3D 굿즈로 분리).
색상 풀 배경 위 안내 — 검정 캡슐 + 흰 텍스트 90% opacity. backdrop-filter 없음.색상 풀 배경 위 안내 — 검정 캡슐 + 흰 텍스트 90% opacity. 다크에서도 검정 유지(리터럴 잠금).
쿠폰 금액과 보유 안내는 레이아웃 시연용 더미 데이터이며, 실제 배민 쿠폰이나 혜택이 아닙니다.
쿠폰함에서 확인하기
닉네임 호명 + 한나체 헤드라인 4~7자 라인 브레이크 그대로 적용.
활성 탭은 검정 채움 아이콘, 비활성은 stroke 2px 라인. 항상 5탭 고정.
가게명·메뉴·별점·배달 시간·최소주문·배달팁 면제 안내와 '이마트슈퍼무배' 같은 제휴 표기는 모두 레이아웃 시연용 더미 데이터이며, 실제 가게 정보나 배달·제휴 조건이 아닙니다.
⏱ 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. 시그니처 컴포넌트가 한 화면에 묶인다.