Meituan

노랑 #FFD100 위에 검은 글자 — 「美团黄」 스퀘어클 로고와 노랑 그라디언트 머리띠, 빽빽한 서비스 격자

아시아식품이커머스라이프스타일따뜻한modern-minimalhumanism고딕compactsoftsubtle라이트출시 2019개정 2021

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

브랜드명: 美团 Meituan (메이투안). 음식 배달 앱 「美团外卖」, 리뷰 앱 「大众点评」과 한 회사
한 줄 정체성: 배달·맛집·호텔·영화·약 배달·장보기를 앱 하나에 모은 중국의 생활 서비스 슈퍼앱. 노란 헬멧을 쓴 배달 기사가 거리의 풍경이 될 만큼 「노랑 = 美团」으로 굳었다
공식 디자인 철학: 공식 누리집 제목 그대로 「帮大家吃得更好，生活更好」(모두가 더 잘 먹고, 더 잘 살도록 돕는다). 배달 쪽 구호는 「美团外卖，送啥都快」(뭘 시켜도 빠르다)
브랜드 변천:
- 2019년 — 파란 원 배경을 걷어내고 로고 전체를 「美团黄」으로 바꿨다. 흰 글자였던 「美团」은 검정이 됐다. 앱 아이콘뿐 아니라 공유 자전거·보조배터리·결제 QR·POS 기기까지 오프라인 접점을 한꺼번에 노랑으로 맞췄다(시나 재경 2019-06-29)
- 美团体(Meituan Type) — 방정자고(方正字库)와 함께 만든 전용 서체. 획 끝을 50~70° 비스듬히 잘라 「앞으로 달리는」 속도감을 주고, 네모 획은 왼쪽 아래·오른쪽 위 두 모서리만 둥글려 「방정하면서 부드러운」 온기를 낸다. Light·Regular·Bold 3종, 한자 6,763자. 가맹점에 무료로 풀었다. 공식 누리집 CSS 에서 숫자·제목용 MTTiJ·MTTiF 로 실제 쓰인다
- 2021년 11월 — 美团外卖 로고의 캥거루를 전신에서 얼굴만 남긴 통통한 머리로 줄였다. 두 귀는 배달 기사 헬멧의 「캥거루 귀」이자 V 자 손가락(브이)으로도 읽히게 해 「낙관적인 생활」을 말한다
시그니처 요소 1개: 노랑 #FFD100 위의 검은 글자. 로고(노란 스퀘어클 + 검은 「美团」), 앱 머리의 노랑 그라디언트, 검은 글자를 얹은 노란 버튼까지 — 흰 글자를 노랑 위에 올리지 않는다

Tone & Mood

톤 & 무드

핵심 키워드 3개: 활기, 생활밀착, 친근
무드 설명: 앱을 열면 머리 부분이 노랑에서 흰색으로 풀리는 그라디언트, 그 아래 수십 개의 색색 서비스 아이콘이 빽빽하게 깔린다. 가게 카드마다 「4.8分·月售3000+·30分钟」 같은 숫자와 빨간 할인 태그가 붙어 시장 골목 같은 활기가 있다. 브랜드 쪽(로고·누리집)은 오히려 노랑과 먹색 #111925 두 가지로 절제돼 있다.
비주얼 스타일: 모던 미니멀(브랜드 누리집·로고) + 휴머니즘(캥거루 마스코트, 美团体의 둥근 모서리, 앱의 둥근 아이콘)
밀도(Density): Compact — 한 화면에 서비스 격자 10칸 이상, 가게 카드에 평점·판매량·시간·거리·배달비·할인 태그가 한 번에 들어간다
모서리 성향: Soft (4~8px) — 카드 8px, 태그 2~3px, 버튼·검색창만 알약. 로고 스퀘어클은 폭의 약 28% 반경
평면성: Subtle — 회색 바탕 #F4F5F6 위 흰 카드로 층을 나누고 그림자는 거의 없다

Color System

컬러 시스템 (CSS 변수)

