Tripadvisor

Brand DNA

브랜드 DNA

• 브랜드명: Tripadvisor
• 한 줄 정체성: 전 세계 여행자 리뷰 10억+를 기반으로 호텔·맛집·액티비티를 추천하는 UGC 트래블 가이드
• 공식 디자인 철학: "Know better. Book better. Go better." — 진짜 여행자의 경험이 결정의 근거
• 시그니처 요소 1개: 부엉이 로고(올리 — Ollie) + 굵은 검색 pill + 초록(#34E0A1) 버블 5개로 표현하는 여행자 평점

Tone & Mood

톤 & 무드

• 핵심 키워드 3개: 신뢰, 후기, 발견
• 무드 설명: 흰 캔버스와 검정 헤드라인 위에 여행지 사진, 초록 버블 평점, 실제 여행자 수치를 또렷하게 겹친다. 굵은 검색 pill과 둥근 필터가 복잡한 예약 탐색을 친근하게 만든다.
• 비주얼 스타일: 모던 미니멀 (Editorial 톤)
• 밀도(Density): Comfortable — 카드 안에 사진 + 리뷰 + 평점이 여유 있게 배치
• 모서리 성향: Pill (CTA) + Soft 12px (카드) → 단일 값 Pill
• 평면성: Subtle — 카드에 옅은 그림자, hover 시 약간 떠오름

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Tripadvisor Green (별점·강조) */
  --color-primary-50:  #E0FBF0;
  --color-primary-100: #B8F2D9;
  --color-primary-200: #88E8BD;
  --color-primary-300: #5BDFA8;
  --color-primary-400: #44DBA0;
  --color-primary-500: #34E0A1;   /* Trip Green */
  --color-primary-600: #1FB07A;
  --color-primary-700: #168258;
  --color-primary-800: #0F5C3E;
  --color-primary-900: #083B28;

  /* Secondary - Black (CTA 버튼) */
  --color-secondary-500: #000000;

  /* Neutral */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FAFAFA;
  --color-neutral-100:  #F2F2F2;     /* quote bg */
  --color-neutral-200:  #DEDEDE;     /* border */
  --color-neutral-300:  #C4C4C4;
  --color-neutral-500:  #6E6E73;
  --color-neutral-700:  #3A3A3D;
  --color-neutral-800:  #212121;
  --color-neutral-900:  #000000;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E0FBF0;
  --color-success-fg: #1FB07A;
  --color-warning-bg: #FFF0D2;
  --color-warning-fg: #B07A00;
  --color-error-bg:   #FCE2E2;
  --color-error-fg:   #C8302C;
  --color-info-bg:    #E0EDF8;
  --color-info-fg:    #1F61CB;

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

  /* Text */
  --text-primary:    #000000;
  --text-secondary:  #3A3A3D;
  --text-tertiary:   #6E6E73;
  --text-on-primary: #000000;        /* 초록 위는 검정 (Trip 시그니처) */
  --text-on-cta:     #FFFFFF;        /* 검정 CTA 위는 흰색 */
  --text-disabled:   #C4C4C4;

  /* Border */
  --border-default: #DEDEDE;
  --border-subtle:  #F2F2F2;
  --border-strong:  #C4C4C4;
  --border-focus:   #34E0A1;
}

Typography

타이포그래피

• 폰트 페어링:
  • 영문: Trip Sans (자체 폰트) / Inter 폴백
  • 한글: Pretendard / Noto Sans KR
  • 리뷰 인용: Serif italic — Source Serif Pro / Noto Serif KR
• 위계:
  • Display: 56px / 800 / 1.05 / -0.02em
  • H1: 36px / 800 / 1.15 / -0.015em
  • H2: 26px / 700 / 1.25 / -0.01em
  • H3: 20px / 700 / 1.3 / 0
  • Body Large: 17px / 400 / 1.55 / 0
  • Body: 15px / 400 / 1.5 / 0
  • Body Small: 13px / 400 / 1.45 / 0
  • Quote: 15px / 400 / 1.6 / 0 italic serif
  • Caption: 12px / 600 / 1.3 / 0.02em

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 1136px, 좌우 패딩 16px

Border Radius

Border Radius

--radius-none: 0;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;     /* 카드 시그니처 */
--radius-xl: 24px;
--radius-full: 9999px;  /* 버튼·배지·점 별점 */

Shadow / Elevation

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 12px rgba(0,0,0,0.08);     /* 카드 hover */
--shadow-lg: 0 12px 28px rgba(0,0,0,0.14);    /* 모달 */
--shadow-xl: 0 24px 48px rgba(0,0,0,0.20);

Iconography

Iconography

