McDonald's

레드 위 골든 아치 M + Speedee 워드마크의 밝고 즐거운 톤

서양소비자따뜻한modern-minimalhumanism고딕comfortableroundflat라이트공식한글 지원출시 2018개정 2023

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

Brand DNA

브랜드 DNA

브랜드명: McDonald's (맥도날드)
한 줄 정체성: 전 세계 120개국 35,000여 매장에서 같은 골든 아치로 즐거움과 친근함을 파는 글로벌 패스트푸드 대표 브랜드
공식 디자인 철학: "Lighthearted, welcoming, dependable, unpretentious, playful" — 밝고 즐겁고 꾸밈없는 톤. Turner Duckworth 리브랜드의 "Archery" 시스템(골든 아치를 크게·잘라·기울여·암시적으로 활용)과 "Flawesome"(완벽함보다 진짜다움) 원칙
시그니처 요소 1개: McDonald's Red(#DA291C) 배경 위 Golden Arches Yellow(#FFC72C) 아치 M + Speedee 워드마크. 다른 어떤 브랜드와도 헷갈리지 않는 노랑·빨강 조합

Tone & Mood

톤 & 무드

핵심 키워드 3개: 즐거움, 친근함, 대담함
무드 설명: 밝은 골든 옐로우가 주인공이고 레드가 강조·CTA를 맡는다. 절제된 2색 팔레트(gold-first)로 대담하게 밀어붙이되, 둥근 모서리와 친근한 Speedee 서체로 부담 없고 유쾌한 톤을 유지한다. 그림자를 거의 쓰지 않는 플랫한 면 구성.
비주얼 스타일: 모던 미니멀(절제된 2색·플랫) + 휴머니즘(친근·유쾌한 서체와 일러스트)
밀도(Density): Comfortable — 터치 타깃이 크고 여백이 넉넉한 키오스크·앱 톤
모서리 성향: Round (12~16px 카드, 버튼은 pill)
평면성: Flat — 색면과 라운드로 위계를 주고 그림자는 최소

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Golden Arches Yellow (PMS 123 C) */
  --color-primary-50:  #FFF8E6;
  --color-primary-100: #FFEEBF;
  --color-primary-200: #FFE08C;
  --color-primary-300: #FFD559;
  --color-primary-400: #FFCE40;
  --color-primary-500: #FFC72C;  /* Golden Arches Yellow */
  --color-primary-600: #E6A800;
  --color-primary-700: #B37F00;
  --color-primary-800: #805A00;
  --color-primary-900: #4D3600;

  /* Secondary - McDonald's Red (PMS 485 C) */
  --color-secondary-50:  #FDE7E5;
  --color-secondary-100: #F9BEB9;
  --color-secondary-200: #F28A80;
  --color-secondary-300: #EA5647;
  --color-secondary-400: #E23E2E;
  --color-secondary-500: #DA291C;  /* McDonald's Red */
  --color-secondary-600: #B71F14;
  --color-secondary-700: #8F160D;
  --color-secondary-800: #660F08;
  --color-secondary-900: #3D0904;

  /* Neutral - warm charcoal (McDonald's Black 기반) */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FAF9F7;
  --color-neutral-100:  #F2F0ED;
  --color-neutral-200:  #E4E1DC;
  --color-neutral-300:  #C9C5BE;
  --color-neutral-500:  #918C82;
  --color-neutral-700:  #5A554D;
  --color-neutral-800:  #3A3733;
  --color-neutral-900:  #27251F;   /* McDonald's Black */
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E7F3E4;
  --color-success-fg: #2E7D32;
  --color-warning-bg: #FFF3D6;
  --color-warning-fg: #B37F00;
  --color-error-bg:   #FDE7E5;
  --color-error-fg:   #DA291C;   /* 브랜드 레드와 동일 계열 */
  --color-info-bg:    #E3EEF7;
  --color-info-fg:    #1565C0;

  /* Surface */
  --bg-base:     #FFFFFF;         /* 페이지 기본 */
  --bg-subtle:   #FAF9F7;         /* 섹션 구분 */
  --bg-elevated: #FFFFFF;         /* 카드 */
  --bg-overlay:  rgba(39,37,31,0.55);  /* 모달/드롭다운 뒤 */

  /* Text */
  --text-primary:    #27251F;     /* 본문 */
  --text-secondary:  #5A554D;     /* 보조 */
  --text-tertiary:   #918C82;     /* 캡션 */
  --text-on-primary: #27251F;     /* 노랑 위는 검정 텍스트 (가독성) */
  --text-disabled:   #C9C5BE;

  /* Border */
  --border-default: #E4E1DC;
  --border-subtle:  #F2F0ED;
  --border-strong:  #C9C5BE;
  --border-focus:   #DA291C;
}

