Deliveroo

민트빛 틸(#00CCBC) 액션과 6° 기울어진 Stratos 헤드라인의 전진하는 배달 톤

서양식품소비자차가운modern-minimalhumanism고딕comfortablesoftsubtle라이트공식한글 지원출시 2016개정 2024

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

Brand DNA

브랜드 DNA

브랜드명: Deliveroo (딜리버루)
한 줄 정체성: 영국 런던에서 출발한 음식·장보기 배달 플랫폼 — 동네 레스토랑을 문 앞까지 빠르게 잇는다
공식 디자인 철학: 2016년 DesignStudio 리브랜드의 "앞으로 달려 나가는 캥거루(Roo)" — 로고의 캥거루 코 각도(6°)를 서체와 레이아웃 전반의 전진감으로 확장. 사내 디자인 시스템(Platform Design System, PDS)은 2024년 WCAG 2.1 AA 기준으로 디지털 색 체계를 재정비했다(역할 기반 background.{role} ↔ foreground.on.{role} 짝 구조)
시그니처 요소 1개: 민트빛 틸 #00CCBC(토큰명 Seaweed) 단일 액션 컬러 + 6° 기울어진 Stratos 헤드라인

Tone & Mood

톤 & 무드

핵심 키워드 3개: 경쾌함, 전진감, 청량함
무드 설명: 흰 캔버스 위에 큰 음식 사진과 틸 액션 버튼 하나가 또렷하게 선다. 헤드라인은 Stratos 를 살짝 기울여 달리는 캥거루처럼 앞으로 쏠리는 느낌을 주고, 본문과 UI 는 시스템 산세리프로 가볍고 빠르게 읽힌다. 2024 개편 이후 틸 면 위 글자는 흰색 대신 짙은 틸 잉크를 써서 대비를 확보한다.
비주얼 스타일: 모던 미니멀 + 휴머니즘 (음식 사진·카테고리 일러스트)
밀도(Density): Comfortable — 레스토랑 카드는 사진을 크게, 메타 정보는 한두 줄로 여유 있게
모서리 성향: Soft (4~8px) — 카드·버튼·검색창 모두 작은 반경, 과한 알약형 없음
평면성: Subtle — 카드에 얇은 그림자 한 겹, 나머지는 평면

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Deliveroo Teal (Seaweed) */
  --color-primary-50:  #E6FAF8;  /* 선택 칩·옅은 강조 면 */
  --color-primary-100: #C0F2EE;
  --color-primary-200: #8CE8E0;
  --color-primary-300: #4DDCD1;
  --color-primary-400: #1AD2C4;
  --color-primary-500: #00CCBC;  /* 기본 액션 (Seaweed) */
  --color-primary-600: #00B3A6;  /* hover · 흰 배경 위 링크 (추정) */
  --color-primary-700: #008F85;  /* 흰 배경 위 틸 텍스트 AA (추정) */
  --color-primary-800: #006B63;
  --color-primary-900: #003733;  /* 틸 면 위 글자 잉크 (추정) */

  /* Secondary - Plus 멤버십·프로모션 (추정) */
  --color-secondary-500: #440063; /* 제한적 프로모션 보라 (추정) */

  /* Neutral - 청록 기운이 도는 회색 (추정) */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F9FAFA;  /* 섹션 배경 */
  --color-neutral-100:  #F2F4F4;  /* 검색창·입력 배경 */
  --color-neutral-200:  #E2E4E4;  /* 구분선 */
  --color-neutral-300:  #CCCFCF;
  --color-neutral-500:  #828585;  /* 캡션 */
  --color-neutral-700:  #585C5C;  /* 보조 텍스트 */
  --color-neutral-900:  #2E3333;  /* 본문 (Anchovy, 추정) */
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E5F4E8;
  --color-success-fg: #2E8540;  /* 평점 「Excellent」 녹색 */
  --color-warning-bg: #FFF4DB;
  --color-warning-fg: #9A5B00;
  --color-error-bg:   #FDE8E6;
  --color-error-fg:   #C4281C;
  --color-info-bg:    #E6FAF8;
  --color-info-fg:    #006B63;

  /* Surface */
  --bg-base:     #FFFFFF;  /* 페이지 기본 */
  --bg-subtle:   #F9FAFA;  /* 섹션 구분 */
  --bg-elevated: #FFFFFF;  /* 카드 */
  --bg-overlay:  rgba(46,51,51,0.56); /* 모달 딤 */

  /* Text */
  --text-primary:    #2E3333;
  --text-secondary:  #585C5C;
  --text-tertiary:   #828585;
  --text-on-primary: #003733;  /* 2024 개편: 틸 위 흰 글자 대신 짙은 잉크 */
  --text-disabled:   #CCCFCF;

  /* Border */
  --border-default: #E2E4E4;
  --border-subtle:  #F2F4F4;
  --border-strong:  #CCCFCF;
  --border-focus:   #00B3A6;
}

Typography

타이포그래피

폰트 페어링:
- 영문 헤드라인: Stratos (Production Type, 딜리버루 전용 커스텀 — 상용 라이선스) → 대체: Inter Tight / 시스템 산세리프 + skewX(-6deg) 흉내
- 영문 UI·본문: 시스템 산세리프 (-apple-system / Roboto / Segoe UI) (추정)
- 한글: Pretendard (OFL) / Apple SD Gothic Neo — 공식 한글 가족 없음, 폴백 호환
위계 (font-size / font-weight / line-height / letter-spacing):
- Display: 48px / 800 / 1.05 / -0.02em (Stratos, 6° 기울임)
- H1: 32px / 800 / 1.12 / -0.015em (Stratos)
- H2: 22px / 700 / 1.25 / -0.01em (Stratos)
- H3: 17px / 700 / 1.3 / 0
- Body Large: 16px / 400 / 1.5 / 0
- Body: 14px / 400 / 1.45 / 0
- Body Small: 12px / 400 / 1.4 / 0
- Caption: 11px / 600 / 1.3 / 0.01em