> 실측: 공식 누리집(meituan.com) 로고 심볼의 fill="#FFD100", 로고 글자 #111925, CSS 에서 #FFD100 12회·rgb(17 25 37)(=#111925) 본문 글자 23회, #FFFBE6·#FFF8CC·#FFE366·#FFC300·#E7E8E9·#F7F8F9·#F3F3F4·rgb(184 186 190) 사용. 글자 위계는 rgba(17,25,37,.65/.45/.35/.2) 투명도로 나눈다. 앱 안의 가격·할인 빨강과 서비스 아이콘 색은 앱 화면 관찰값이며 (추정)이다. > 테마: 美团 앱의 기본 화면은 라이트다. 일부 설명 글에 「深色模式」 설정 경로가 적혀 있으나 공식 발표·공식 토큰은 확인하지 못해 여기서는 라이트 단일로 문서화한다.

:root {
  /* Primary — 美团黄 */
  --color-primary-50:  #FFFBE6;  /* 실측. 노랑 안내 띠 바탕 */
  --color-primary-100: #FFF8CC;  /* 실측. 강조 태그 바탕 */
  --color-primary-200: #FFEE99;  /* (추정) 선택 칩 바탕 */
  --color-primary-300: #FFE366;  /* 실측. 그라디언트 중간 */
  --color-primary-400: #FFDA33;  /* (추정) 호버 테두리 */
  --color-primary-500: #FFD100;  /* 실측. 대표 노랑 — 로고·주 버튼 */
  --color-primary-600: #FFC300;  /* 실측. 주 버튼 누름 */
  --color-primary-700: #E0A800;  /* (추정) 노랑 위 선 */
  --color-primary-800: #B38600;  /* (추정) 흰 바탕 위 노랑 계열 글자 */
  --color-primary-900: #7A5B00;  /* (추정) 노랑 태그 글자 */

  /* Secondary — 할인·가격 오렌지레드 (앱 관찰) */
  --color-secondary-500: #FF4A26;  /* (추정) 神券·가격·할인 태그 */

  /* Neutral — 먹색 #111925 계열 */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F7F8F9;  /* 실측 */
  --color-neutral-100:  #F3F3F4;  /* 실측 */
  --color-neutral-200:  #E7E8E9;  /* 실측. 구분선 */
  --color-neutral-300:  #B8BABE;  /* 실측 rgb(184 186 190) */
  --color-neutral-500:  #94989D;  /* rgba(17,25,37,.45) 흰 바탕 환산 */
  --color-neutral-700:  #646971;  /* rgba(17,25,37,.65) 흰 바탕 환산 */
  --color-neutral-900:  #111925;  /* 실측. 로고 글자·본문 */
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E6F8F0;  /* (추정) */
  --color-success-fg: #00A864;  /* (추정) */
  --color-warning-bg: #FFF3E6;  /* (추정) */
  --color-warning-fg: #FF8F1F;  /* 실측(누리집 CSS) */
  --color-error-bg:   #FFECEC;  /* (추정) */
  --color-error-fg:   #FF3141;  /* 실측(누리집 CSS) */
  --color-info-bg:    #E8F1FE;  /* (추정) */
  --color-info-fg:    #166FF7;  /* 실측(포커스 링 rgba(22,111,247,.5)) */

  /* Surface */
  --bg-base:     #F4F5F6;  /* (추정) 앱 회색 바탕 */
  --bg-subtle:   #F7F8F9;  /* 섹션 구분 */
  --bg-elevated: #FFFFFF;  /* 카드 */
  --bg-overlay:  #FFFFFF;  /* 시트·팝업 */
  --bg-brand:    linear-gradient(180deg, #FFD100 0%, #FFE14D 55%, #FFF4C2 100%);  /* (추정) 앱 머리 */

  /* Text */
  --text-primary:   #111925;  /* 본문 */
  --text-secondary: #646971;  /* 보조 */
  --text-tertiary:  #94989D;  /* 캡션·자리표시 */
  --text-on-primary:#111925;  /* 노랑 위는 항상 먹색 */
  --text-disabled:  #B8BABE;

  /* Border */
  --border-default: #E7E8E9;
  --border-subtle:  #F3F3F4;
  --border-strong:  #111925;  /* 검색창 테 */
  --border-focus:   #FFD100;
}

Typography

타이포그래피

폰트 페어링:
- 중문: PingFang SC → Microsoft YaHei UI → Source Han Sans CN (누리집 CSS 실측 순서, 시스템 서체)
- 브랜드 서체: 美团体 MTTi(방정자고 공동 제작, 가맹점 무료 사용 허가 — 일반 공개 라이선스는 확인 못함). 숫자·가격·큰 제목용
- 한글: 공식 한글 가족 없음 → Pretendard 또는 Noto Sans KR 로 대체 (추정)
- 영문: 美团体 라틴(숫자 950자) / 시스템 -apple-system (추정)
위계 (앱 화면 관찰, 추정):
- Display: 32px / 700 / 1.2 / 0 — 美团体, 쿠폰 금액 「¥25」
- H1: 22px / 600 / 1.3 / 0 — 페이지 제목
- H2: 18px / 600 / 1.35 / 0 — 「猜你喜欢」 같은 섹션 제목
- H3: 16px / 600 / 1.4 / 0 — 가게 이름
- Body Large: 15px / 400 / 1.5 / 0
- Body: 14px / 400 / 1.5 / 0
- Body Small: 12px / 400 / 1.4 / 0 — 평점·판매량·거리 줄
- Caption: 10px / 400 / 1.3 / 0 — 할인 태그·아이콘 이름

Spacing

스페이싱

Base unit: 4px
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 12px; /* 앱 카드 안쪽 여백 (추정) */ --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; ``
Container: 앱은 좌우 8~12px 여백으로 카드를 거의 꽉 채운다(추정). 누리집은 Tailwind 기반, 최대 폭 1200px 안팎(추정)

Border Radius

--radius-none: 0;
--radius-sm: 3px;    /* 실측 3px — 할인 태그 */
--radius-md: 6px;    /* 실측 6px — 쿠폰 띠·썸네일 */
--radius-lg: 8px;    /* 실측 8px — 가게 카드 */
--radius-xl: 16px;   /* 실측 1rem — 바텀시트 윗모서리 */
--radius-full: 9999px; /* 검색창·버튼 알약 */

로고 스퀘어클은 113×40 뷰박스의 노란 칸(41×40)에 반경 약 11.5 — 한 변의 28% 정도다(실측).

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,.04);        /* 실측 rgba(0,0,0,.04) — 목록 카드 */
--shadow-md: 0 2px 8px rgba(17,25,37,.06);     /* 실측 rgba(17,25,37,.06) — 떠 있는 버튼 */
--shadow-lg: 0 4px 16px rgba(0,0,0,.08);       /* 실측 rgba(0,0,0,.08) — 팝오버 */
--shadow-xl: 0 -8px 24px rgba(0,0,0,.1);       /* 바텀시트·장바구니 바 (추정) */

