Agoda

다섯 색 Agoji와 파란 검색 CTA가 이끄는 생동감 있는 여행 탐색

아시아모빌리티이커머스복합modern-minimalhumanism고딕compactsharpflat라이트한글 지원출시 2005개정 2023

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

Brand DNA

브랜드 DNA

브랜드명: Agoda
한 줄 정체성: 아시아·태평양 숙소에 강한 Booking Holdings 계열 디지털 여행 플랫폼 — 검색부터 할인 발견까지 빠르게 연결
공식 디자인 철학: "See the world for less" — 더 많은 사람이 합리적인 가격으로 여행을 발견하도록 돕는 명료하고 활기찬 경험
시그니처 요소 1개: 빨강·노랑·초록·보라·하늘색의 다섯 Agoji 원형과 멀티컬러 Agoda 워드마크

Tone & Mood

톤 & 무드

핵심 키워드 3개: 발견, 절약, 생동감
무드 설명: 흰 캔버스와 선명한 파란 검색 동작이 복잡한 예약 과정을 빠르게 정리한다. 회색 워드마크 아래의 다섯 색 원형과 Agoji는 여행의 다양성과 유쾌함을, 빨간 가격과 할인 배지는 절약의 즉시성을 담당한다.
비주얼 스타일: 모던 미니멀 + 휴머니즘
밀도(Density): Compact — 검색 결과에서 가격·평점·혜택을 한 번에 비교
모서리 성향: Sharp (2~4px) — 입력과 결과 카드의 정보형 인상을 유지
평면성: Flat — 얕은 검색 패널 그림자 외에는 선과 색으로 위계를 구분

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Agoda Action Blue (검색·링크·선택) */
  --color-primary-50:  #EEF5FF;
  --color-primary-100: #DCEAFF;
  --color-primary-200: #BBD6FE;
  --color-primary-300: #91BCFC;
  --color-primary-400: #6BA5FA;
  --color-primary-500: #5392F9;   /* 검색 CTA */
  --color-primary-600: #3778DD;
  --color-primary-700: #275DB5;
  --color-primary-800: #204B8C;
  --color-primary-900: #1D3F70;

  /* Secondary - Deal Red (가격·할인·긴급성) */
  --color-secondary-50:  #FEEAE8;
  --color-secondary-500: #E2231A;
  --color-secondary-600: #C81A12;

  /* Agoda 멀티컬러 아이덴티티 */
  --color-logo-red:    #FF2938;
  --color-logo-yellow: #FDB812;
  --color-logo-green:  #0DB14B;
  --color-logo-purple: #B01E8D;
  --color-logo-cyan:   #00A9DC;
  --color-logo-gray:   #585856;
  --color-tertiary-500: #FDB812;  /* 별점·딜 포인트 */

  /* Neutral */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FAFAFA;
  --color-neutral-100:  #F4F4F6;
  --color-neutral-200:  #E0E0E0;
  --color-neutral-300:  #C2C2C7;
  --color-neutral-500:  #6E6E73;
  --color-neutral-700:  #3A3A3D;
  --color-neutral-800:  #212121;
  --color-neutral-900:  #121212;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E5F5E6;
  --color-success-fg: #1F8A24;     /* 평점 8.0+ 그린 */
  --color-warning-bg: #FFF3D2;
  --color-warning-fg: #B07A00;
  --color-error-bg:   #FEE2E0;
  --color-error-fg:   #C81A12;
  --color-info-bg:    #EEF5FF;
  --color-info-fg:    #275DB5;

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

  /* Text */
  --text-primary:    #212121;
  --text-secondary:  #3A3A3D;
  --text-tertiary:   #6E6E73;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #C2C2C7;

  /* Border */
  --border-default: #E0E0E0;
  --border-subtle:  #F4F4F6;
  --border-strong:  #C2C2C7;
  --border-focus:   #5392F9;
}

Typography

타이포그래피

폰트 페어링:
- 로고: 전용 Agoda Custom (공식 커스텀 서체, 워드마크 전용)
- 영문 UI: Helvetica Neue / Arial 폴백
- 한글: Pretendard / Noto Sans KR
위계:
- Display: 32px / 800 / 1.15 / -0.01em
- H1: 24px / 700 / 1.2 / 0
- H2: 20px / 700 / 1.25 / 0
- H3: 16px / 700 / 1.35 / 0
- Body Large: 15px / 400 / 1.5 / 0
- Body: 13px / 400 / 1.45 / 0
- Body Small: 12px / 400 / 1.4 / 0
- Price: 20px / 900 / 1 / -0.01em (color:red)
- Caption: 11px / 600 / 1.3 / 0.01em

Spacing

스페이싱

Base unit: 4px (Compact 톤)
토큰: ``css --space-xs: 4px; --space-sm: 6px; --space-md: 10px; --space-lg: 14px; --space-xl: 20px; --space-2xl: 32px; --space-3xl: 48px; ``
Container: max-width 1140px, 좌우 패딩 12px

Border Radius

--radius-none: 0;
--radius-sm: 2px;     /* 배지 */
--radius-md: 4px;     /* 카드, 입력 — Agoda 시그니처 */
--radius-lg: 8px;
--radius-xl: 12px;
--radius-full: 9999px;

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 2px 6px rgba(0,0,0,0.08);    /* 카드 hover (미세) */
--shadow-lg: 0 6px 16px rgba(0,0,0,0.12);   /* 모달 */
--shadow-xl: 0 12px 28px rgba(0,0,0,0.16);

Iconography

스타일: Filled 작은 픽토그램 + Outline 혼합
Stroke 굵기: 2px
모서리 처리: Square (industrial)
추천 라이브러리: Tabler / Material Symbols

Component Guide

컴포넌트 가이드

Button