Spacing

스페이싱

Base unit: 4px (8px 격자 우선)
토큰: ``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 1232px, 좌우 패딩 16px (모바일) / 24px (데스크톱) (추정)

Border Radius

--radius-none: 0;
--radius-sm: 4px;     /* 배지·ETA 라벨 */
--radius-md: 6px;     /* 버튼·입력 */
--radius-lg: 8px;     /* 카드·배너 */
--radius-xl: 16px;    /* 바텀시트 상단 */
--radius-full: 9999px; /* 아바타·dot 전용 */

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 4px rgba(0,0,0,0.12);   /* 레스토랑 카드 기본 */
--shadow-md: 0 4px 12px rgba(0,0,0,0.12);  /* 카드 hover · 드롭다운 */
--shadow-lg: 0 8px 24px rgba(0,0,0,0.16);  /* 모달 · 장바구니 패널 */
--shadow-xl: 0 -4px 24px rgba(0,0,0,0.18); /* 모바일 바텀시트 */

Iconography

스타일: Outline 기본 + 선택 상태 Filled, 음식 카테고리는 컬러 일러스트 썸네일
Stroke 굵기: 2px
모서리 처리: Round
추천 라이브러리: Lucide (UI) + 자체 카테고리 일러스트. 틸은 활성 아이콘에만

Component Guide

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

Button

.btn { font: 700 14px/1 -apple-system, 'Segoe UI', Roboto, 'Pretendard', sans-serif; height: 44px; padding: 0 20px; border-radius: var(--radius-md); border: 0; display: inline-flex; align-items: center; gap: 8px; transition: background var(--duration-fast) var(--ease-out); cursor: pointer; }
.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-100); color: var(--text-disabled); cursor: not-allowed; }
.btn-primary.is-loading { color: transparent; position: relative; }
.btn-primary.is-loading::after { content: ''; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--color-primary-900); border-right-color: transparent; animation: roo-spin 700ms linear infinite; }
.btn-secondary { background: var(--bg-base); color: var(--color-primary-700); box-shadow: inset 0 0 0 1px var(--border-default); }
.btn-secondary:hover { background: var(--color-primary-50); }
.btn-secondary:active { background: var(--color-primary-100); }
.btn-secondary:disabled { color: var(--text-disabled); }
.btn-ghost { background: transparent; color: var(--color-primary-700); }
.btn-ghost:hover { background: var(--color-primary-50); }
.btn-ghost:active { background: var(--color-primary-100); }
.btn-ghost:disabled { color: var(--text-disabled); }
.btn-danger { background: var(--color-error-fg); color: #FFFFFF; }
.btn-danger:hover { background: #A82017; }
.btn-danger:active { background: #8C1A12; }
.btn-danger:disabled { background: var(--color-neutral-100); color: var(--text-disabled); }
@keyframes roo-spin { to { transform: rotate(360deg); } }

Input

.input { height: 44px; padding: 0 14px; border-radius: var(--radius-md); background: var(--color-neutral-100); border: 1px solid transparent; color: var(--text-primary); font-size: 14px; }
.input::placeholder { color: var(--text-tertiary); }
.input:focus { outline: none; background: var(--bg-base); border-color: var(--border-focus); }
.input.is-error { background: var(--bg-base); border-color: var(--color-error-fg); }
.input:disabled { color: var(--text-disabled); cursor: not-allowed; }

Card (레스토랑 카드)

.card { background: var(--bg-elevated); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--duration-base) var(--ease-out); }
.card:hover { box-shadow: var(--shadow-md); }
.card-featured { background: var(--color-primary-500); color: var(--text-on-primary); box-shadow: none; }
.card-outlined { box-shadow: none; border: 1px solid var(--border-default); }

Badge / Tag

.tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 700; }
.tag-solid   { background: var(--color-primary-500); color: var(--text-on-primary); }
.tag-subtle  { background: var(--color-primary-50); color: var(--color-primary-800); }
.tag-outline { box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text-secondary); }
.tag-eta     { background: var(--bg-base); color: var(--text-primary); box-shadow: var(--shadow-sm); }

Navigation (상단 헤더)

.topnav { height: 72px; padding: 0 24px; display: flex; align-items: center; gap: 16px; background: var(--bg-base); border-bottom: 1px solid var(--border-default); }
.topnav .logo { color: var(--color-primary-500); display: flex; align-items: center; gap: 8px; }
.topnav .link { color: var(--text-primary); font-size: 14px; font-weight: 600; }
.topnav .link.is-active { color: var(--color-primary-700); }

Motion

--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 350ms;
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);

주문 추적의 라이더 이동, 장바구니 추가 같은 순간에만 움직임을 쓰고, 방향은 오른쪽(전진)으로 흐른다.

Anti-patterns

1. 밝은 틸(#00CCBC) 면 위에 흰 글자 금지 — 2024 개편에서 대비 미달로 폐기, 짙은 틸 잉크를 쓴다 2. 틸을 본문 텍스트·넓은 배경에 남발 금지 — 액션 버튼·Plus 배너·로고에만 3. 헤드라인을 뒤로(왼쪽으로) 기울이거나 6° 보다 과하게 눕히기 금지 — 기울기는 항상 전진 방향 6° 하나 4. 버튼을 완전한 알약형(pill)이나 과한 라운드로 만들기 금지 — 6px 안팎의 단정한 모서리 5. 음식 사진 위에 채도 높은 색 텍스트 overlay 금지 — ETA 같은 정보는 흰 라벨 칩에 담는다

Deliveroo

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

출처