Iconography

스타일: 혼합 — 서비스 격자는 색 면 위 흰 글리프(Filled), 상단 도구·탭바는 선 아이콘(Outline)
Stroke 굵기: 약 2px (24 기준, 추정)
모서리 처리: Round
추천 라이브러리: Lucide(선 아이콘). 서비스 격자는 브랜드 자체 컬러 아이콘이라 라이브러리로 대체되지 않는다. 배달 쪽 캥거루 머리는 공식 로고 파일만 쓴다

Component Guide

컴포넌트 가이드 (상태별 CSS)

Button — 노랑 위에는 먹색 글자

.mt-btn {
  font: 600 15px/1 "PingFang SC", "Microsoft YaHei", sans-serif;
  height: 44px; padding: 0 20px; border-radius: var(--radius-full);
  border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out);
}
.mt-btn--primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.mt-btn--primary:hover { background: var(--color-primary-400); }
.mt-btn--primary:active { background: var(--color-primary-600); }
.mt-btn--primary:disabled { background: var(--color-primary-100); color: var(--text-disabled); cursor: not-allowed; }
.mt-btn--primary[aria-busy="true"] { color: transparent; position: relative; }
.mt-btn--primary[aria-busy="true"]::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(17,25,37,.2); border-top-color: var(--text-primary);
  animation: mt-spin .8s linear infinite;
}
@keyframes mt-spin { to { transform: rotate(360deg); } }