.btn { font: 700 13px/1 'Helvetica Neue', 'Pretendard', Arial, sans-serif;
       border-radius: var(--radius-md); padding: 10px 16px; height: 38px; border: 0;
       display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
       transition: background 120ms ease; }
.btn-primary { background: var(--color-primary-500); color: #fff; }
.btn-primary:hover { background: var(--color-primary-600); }
.btn-primary:active { background: var(--color-primary-700); }
.btn-primary:disabled { background: var(--color-neutral-200); color: var(--text-disabled); }
.btn-primary.is-loading { color: transparent; pointer-events: none; position: relative; }
.btn-primary.is-loading::after { content:""; position:absolute; width:14px; height:14px;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
.btn-secondary { background: #fff; color: var(--color-primary-600); border: 1px solid var(--color-primary-500); }
.btn-secondary:hover { background: var(--color-primary-50); }
.btn-outline { background: #fff; color: var(--text-primary); border: 1px solid var(--border-default); }
.btn-ghost { background: transparent; color: var(--color-primary-600); padding: 10px 8px; }
.btn-ghost:hover { background: var(--color-primary-50); }
.btn-danger { background: var(--color-secondary-500); color: #fff; }
.btn-danger:hover { background: var(--color-secondary-600); }
@keyframes spin { to { transform: rotate(360deg); } }

Input

.input { background: #fff; border: 1px solid var(--border-default);
         border-radius: var(--radius-md); padding: 8px 10px; height: 36px;
         font: 400 13px/1.4 inherit; color: var(--text-primary); }
.input:focus { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 2px rgba(83,146,249,0.20); }
.input[aria-invalid="true"] { border-color: var(--color-secondary-500); }
.input:disabled { background: var(--color-neutral-100); color: var(--text-disabled); cursor: not-allowed; }
.input-error { color: var(--color-secondary-600); font: 600 11px/1.3 inherit; margin-top: 4px; }

Card (Hotel result)

.hotel-card { background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px; display: grid; grid-template-columns: 120px 1fr 140px; gap: 12px; }
.hotel-card:hover { background: var(--bg-subtle); }
.hotel-card .thumb { width: 120px; height: 100px; border-radius: var(--radius-sm); background: var(--color-neutral-100); }
.hotel-card .name { font: 700 14px/1.3 inherit; color: var(--text-primary); margin: 0 0 2px; }
.hotel-card .stars { color: var(--color-tertiary-500); font-size: 11px; }
.hotel-card .review-block { display: inline-flex; align-items: center; gap: 6px; }
.hotel-card .score { background: var(--color-primary-600); color: #fff; font: 700 12px/1 inherit; padding: 4px 6px; border-radius: var(--radius-sm); }
.hotel-card .price-block { text-align: right; }
.hotel-card .strike { font: 400 11px/1 inherit; color: var(--text-tertiary); text-decoration: line-through; }
.hotel-card .price { font: 900 20px/1 inherit; color: var(--color-secondary-500); }
.hotel-card .price-note { font: 400 10px/1.3 inherit; color: var(--text-tertiary); }
.hotel-card.featured { border-color: var(--color-primary-300); box-shadow: var(--shadow-md); }
.hotel-card.outlined { background: transparent; border-color: var(--border-strong); }
.hotel-card .secret { border: 2px solid var(--color-tertiary-500); background: #FFFCF0; padding-top: 14px; position: relative; }
.hotel-card .secret::before { content:"SECRET DEAL"; position: absolute; top: -9px; left: 12px; background: var(--color-secondary-500); color: #fff; font: 700 10px/1 inherit; letter-spacing: 0.04em; padding: 3px 6px; border-radius: var(--radius-sm); }

Badge

.badge { font: 700 10px/1 inherit; letter-spacing: 0.02em; padding: 3px 6px; border-radius: var(--radius-sm); display: inline-block; }
.badge-discount { background: var(--color-secondary-50); color: var(--color-secondary-600); }
.badge-deal     { background: var(--color-tertiary-500); color: var(--text-primary); }
.badge-score    { background: var(--color-primary-600); color: #fff; padding: 4px 6px; font-weight: 700; font-size: 12px; }
.badge-outline  { background: #fff; border: 1px solid var(--border-default); color: var(--text-primary); }

Navigation (Top)

.topnav { height: 56px; background: #fff; color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; padding: 0 16px; gap: 24px; }
.topnav .logo { font: 900 22px/1 inherit; letter-spacing: -0.06em; display:flex; }
.topnav a { color: var(--text-primary); font: 600 13px/1 inherit; text-decoration: none; }
.topnav a:hover { color: var(--color-primary-600); }
.topnav .right { margin-left: auto; display: flex; align-items:center; gap: 14px; font: 600 12px/1 inherit; }
.topnav .account { color: var(--color-primary-600); border:1px solid var(--color-primary-500); border-radius:var(--radius-md); padding:9px 12px; }

Motion

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

Anti-patterns

1. 회색 Agoda 워드마크와 다섯 원형의 색상 순서·간격 변경 금지 — 빨강·노랑·초록·보라·하늘색 순서와 충분한 여백 유지 2. 검색·선택 CTA에 할인 빨강을 기본색처럼 남용 금지 — 동작은 파랑, 가격·긴급성은 빨강으로 역할 분리 3. 결과 카드에 12px 이상의 과도한 라운드와 큰 그림자 사용 금지 — 비교형 정보 밀도를 해친다 4. 모든 영역에 여섯 브랜드색을 동시에 뿌리기 금지 — 멀티컬러는 로고·Agoji·캠페인 포인트에 집중 5. 가격·평점·취소 혜택을 장식 아래 숨기기 금지 — 핵심 의사결정 정보가 첫 시선에 보여야 한다

Agoda

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

출처