Yogiyo (요기요)

레드핑크 프로모션과 먹음직스러운 메뉴 카드

한국소비자이커머스따뜻한modern-minimal고딕comfortableroundsubtle라이트한글 지원출시 2012개정 2024

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

Brand DNA

브랜드 DNA

브랜드명: Yogiyo (요기요)
한 줄 정체성: 음식 배달부터 포장, 한 끼 주문까지 빠르게 연결하는 한국의 생활 밀착형 주문 플랫폼
공식 디자인 철학: “여기, 요기요”라는 이름처럼 가까운 맛집과 원하는 메뉴를 쉽고 즉시 발견하게 한다.
시그니처 요소 1개: 요기요 레드핑크(#FA0050)를 넓게 쓴 프로모션 면과 둥근 음식·혜택 카드의 대비

Tone & Mood

톤 & 무드

핵심 키워드 3개: 식욕, 활기, 즉시
무드 설명: 선명한 레드핑크로 혜택과 핵심 행동을 빠르게 인지시키고, 흰색 화면과 옅은 핑크 보조 면으로 복잡한 주문 정보를 정돈한다. 음식 비주얼은 따뜻하고 먹음직스러운 색을 유지하며 정보는 짧고 굵게 제시한다.
비주얼 스타일: 모던 미니멀
밀도(Density): Comfortable — 메뉴 탐색에 필요한 정보량을 유지하면서 카드 사이 간격을 충분히 둔다.
모서리 성향: Round(12~16px) — 배너와 상품 카드의 기본값
평면성: Subtle — 얇은 테두리와 낮은 그림자로 카드 위계를 구분

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary — Yogiyo Red-Pink */
  --color-primary-50: #FFF1F5;
  --color-primary-100: #FFD0DD;
  --color-primary-200: #FFA5BD;
  --color-primary-300: #FF6F92;
  --color-primary-400: #FF3D75;
  --color-primary-500: #FA0050; /* 핵심 CTA와 프로모션 */
  --color-primary-600: #D60044; /* hover */
  --color-primary-700: #A60035; /* active와 강조 텍스트 */
  --color-primary-800: #770026;
  --color-primary-900: #470017;

  /* Secondary — 픽업·완료 상태 */
  --color-secondary-500: #1FAA59;

  /* Neutral */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #FAFAFB;
  --color-neutral-100: #F5F6F8;
  --color-neutral-200: #F0F1F3;
  --color-neutral-300: #DDDFE2;
  --color-neutral-500: #9CA0A6;
  --color-neutral-700: #7C7C82;
  --color-neutral-800: #4A4A52;
  --color-neutral-900: #1A1A1A;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E8F8EE;
  --color-success-fg: #1FAA59;
  --color-warning-bg: #FFF6E0;
  --color-warning-fg: #C98200;
  --color-error-bg: #FFE8EC;
  --color-error-fg: #D92D45;
  --color-info-bg: #E8F0FE;
  --color-info-fg: #3478F6;

  /* Surface */
  --bg-base: #FFFFFF;
  --bg-subtle: #FAFAFB;
  --bg-elevated: #FFFFFF;
  --bg-overlay: rgba(26, 26, 26, 0.55);

  /* Text */
  --text-primary: #1A1A1A;
  --text-secondary: #4A4A52;
  --text-tertiary: #7C7C82;
  --text-on-primary: #FFFFFF;
  --text-disabled: #9CA0A6;

  /* Border */
  --border-default: #F0F1F3;
  --border-subtle: #F5F6F8;
  --border-strong: #DDDFE2;
  --border-focus: #FA0050;
}

Typography

타이포그래피

폰트 페어링:
- 한글: Pretendard (OFL)
- 영문: Pretendard / SF Pro / Roboto (시스템 폴백)
위계:
- Display: 28px / 900 / 1.20 / -0.025em
- H1: 22px / 800 / 1.30 / -0.020em
- H2: 17px / 800 / 1.35 / -0.015em
- H3: 14px / 800 / 1.40 / -0.005em
- Body Large: 15px / 600 / 1.50 / -0.005em
- Body: 13px / 600 / 1.50 / 0
- Body Small: 11px / 700 / 1.45 / 0
- Caption: 11px / 700 / 1.40 / 0

Spacing

스페이싱

Base unit: 4px
토큰:

:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 40px;
  --space-3xl: 64px;
}

Container: 모바일 우선 max-width: 480px, 좌우 패딩 14~16px

Border Radius

