Expedia
액션 블루 검색 버튼과 옐로 One Key가 찍히는 화이트 여행 검색 셸
Brand DNA
브랜드 DNA
- 브랜드명: Expedia
- 한 줄 정체성: 숙소·항공·렌터카·패키지·액티비티를 한곳에서 탐색하고 예약하는 글로벌 풀서비스 여행 마켓플레이스
- 공식 디자인 철학: “The one place you go to go places” — 복잡한 여행 선택을 하나의 명료한 검색 경험으로 통합하고, 예약 전후의 여행자를 지원한다.
- 시그니처 요소 1개: 화이트 검색 셸 안에서 액션 블루(#1668E3)가 검색·링크·포커스를 지휘하고, 옐로(#FFC72C)는 비행기 심볼과 One Key 회원 혜택에만 점처럼 등장하는 여행 대시보드
Tone & Mood
톤 & 무드
- 핵심 키워드 3개: 명료, 통합, 낙관
- 무드 설명: 흰 캔버스와 네이비 잉크가 가격·일정·등급처럼 밀도 높은 정보를 차분하게 정리한다. 액션 블루는 다음 행동을 빠르게 찾게 하고, 옐로는 로고와 회원 혜택에 제한해 여행의 낙관성을 더한다.
- 비주얼 스타일: 모던 미니멀
- 밀도(Density): Compact — 검색과 결과 화면에서 목적지·날짜·여행자·가격·혜택을 짧은 동선 안에 함께 보여준다.
- 모서리 성향: Soft(8px 기본, 카드 12px) — 컨트롤은 친근하지만 과도한 캡슐형은 피한다.
- 평면성: Subtle — 경계선이 위계를 만들고 그림자는 검색 셸·오버레이에만 절제해 사용한다.
Color System
컬러 시스템 (CSS 변수)
:root {
/* Primary — 검색·링크·포커스를 담당하는 Action Blue */
--color-primary-50: #F1F7FE;
--color-primary-100: #E1EEFC;
--color-primary-200: #C8DFF9;
--color-primary-300: #9CC7F3;
--color-primary-400: #64A3EB;
--color-primary-500: #1668E3;
--color-primary-600: #1153B8;
--color-primary-700: #0D4294;
--color-primary-800: #0A3474;
--color-primary-900: #082858;
/* Secondary & accent */
--color-secondary-500: #191E3B; /* 헤드라인·One Key 패널 */
--color-accent-500: #FFC72C; /* 로고·회원가·절약 표시 */
--color-accent-100: #FFF4D6;
/* Neutral — 푸른 기가 아주 약한 Expedia UI gray */
--color-neutral-0: #FFFFFF;
--color-neutral-50: #F7F7F7;
--color-neutral-100: #F1F2F3;
--color-neutral-200: #EAECF0;
--color-neutral-300: #DFE0E4;
--color-neutral-500: #9DA1B3;
--color-neutral-700: #676A7D;
--color-neutral-900: #191E3B;
--color-neutral-1000: #0D1023;
/* Semantic */
--color-success-bg: #E6F4EA;
--color-success-fg: #0C7A43;
--color-warning-bg: #FFF4D6;
--color-warning-fg: #8A5600;
--color-error-bg: #FDEBEC;
--color-error-fg: #C81E34;
--color-info-bg: #E1EEFC;
--color-info-fg: #1668E3;
/* Surface — 공식 소비자 제품의 기본은 light */
--bg-base: #FFFFFF;
--bg-subtle: #EFF3F7;
--bg-elevated: #FFFFFF;
--bg-overlay: rgba(13,16,35,0.60);
/* Text */
--text-primary: #191E3B;
--text-secondary: #4F5375;
--text-tertiary: #676A7D;
--text-on-primary: #FFFFFF;
--text-on-accent: #191E3B;
--text-disabled: #9DA1B3;
/* Border */
--border-default: #DFE0E4;
--border-subtle: #EAECF0;
--border-strong: #9DA1B3;
--border-focus: #1668E3;
}Typography
타이포그래피
- 폰트 페어링:
- 영문: Centra No2 (상용, Expedia 계열 UI) / 시스템 sans-serif 폴백
- 한글: Pretendard 또는 Noto Sans KR (OFL, 로컬라이즈 폴백)
- 위계:
- Display: 48px / 700 / 1.08 / -0.025em
- H1: 36px / 700 / 1.15 / -0.02em
- H2: 28px / 700 / 1.2 / -0.015em
- H3: 20px / 700 / 1.3 / -0.01em
- Body Large: 18px / 400 / 1.5 / 0
- Body: 16px / 400 / 1.5 / 0
- Body Small: 14px / 400 / 1.45 / 0
- Price: 22px / 700 / 1.1 / -0.01em
- Caption: 12px / 500 / 1.35 / 0.01em
Spacing
스페이싱
- Base unit: 4px
- 토큰: ``
css --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 40px; --space-3xl: 64px;`` - Container: max-width 1200px, 데스크톱 좌우 24px·모바일 좌우 16px
Border Radius
Border Radius
--radius-none: 0;
--radius-sm: 4px; /* 체크박스·작은 태그 */
--radius-md: 8px; /* 버튼·입력 */
--radius-lg: 12px; /* 검색 셸·결과 카드 */
--radius-xl: 16px; /* 프로모션 패널 */
--radius-full: 9999px; /* 아바타·상태 점에 제한 */Shadow / Elevation
Shadow / Elevation
--shadow-none: none;
--shadow-sm: 0 1px 3px rgba(13,16,35,0.08); /* 결과 카드 hover */
--shadow-md: 0 4px 14px rgba(13,16,35,0.10); /* 검색 셸 */
--shadow-lg: 0 12px 28px rgba(13,16,35,0.14); /* 드롭다운 */
--shadow-xl: 0 20px 48px rgba(13,16,35,0.18); /* 모달 */Iconography
Iconography
- 스타일: Outline 중심, 로고·회원 등급처럼 의미가 고정된 표식만 Filled
- Stroke 굵기: 2px
- 모서리 처리: Round
- 추천 라이브러리: Phosphor Regular 또는 Lucide를 20px 그리드에 맞춰 사용
Component Guide
컴포넌트 가이드
Button
.btn {
min-height: 44px; padding: 0 20px; border: 1px solid transparent;
border-radius: var(--radius-md); font: 700 15px/1 inherit;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
cursor: pointer; transition: background 150ms ease, border-color 150ms 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); }
.btn-secondary { background: #FFFFFF; color: var(--color-primary-500); border-color: var(--color-primary-500); }
.btn-secondary:hover { background: var(--color-primary-50); }
.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-danger:hover { background: #A6192B; }
.btn:disabled { background: var(--color-neutral-200); color: var(--text-disabled); border-color: transparent; cursor: not-allowed; }
.btn[aria-busy="true"]::before {
content: ""; width: 14px; height: 14px; border: 2px solid currentColor;
border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite;
}Input
.input {
min-height: 48px; padding: 8px 12px; background: #FFFFFF;
border: 1px solid var(--border-strong); border-radius: var(--radius-md);
color: var(--text-primary); display: flex; align-items: center; gap: 10px;
}
.input:hover { border-color: var(--text-secondary); }
.input:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 2px var(--color-primary-100); }
.input[aria-invalid="true"] { border-color: var(--color-error-fg); box-shadow: 0 0 0 1px var(--color-error-fg); }
.input[aria-disabled="true"] { background: var(--color-neutral-100); color: var(--text-disabled); border-color: var(--border-default); }
.input .label { font: 500 12px/1.2 inherit; color: var(--text-tertiary); }
.input .value { font: 700 15px/1.3 inherit; color: var(--text-primary); }Card
.card {
background: var(--bg-elevated); border: 1px solid var(--border-default);
border-radius: var(--radius-lg); padding: 16px;
}
.card:hover { box-shadow: var(--shadow-sm); }
.card-emphasis { background: var(--color-primary-50); border-color: var(--color-primary-200); }
.card-outlined { background: transparent; border-color: var(--border-strong); box-shadow: none; }
.card .price { font: 700 22px/1.1 inherit; color: var(--text-primary); }
.card .meta { font: 400 13px/1.4 inherit; color: var(--text-tertiary); }Badge / Tag
.badge { padding: 4px 8px; border-radius: var(--radius-sm); font: 700 12px/1.2 inherit; display: inline-flex; align-items: center; gap: 4px; }
.badge-solid { background: var(--color-primary-500); color: #FFFFFF; }
.badge-member { background: var(--color-accent-500); color: var(--text-on-accent); }
.badge-subtle { background: var(--color-primary-50); color: var(--color-primary-700); }
.badge-outline { background: #FFFFFF; color: var(--text-primary); border: 1px solid var(--border-default); }Navigation
.topnav {
height: 64px; padding: 0 24px; background: #FFFFFF;
border-bottom: 1px solid var(--border-default);
display: flex; align-items: center; gap: 28px;
}
.topnav .logo { color: var(--color-secondary-500); font: 700 22px/1 inherit; }
.topnav a { color: var(--text-primary); font: 600 14px/1 inherit; text-decoration: none; }
.topnav a:hover { color: var(--color-primary-500); }
.travel-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--border-default); }
.travel-tabs button { padding: 14px 0 11px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--text-secondary); font: 700 14px/1 inherit; }
.travel-tabs button.active { color: var(--color-primary-500); border-bottom-color: var(--color-primary-500); }Motion
Motion
--duration-fast: 150ms;
--duration-base: 200ms;
--duration-slow: 300ms;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
@keyframes spin { to { transform: rotate(360deg); } }Anti-patterns
Anti-patterns
1. 옐로를 모든 주요 CTA와 넓은 배경에 사용하지 않는다. 현재 제품에서 검색·링크의 기능적 주색은 액션 블루이고, 옐로는 로고·회원가·절약 신호에 한정한다. 2. 기본 페이지를 네이비 다크 테마로 바꾸지 않는다. Expedia 소비자 웹의 기본 경험은 화이트 캔버스의 라이트 모드다. 3. 입력·카드·버튼을 모두 풀필 캡슐로 만들지 않는다. 기본은 8~12px Soft이며 pill은 아바타나 작은 상태 표식에만 제한한다. 4. 풀블리드 여행 사진이 검색 도구를 밀어내게 하지 않는다. Expedia의 첫 행동은 목적지·날짜·여행자를 입력하는 검색 셸이어야 한다. 5. 가격·세금·취소 조건·회원가를 장식적 요소 뒤에 숨기지 않는다. 비교에 필요한 정보는 높은 대비와 안정된 위계로 드러낸다.