• 스타일: Filled (별점은 풀필 원형 점) + Outline 혼합
• Stroke 굵기: 1.5px
• 모서리 처리: Round
• 추천 라이브러리: Phosphor / Lucide

Component Guide

컴포넌트 가이드

Button

.btn { font: 800 14px/1 'Trip Sans', Inter, 'Pretendard', sans-serif; letter-spacing: -0.01em;
       border-radius: 9999px; padding: 12px 22px; height: 44px; border: 0;
       display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
       transition: background 150ms ease, transform 150ms ease; }
.btn-primary { background: var(--color-secondary-500); color: var(--text-on-cta); }
.btn-primary:hover { background: #2A2A2C; transform: translateY(-1px); }
.btn-primary:disabled { background: var(--color-neutral-200); color: var(--text-disabled); }
.btn-accent  { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-accent:hover { background: var(--color-primary-400); }
.btn-secondary { background: #fff; color: var(--text-primary); border: 2px solid var(--text-primary); padding: 10px 20px; }
.btn-secondary:hover { background: var(--bg-subtle); }
.btn-ghost { background: transparent; color: var(--text-primary); text-decoration: underline; text-decoration-thickness: 2px; }

Input

.input { background: #fff; border: 1px solid var(--border-default);
         border-radius: 9999px; padding: 12px 18px; height: 48px;
         font: 500 15px/1.4 inherit; color: var(--text-primary); transition: border-color 150ms ease; }
.input:focus { outline: none; border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--color-primary-200); }
.input[aria-invalid="true"] { border-color: var(--color-error-fg); }

Card (POI/Hotel)

.poi-card { background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 16px; transition: box-shadow 200ms ease, transform 200ms ease; }
.poi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.poi-card .thumb { aspect-ratio: 4/3; border-radius: var(--radius-md); background: var(--color-neutral-100); margin-bottom: 12px; overflow: hidden; }
.poi-card .rank { font: 600 12px/1 inherit; color: var(--text-tertiary); margin-bottom: 4px; }
.poi-card .name { font: 800 17px/1.3 inherit; margin: 0 0 6px; }
.poi-card .rating { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.poi-card .dots { display: inline-flex; gap: 2px; }
.poi-card .dot { width: 12px; height: 12px; border-radius: 9999px; background: var(--color-primary-500); }
.poi-card .dot.empty { background: var(--color-neutral-200); }
.poi-card .count { font: 600 13px/1 inherit; color: var(--text-tertiary); }
.poi-card .quote { background: var(--color-neutral-100); border-radius: var(--radius-md); padding: 10px 12px; font: italic 400 14px/1.6 'Source Serif Pro', serif; color: var(--text-primary); }
.poi-card .author { font: 500 11px/1.3 'Trip Sans', sans-serif; color: var(--text-tertiary); margin-top: 6px; font-style: normal; }

Badge

.badge { padding: 4px 10px; border-radius: 9999px; font: 700 11px/1.4 inherit; letter-spacing: 0.02em; display: inline-flex; gap: 4px; align-items: center; }
.badge-award    { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.badge-loved    { background: var(--color-primary-50); color: var(--color-primary-700); }
.badge-solid    { background: var(--color-primary-500); color: var(--text-on-primary); }
.badge-outline  { background: #fff; border: 1px solid var(--text-primary); color: var(--text-primary); }

Navigation (Top)

.topnav { height: 64px; background: #fff; color: var(--text-primary); border-bottom: 1px solid var(--border-default); display: flex; align-items: center; padding: 0 20px; gap: 28px; }
.topnav .logo { display: inline-flex; align-items: center; gap: 8px; font: 800 22px/1 inherit; letter-spacing: -0.01em; }
.topnav a { color: var(--text-primary); font: 700 14px/1 inherit; text-decoration: none; }
.topnav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

Motion

Motion

--duration-fast: 150ms;
--duration-base: 250ms;
--duration-slow: 400ms;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

Anti-patterns

Anti-patterns

1. 별점을 별 모양 아이콘으로 표시 금지 — Tripadvisor는 점(원형) 5개가 시그니처 2. 초록색 위에 흰색 텍스트 사용 금지 — 항상 검정 텍스트 (#34E0A1 + #000 조합) 3. 여행 카드에서 버블 평점과 리뷰 수를 함께 생략 금지 — 여행자 신뢰의 핵심 4. 사각형 버튼 사용 금지 — 풀필 pill이 친근함 시그니처 5. 부엉이 로고 옆에 그라데이션·이펙트 적용 금지 — 평면 일러스트 유지

Sources

출처

1. https://www.tripadvisor.com/
2. https://tripadvisor.mediaroom.com/branding