:root {
  --radius-none: 0;
  --radius-sm: 6px;    /* 작은 태그 */
  --radius-md: 10px;   /* 입력과 썸네일 */
  --radius-lg: 14px;   /* 기본 카드 */
  --radius-xl: 20px;   /* 프로모션 배너 */
  --radius-full: 9999px; /* 배지와 원형 버튼 */
}

Shadow / Elevation

:root {
  --shadow-none: none;
  --shadow-sm: 0 1px 3px rgba(26, 26, 26, 0.05);   /* 기본 카드 */
  --shadow-md: 0 5px 16px rgba(26, 26, 26, 0.09);  /* 떠 있는 컨트롤 */
  --shadow-lg: 0 14px 34px rgba(26, 26, 26, 0.16); /* 모달 */
  --shadow-xl: 0 22px 50px rgba(26, 26, 26, 0.22); /* 전체 화면 대화상자 */
  --shadow-cta: 0 8px 20px rgba(250, 0, 80, 0.28);
}

Iconography

스타일: Filled(카테고리·상태) + Outline(검색·알림·탐색 액션)
Stroke 굵기: 2px
모서리 처리: Round
추천 라이브러리: Phosphor Icons 또는 Material Symbols Rounded

Component Guide

컴포넌트 가이드

Button

.btn {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 800 13px/1 Pretendard, sans-serif; cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), transform 80ms ease, opacity var(--duration-fast) ease;
}
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-600); }
.btn-primary:active { background: var(--color-primary-700); transform: scale(0.98); }
.btn-secondary { background: var(--color-primary-50); color: var(--color-primary-700); }
.btn-secondary:hover { background: var(--color-primary-100); }
.btn-ghost { background: transparent; color: var(--color-primary-500); }
.btn-ghost:hover { background: var(--color-primary-50); }
.btn-danger { background: var(--color-error-fg); color: #FFFFFF; }
.btn:disabled, .btn.is-loading { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn.is-loading::before { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: yg-spin 700ms linear infinite; }

Input

.input {
  min-height: 44px; padding: 0 14px; border: 1px solid var(--border-default);
  border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--text-primary);
  font: 600 14px/1.4 inherit; outline: none;
}
.input:hover { border-color: var(--border-strong); }
.input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--color-primary-50); background: var(--bg-base); }
.input[aria-invalid="true"] { border-color: var(--color-error-fg); box-shadow: 0 0 0 3px var(--color-error-bg); }
.input:disabled { background: var(--color-neutral-100); color: var(--text-disabled); cursor: not-allowed; }

Card

.card { background: var(--bg-elevated); border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: var(--shadow-sm); }
.card-emphasis { background: var(--color-primary-50); border: 1px solid var(--color-primary-100); }
.card-outlined { box-shadow: none; border: 1px solid var(--border-default); }
.card:hover { border-color: var(--color-primary-100); box-shadow: var(--shadow-md); }

Badge / Tag

.tag { padding: 4px 8px; border-radius: var(--radius-full); font: 800 11px/1.2 inherit; display: inline-flex; }
.tag-solid { background: var(--color-primary-500); color: #FFFFFF; }
.tag-subtle { background: var(--color-primary-50); color: var(--color-primary-700); }
.tag-outline { background: transparent; color: var(--color-primary-500); border: 1px solid var(--color-primary-200); }

Navigation

.tabbar { background: var(--bg-elevated); border-top: 1px solid var(--border-default); display: grid; grid-template-columns: repeat(5, 1fr); padding: 5px 0 max(5px, env(safe-area-inset-bottom)); }
.tabbar-item { min-height: 42px; display: grid; place-items: center; color: var(--text-tertiary); font: 700 11px/1.2 inherit; }
.tabbar-item:hover { color: var(--text-secondary); }
.tabbar-item.is-active { color: var(--color-primary-500); }

Motion

:root {
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}
@keyframes yg-spin { to { transform: rotate(360deg); } }

Anti-patterns

1. 레드핑크와 경쟁하는 고채도 원색을 넓은 면적에 함께 사용하지 않는다. 2. 모든 카드와 버튼을 핑크로 채우지 않는다. 레드핑크는 혜택과 핵심 행동에 집중한다. 3. 음식 이미지를 저채도·흑백으로 처리하지 않는다. 따뜻하고 자연스러운 식욕 색을 유지한다. 4. 가게명, 배달 시간, 할인 정보를 동일한 굵기와 색으로 평면화하지 않는다. 5. 모바일 주문 화면에서 44px보다 작은 핵심 터치 영역이나 10px 미만의 본문을 사용하지 않는다.

Yogiyo (요기요)

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

출처