Grab

PMS 355C 그랩 그린 헤더와 한 화면에 모인 슈퍼앱 서비스 타일 격자

아시아모빌리티식품핀테크차가운modern-minimalhumanism고딕comfortablesoftsubtle라이트한글 지원출시 2023개정 2025

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

Brand DNA

브랜드 DNA

브랜드명: Grab (그랩)
한 줄 정체성: 차량 호출·음식 배달·장보기·택배·결제·금융을 한 앱에 모은 동남아시아 8개국의 대표 슈퍼앱.
공식 디자인 철학: 공개 디자인 시스템 사이트는 없다. 사내 디자인 시스템 Duxton(싱가포르 덕스턴 거리에서 따온 이름)이 2023년 말 기본 시스템이 됐고, 2025년 하반기 소비자 앱의 약 50%가 Duxton 컴포넌트로 만들어졌다. 색·모서리·아이콘 같은 속성을 나라·서비스별로 바꿀 수 있게 열어 두면서도 전체 일관성은 지키는 「하이퍼로컬 유연성 + 조직 일관성」이 설계 원칙이다. 브랜드 센터는 로고를 PMS 355C 단일 녹색으로만 쓰고, 밝은 배경엔 녹색 로고·어두운 배경엔 흰 로고를 쓰라고 정한다.
시그니처 요소 1개: 화면 윗부분을 꽉 채우는 그랩 그린(#00B14F) 헤더와, 그 아래 연녹색 타일 안에 서비스 아이콘을 4열로 늘어놓은 슈퍼앱 서비스 격자.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 활기찬 · 친근한 · 실용적
무드 설명: 채도 높은 한 가지 녹색이 거의 모든 강조를 맡고, 나머지는 흰 바탕과 옅은 회색 면으로 조용히 정리한다. 서비스 아이콘은 둥글고 통통한 채움형이라 동네 가게처럼 편안하며, 할인·포인트 배너만 짙은 녹색과 노랑·주황 일러스트로 분위기를 띄운다. 기술 회사보다 「매일 쓰는 생활 도구」에 가까운 인상이다.
비주얼 스타일: 모던 미니멀 + 휴머니즘
밀도(Density): Comfortable — 한 화면에 서비스 8개·잔액·배너를 모두 담아야 해서 여백은 넉넉하지 않지만, 터치 타일은 최소 44px 을 지킨다.
모서리 성향: Soft(8px) — 버튼·입력·카드 모두 8px 안팎, 큰 시트만 12~16px.
평면성: Subtle — 카드는 아주 옅은 그림자 한 겹, 테두리는 거의 쓰지 않는다.

Color System

컬러 시스템 (CSS 변수)

> 대표색 #00B14F 는 브랜드 센터의 PMS 355C 와 공개 로고 자료의 hex 로 교차 확인했다. 나머지 단계와 중성색은 제품 화면 관찰값이며 (추정)이다. 앱 기본 테마는 라이트다. 기사용 Grab Driver 앱에는 다크 모드가 있지만 소비자 앱의 공식 다크 토글은 확인하지 못해 여기서는 라이트 단일로 문서화한다.

:root {
  /* Primary - Grab Green 9단계 (500 = PMS 355C) */
  --color-primary-50:  #E5F7ED;  /* 서비스 타일 배경, 선택 칩 면 */
  --color-primary-100: #C2EDD4;  /* 호버 면, 진행 막대 트랙 (추정) */
  --color-primary-200: #8FDFB1;  /* 짙은 배너 위 보조 글자 (추정) */
  --color-primary-300: #52CD87;  /* 비활성 녹색 버튼 (추정) */
  --color-primary-400: #1FBE66;  /* 호버 하이라이트 (추정) */
  --color-primary-500: #00B14F;  /* 기본 — 헤더·주 버튼·로고 */
  --color-primary-600: #009E47;  /* 버튼 hover (추정) */
  --color-primary-700: #00873D;  /* 버튼 pressed, 링크 글자 (추정) */
  --color-primary-800: #006C31;  /* 강조 텍스트 (추정) */
  --color-primary-900: #005339;  /* 프로모션 배너 딥 그린 (추정) */

  /* Secondary - 프로모션 포인트 (배너·포인트 아이콘 전용) */
  --color-secondary-500: #FFD84D;  /* 포인트 코인·일러스트 노랑 (추정) */

  /* Neutral */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F7F7F7;  /* 홈 배경 */
  --color-neutral-100:  #F2F2F2;  /* 입력 면, 비활성 타일 */
  --color-neutral-300:  #DBDBDB;  /* 구분선 */
  --color-neutral-500:  #9A9A9A;  /* 비활성 글자 */
  --color-neutral-700:  #6E6E6E;  /* 보조 글자 */
  --color-neutral-900:  #1C1C1C;  /* 본문 */
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E5F7ED;
  --color-success-fg: #00873D;
  --color-warning-bg: #FFF6DB;
  --color-warning-fg: #9A6A00;
  --color-error-bg:   #FDECEA;
  --color-error-fg:   #D93A2B;
  --color-info-bg:    #E8F1FD;
  --color-info-fg:    #1A6ED8;

  /* Surface */
  --bg-base:     #F7F7F7;          /* 홈·목록 배경 */
  --bg-subtle:   #F2F2F2;          /* 섹션 구분·검색창 안쪽 */
  --bg-elevated: #FFFFFF;          /* 카드·서비스 격자 시트 */
  --bg-overlay:  rgba(28,28,28,0.56); /* 바텀시트 딤 */

  /* Text */
  --text-primary:    #1C1C1C;
  --text-secondary:  #6E6E6E;
  --text-tertiary:   #9A9A9A;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #BDBDBD;

  /* Border */
  --border-default: #E5E5E5;
  --border-subtle:  #F0F0F0;
  --border-strong:  #BDBDBD;
  --border-focus:   #00B14F;
}

Typography

타이포그래피

폰트 페어링:
- 한글: Pretendard (SIL OFL) — 그랩은 한국 서비스가 없어 공식 한글 서체가 없다. 둥근 산세리프 인상에 가장 가까운 폴백.
- 영문: Grab Community (그랩 전용 서체, 비공개 라이선스, 추정) — 앱 내부 글꼴은 공개 문서로 확인되지 않았다. 대체는 Inter 또는 시스템 산세리프.
- 로고는 기울어진 「a」가 특징인 전용 레터링이며 본문 서체로 쓰지 않는다.
위계 (font-size / font-weight / line-height / letter-spacing, 추정):
- Display: 32px / 800 / 1.2 / -0.02em — 프로모션 배너 큰 문구
- H1: 24px / 700 / 1.25 / -0.01em — 화면 제목
- H2: 20px / 700 / 1.3 / -0.01em — 섹션 제목(「오늘의 혜택」)
- H3: 16px / 700 / 1.35 / 0 — 카드 제목, 가게 이름
- Body Large: 16px / 400 / 1.5 / 0
- Body: 14px / 400 / 1.5 / 0
- Body Small: 12px / 400 / 1.45 / 0 — 배달 시간·거리
- Caption: 11px / 600 / 1.3 / 0 — 서비스 타일 라벨

Spacing

스페이싱

Base unit: 4px
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; ``
Container: 모바일 좌우 16px. 웹은 max-width 1200px, 좌우 24px (추정).

Border Radius

--radius-none: 0;
--radius-sm: 4px;     /* 배지·작은 태그 */
--radius-md: 8px;     /* 버튼·입력·검색창 */
--radius-lg: 12px;    /* 카드·서비스 격자 시트·아이콘 타일(10~12px) */
--radius-xl: 16px;    /* 바텀시트 윗모서리 */
--radius-full: 9999px; /* 아바타·포인트 칩 */

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 4px rgba(0,0,0,0.05);   /* 기본 카드 */
--shadow-md: 0 2px 10px rgba(0,0,0,0.08);  /* 헤더 위로 겹치는 서비스 격자 시트 */
--shadow-lg: 0 8px 24px rgba(0,0,0,0.12);  /* 바텀시트·드롭다운 */
--shadow-xl: 0 16px 40px rgba(0,0,0,0.18); /* 전면 모달 */

Iconography

스타일: 서비스 아이콘은 Filled(통통한 채움형 + 흰 디테일), 내비·유틸 아이콘은 Outline 혼합
Stroke 굵기: 2px 안팎(24px 격자 기준)
모서리 처리: Round — 끝점·꺾임 모두 둥글게
추천 라이브러리: Phosphor(Fill·Regular 두 굵기를 오가기 쉬움). 단순 유틸은 Lucide.

Component Guide

컴포넌트 가이드

Button

.gb-btn { height: 48px; padding: 0 var(--space-lg); border-radius: var(--radius-md); font: 700 16px/1 inherit; border: 0; cursor: pointer; transition: background var(--duration-fast) var(--ease-out); }
.gb-btn--primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.gb-btn--primary:hover { background: var(--color-primary-600); }
.gb-btn--primary:active { background: var(--color-primary-700); }
.gb-btn--primary:disabled { background: var(--color-neutral-100); color: var(--text-disabled); cursor: not-allowed; }
.gb-btn--primary.is-loading { color: transparent; position: relative; }
.gb-btn--primary.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: gb-spin .7s linear infinite; }
.gb-btn--secondary { background: var(--color-primary-50); color: var(--color-primary-700); }
.gb-btn--secondary:hover { background: var(--color-primary-100); }
.gb-btn--secondary:active { background: var(--color-primary-200); }
.gb-btn--secondary:disabled { background: var(--color-neutral-100); color: var(--text-disabled); }
.gb-btn--ghost { background: transparent; color: var(--color-primary-700); }
.gb-btn--ghost:hover { background: var(--bg-subtle); }
.gb-btn--ghost:active { background: var(--color-neutral-100); }
.gb-btn--ghost:disabled { color: var(--text-disabled); }
.gb-btn--danger { background: var(--color-error-fg); color: #fff; }
.gb-btn--danger:hover { background: #BF2F22; }
.gb-btn--danger:active { background: #A2271C; }
.gb-btn--danger:disabled { background: var(--color-neutral-100); color: var(--text-disabled); }
@keyframes gb-spin { to { transform: rotate(360deg); } }

Input

.gb-input { height: 48px; padding: 0 var(--space-md); border-radius: var(--radius-md); background: var(--bg-subtle); border: 1.5px solid transparent; color: var(--text-primary); font-size: 16px; }
.gb-input:focus { outline: none; background: var(--bg-elevated); border-color: var(--border-focus); }
.gb-input.is-error { border-color: var(--color-error-fg); background: var(--color-error-bg); }
.gb-input:disabled { color: var(--text-disabled); background: var(--color-neutral-100); }

Card

.gb-card { background: var(--bg-elevated); border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: var(--shadow-sm); }
.gb-card--promo { background: var(--color-primary-900); color: #fff; }       /* 강조형: 딥 그린 프로모션 */
.gb-card--outlined { box-shadow: none; border: 1px solid var(--border-default); }

Badge / Tag

.gb-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--radius-sm); font: 700 11px/1 inherit; }
.gb-badge--solid { background: var(--color-primary-500); color: #fff; }          /* 「프로모」 */
.gb-badge--subtle { background: var(--color-primary-50); color: var(--color-primary-700); } /* 「무료 배달」 */
.gb-badge--outline { border: 1px solid var(--border-strong); color: var(--text-secondary); }

Navigation (하단 탭바)

.gb-tabbar { height: 60px; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--bg-elevated); border-top: 1px solid var(--border-subtle); }
.gb-tab { display: grid; place-items: center; gap: 2px; font-size: 10px; color: var(--text-tertiary); }
.gb-tab.is-active { color: var(--color-primary-500); font-weight: 700; }

Motion

--duration-fast: 120ms;   /* 버튼 눌림, 타일 탭 */
--duration-base: 240ms;   /* 카드 전환, 칩 선택 */
--duration-slow: 360ms;   /* 바텀시트 올라옴 */
--ease-out: cubic-bezier(0.2, 0, 0, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

Anti-patterns

1. 로고를 PMS 355C 녹색·흰색 이외의 색으로 칠하거나, 어두운 배경 위에 녹색 로고를 올리지 않는다. 2. 그랩 그린 옆에 다른 원색 녹색(형광·민트)을 섞어 브랜드 녹색을 흐리지 않는다. 3. 서비스 아이콘을 가는 선형 아이콘으로 바꿔 격자의 무게감을 없애지 않는다 — 타일은 채움형이 기준이다. 4. 흰 카드에 테두리와 진한 그림자를 겹쳐 쓰지 않는다. 카드는 옅은 그림자 한 겹이다. 5. 본문 긴 글을 녹색으로 쓰지 않는다. 녹색 글자는 링크·가격 할인·포인트처럼 짧은 강조에만 쓴다.

Grab

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

출처