Typography

타이포그래피

폰트 페어링:
- 영문: Speedee (McDonald's 자체 · Dalton Maag 제작, Bold/Regular/Light 3웨이트 · Full width/Condensed) — 폴백 Inter, "Helvetica Neue", Arial
- 한글: Pretendard (OFL) / Noto Sans KR — Speedee의 둥글고 친근한 산세리프 톤과 호환
- 숫자·가격: Speedee Bold (강한 무게로 주목)
위계 (Speedee 산세리프, 대담한 무게 대비):
- Display: 56px / 800 / 1.05 / -0.02em
- H1: 40px / 800 / 1.1 / -0.015em
- H2: 28px / 700 / 1.2 / -0.01em
- H3: 20px / 700 / 1.3 / -0.005em
- Body Large: 18px / 400 / 1.55 / 0
- Body: 16px / 400 / 1.5 / 0
- Body Small: 14px / 400 / 1.45 / 0
- Caption: 12px / 700 / 1.35 / 0.02em

Spacing

스페이싱

Base unit: 4px (8pt grid)
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; ``
Container: max-width 1200px, 좌우 패딩 16px (mobile) / 40px (desktop)

Border Radius

--radius-none: 0;
--radius-sm: 6px;
--radius-md: 12px;     /* 인풋, 작은 카드 */
--radius-lg: 16px;     /* 메뉴 카드 시그니처 */
--radius-xl: 24px;     /* 모달, 큰 프로모 배너 */
--radius-full: 9999px; /* 버튼·태그 pill */

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(39,37,31,0.06);    /* 카드 기본 (거의 안 씀) */
--shadow-md: 0 4px 12px rgba(39,37,31,0.10);   /* 카드 hover */
--shadow-lg: 0 12px 28px rgba(39,37,31,0.16);  /* 드롭다운/팝오버 */
--shadow-xl: 0 24px 48px rgba(39,37,31,0.22);  /* 모달/풀스크린 dialog */

Iconography

스타일: Filled + 플랫 일러스트 (메뉴 아이콘은 "Flawesome" 손맛 있는 플랫 이미지)
Stroke 굵기: UI 아이콘은 2px outline / 메뉴는 filled
모서리 처리: Round (친근한 곡선)
추천 라이브러리: Phosphor (Fill) / Lucide

Component Guide

컴포넌트 가이드

Button

.btn {
  font: 700 15px/1 'Speedee', Inter, 'Pretendard', sans-serif;
  border-radius: var(--radius-full);
  padding: 12px 22px;
  border: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}
.btn:active { transform: translateY(1px); }
/* Primary = 골든 옐로우 (검정 텍스트) */
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-400); }
.btn-primary:active { background: var(--color-primary-600); }
.btn-primary:disabled { background: var(--color-neutral-200); color: var(--text-disabled); cursor: not-allowed; }
.btn-primary.is-loading { color: transparent; background: var(--color-primary-600); }
/* Secondary = 아웃라인 */
.btn-secondary { background: var(--bg-base); color: var(--text-primary); border: 2px solid var(--border-strong); }
.btn-secondary:hover { background: var(--bg-subtle); border-color: var(--text-primary); }
/* Ghost */
.btn-ghost { background: transparent; color: var(--color-secondary-500); }
.btn-ghost:hover { background: var(--color-secondary-50); }
/* Danger = 브랜드 레드 (주문 취소 등) */
.btn-danger { background: var(--color-secondary-500); color: #fff; }
.btn-danger:hover { background: var(--color-secondary-600); }

Input

.input {
  width: 100%;
  background: var(--bg-base);
  border: 2px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font: 400 16px/1.4 'Speedee', Inter, sans-serif;
  color: var(--text-primary);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.input::placeholder { color: var(--text-tertiary); }
.input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(218,41,28,0.15); }
.input.is-error { border-color: var(--color-error-fg); }
.input:disabled { background: var(--bg-subtle); color: var(--text-disabled); cursor: not-allowed; }

Card

.card { background: var(--bg-elevated); border-radius: var(--radius-lg); padding: 16px; border: 1px solid var(--border-subtle); }
.card-elevated { box-shadow: var(--shadow-sm); border: 0; transition: box-shadow 150ms ease, transform 150ms ease; }
.card-elevated:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-outlined { box-shadow: none; border: 2px solid var(--border-default); }
/* 메뉴 카드 시그니처: 골든 옐로우 이미지 영역 + 굵은 가격 */
.menu-card .photo { aspect-ratio: 1.2; border-radius: var(--radius-md); background: radial-gradient(circle at 50% 35%, var(--color-primary-300), var(--color-primary-500)); display: grid; place-items: center; }
.menu-card h3 { font: 700 16px/1.3 'Speedee', sans-serif; margin: 10px 0 4px; }
.menu-card .price { font: 800 16px/1 'Speedee', sans-serif; color: var(--color-secondary-500); }

Badge / Tag

.tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-full); font: 700 12px/1.4 'Speedee', Inter, sans-serif; letter-spacing: 0.02em; }
.tag-solid   { background: var(--color-secondary-500); color: #fff; }       /* 신메뉴·핫딜 */
.tag-subtle  { background: var(--color-primary-100); color: var(--color-primary-900); }
.tag-outline { border: 1.5px solid var(--border-strong); color: var(--text-primary); }
.tag-new     { background: var(--color-primary-500); color: var(--text-on-primary); }

Navigation (Top bar)

.topnav { display: flex; align-items: center; gap: 20px; padding: 12px 40px; background: var(--color-secondary-500); }
.topnav .brand { display: flex; align-items: center; gap: 8px; color: #fff; font: 800 20px/1 'Speedee', sans-serif; }
.topnav .brand .arch { width: 26px; height: 22px; }         /* 골든 아치 SVG (fill:#FFC72C) */
.topnav a { color: #fff; font: 700 14px/1 'Speedee', sans-serif; text-decoration: none; opacity: 0.9; }
.topnav a:hover { opacity: 1; text-decoration: underline; }
.topnav .cta { margin-left: auto; background: var(--color-primary-500); color: var(--text-on-primary); padding: 9px 18px; border-radius: var(--radius-full); font-weight: 800; }

Motion

--duration-fast: 120ms;
--duration-base: 220ms;
--duration-slow: 400ms;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* 경쾌한 도착 */
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* 부드러운 전환 */

Anti-patterns

1. 노랑(#FFC72C) 배경 위에 흰 텍스트 사용 금지 — 대비 부족. 노랑 위는 반드시 검정(#27251F) 텍스트 2. 골든 아치 M을 회전·왜곡·기울여 비율 변형 금지 — Archery 시스템은 크롭/스케일만 허용, 형태 자체는 불변 3. 브랜드 팔레트에 파랑·보라 등 제3의 강조색 추가 금지 — gold-first 2색(노랑·빨강) 규율 유지 4. 레드를 넓은 배경 면 전체에 남발 금지 — 레드는 CTA·강조·헤더 밴드에 절제해 쓰고 주면적은 화이트/골드 5. 카드·버튼을 각진 sharp(0~2px)로 처리 금지 — 친근한 라운드(카드 16px, 버튼 pill)가 시그니처

McDonald's

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처