.mt-btn--secondary { background: var(--color-neutral-900); color: var(--color-primary-500); } /* 검색창 「搜索」 */
.mt-btn--secondary:hover { background: #2A3240; }
.mt-btn--secondary:active { background: #000000; }
.mt-btn--secondary:disabled { background: var(--color-neutral-200); color: var(--text-disabled); }

.mt-btn--ghost { background: var(--bg-elevated); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-default); }
.mt-btn--ghost:hover { background: var(--bg-subtle); }
.mt-btn--ghost:active { background: var(--color-neutral-100); }
.mt-btn--ghost:disabled { color: var(--text-disabled); }

.mt-btn--danger { background: var(--color-secondary-500); color: #FFFFFF; }  /* 「立即抢」 할인 (추정) */
.mt-btn--danger:hover { background: #FF6A45; }
.mt-btn--danger:active { background: #E0330F; }
.mt-btn--danger:disabled { background: #FFD0C4; }

Input — 먹색 테 + 안쪽 알약 버튼 검색창

.mt-search {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 3px 0 12px;
  background: var(--bg-elevated); border: 1.5px solid var(--border-strong); border-radius: var(--radius-full);
}
.mt-search input { flex: 1; border: 0; outline: 0; font: 14px "PingFang SC", sans-serif; color: var(--text-primary); background: transparent; }
.mt-search input::placeholder { color: var(--text-tertiary); }
.mt-search:focus-within { border-color: var(--color-primary-700); }
.mt-search.is-error { border-color: var(--color-error-fg); }
.mt-search.is-disabled { background: var(--bg-subtle); border-color: var(--border-default); }

Card — 가게 카드

.mt-card { background: var(--bg-elevated); border-radius: var(--radius-lg); padding: var(--space-md); display: flex; gap: 10px; }
.mt-card--featured { background: linear-gradient(180deg, var(--color-primary-50), #FFFFFF 40%); }
.mt-card--outlined { box-shadow: inset 0 0 0 1px var(--border-default); }
.mt-card__score { color: #FF6A00; font-weight: 700; }   /* 「4.8分」 (추정) */

Badge / Tag

.mt-tag { font-size: 10px; line-height: 16px; padding: 0 4px; border-radius: var(--radius-sm); }
.mt-tag--solid   { background: var(--color-primary-500); color: var(--text-on-primary); font-weight: 700; }  /* 「品牌」 */
.mt-tag--subtle  { background: var(--color-primary-100); color: var(--color-primary-900); }                  /* 「准时宝」 */
.mt-tag--outline { box-shadow: inset 0 0 0 .5px #FF8A65; color: var(--color-secondary-500); }             /* 「30减8」 */

Navigation — 하단 탭바

.mt-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); height: 52px; background: var(--bg-elevated); box-shadow: 0 -.5px 0 var(--border-default); }
.mt-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10px; color: var(--text-secondary); }
.mt-tabbar a[aria-current="page"] { color: var(--text-primary); font-weight: 600; }
.mt-tabbar a[aria-current="page"] svg { fill: var(--color-primary-500); stroke: var(--text-primary); }
/* 탭: 首页 · 视频 · 消息 · 购物车 · 我的 (추정) */

Motion

--duration-fast: 150ms;
--duration-base: 250ms;
--duration-slow: 400ms;
--ease-out: cubic-bezier(.25, .8, .3, 1);
--ease-in-out: cubic-bezier(.45, 0, .25, 1);

(추정) 쿠폰 받기·장바구니 담기처럼 짧고 튀는 반응이 많고, 페이지 전환은 기본 OS 전환을 따른다.

Anti-patterns

1. 노랑 위에 흰 글자 금지 — 2019년 개편 때 로고 글자를 흰색에서 검정으로 바꾼 이유다. 노랑 위 글자·아이콘은 먹색 #111925 2. 로고 노랑을 주황·금색으로 바꾸지 않는다 — #FFD100 하나. 그라디언트는 앱 머리 배경에만 쓰고 로고 자체에는 넣지 않는다 3. 파란 원 배경의 옛 로고(2019년 이전) 금지 — 현행은 노란 스퀘어클 + 검은 「美团」 4. 넓은 면을 빨강으로 칠하지 않는다 — 오렌지레드는 神券·가격·할인 태그 같은 좁은 자리 전용 5. 캥거루 마스코트를 새로 그리거나 전신으로 되돌리지 않는다 — 2021년 이후 배달 로고는 두 귀가 선 얼굴 하나

Meituan

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드 (상태별 CSS)

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처