TripAdvisor

Overview

TripAdvisor is a trusted travel discovery and booking platform that serves millions of travelers seeking authentic experiences and verified reviews. The design system embodies a philosophy of "Transparent Clarity"—a modern, accessible aesthetic that prioritizes information hierarchy and user confidence through clean typography, ample whitespace, and subtle interactive feedback. The visual language is deliberately neutral and professional, avoiding unnecessary ornamentation while maintaining warmth through a signature teal accent (#00a699) that appears on primary actions and key interactive elements. The brand personality is helpful, authoritative, and conversational—never condescending, always informative. Example voice: "Read 2,847 verified reviews before you book—see what travelers actually experienced."

Colors

The color palette is rooted in a high-contrast, accessibility-first approach. Primary (#00a699) is a sophisticated teal used exclusively for call-to-action buttons, links, and focus states—it signals trust and action without aggression. The surface stack ranges from pure white (#ffffff) for primary content areas to light grays (#f5f5f5, #e9ecef, #d0d0d0) for container differentiation and disabled states. On-surface text is pure black (#000000) for maximum legibility on white backgrounds, with secondary text in mid-gray (#505050) for hierarchy. The outline color (#d0d0d0) is used for subtle borders and dividers, creating visual separation without visual noise. Error states use a standard red (#d32f2f) for warnings and validation failures. Hover states are achieved through incremental backgr

Typography

The type system uses Helvetica Neue as the primary typeface, with Arial and system sans-serif as fallbacks, ensuring consistent rendering across all platforms and devices. The hierarchy is built on a clear distinction between display (48px, 700 weight) for page titles, headline-lg (32px, 700 weight) for section headers, and body-md (14px, 400 weight) for primary content. Label-md (12px, 600 weight) is used for form labels, button text, and UI annotations, with tight letter-spacing (0.02em) to maintain visual compactness in dense interfaces. All body text uses a line-height of 1.5 (24px for 16px body-lg) to ensure readability on screens and in print. When displaying small labels over interactive elements or busy backgrounds, apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to maintain contra

Layout

The layout system uses a 12-column grid with a maximum container width of 1200px, allowing for flexible responsive behavior across mobile (1 column), tablet (6 columns), and desktop (12 columns) viewports. The spacing scale is semantic: xs (4px) for micro-adjustments, sm (8px) for component padding, md (16px) for section gutters, lg (24px) for major section separation, and xl (40px) for page-level spacing. Whitespace is treated as a first-class design element—sections are separated by lg spacing (24px) minimum, and cards within sections use md spacing (16px) for breathing room. The gutter width is consistently 16px, applied symmetrically to left and right edges of the container. All interactive elements (buttons, inputs, dropdowns) are sized to a minimum height of 40px to meet touch-target

Elevation & Depth

Visual hierarchy is conveyed through a three-tier shadow system that creates subtle depth without visual heaviness. Level 1 (sm elevation: 0 1px 3px rgba(0, 0, 0, 0.08)) is applied to cards and containers at rest, providing minimal separation from the background. Level 2 (md elevation: 0 3px 8px rgba(0, 0, 0, 0.15)) is used on hover states for cards and on dropdown panels, signaling interactivity and focus. Level 3 (lg elevation: 0 8px 16px rgba(0, 0, 0, 0.12)) is reserved for modals, overlays, and floating action elements that must appear above all other content. Shadows use a soft, diffuse b

Shapes

The shape philosophy is "Minimal Geometry"—rounded corners are used sparingly and consistently to create a modern, approachable interface without sacrificing clarity. The default border-radius is 4px (DEFAULT), applied to all input fields, dropdown panels, and small interactive elements. Larger containers and cards use 6px (md radius) to provide slightly more visual softness while maintaining a professional appearance. Buttons use 4px (DEFAULT) to align with form inputs and create a cohesive interaction zone. Modals and full-width overlays use 8px (lg radius) on top corners only, creating a su

Components

Action Elements Buttons are the primary interaction mechanism and must be immediately recognizable. Primary buttons use the signature teal background (#00a699) with white text, 12px vertical padding, 24px horizontal padding, and a 4px border-radius. On hover, the background darkens to #008b7f with a 200ms ease-in-out transition. On active/pressed state, the background shifts to #006b5f. Secondary buttons use a transparent background with a 1px solid outline in #d0d0d0 and teal text; on hover, they gain a light gray background (#e9ecef). Disabled buttons (both primary and secondary) use a 0.6 opacity overlay and a not-allowed cursor. All buttons must have a minimum height of 40px and a minimum width of 80px to meet touch-target guidelines.

Containers & Surfaces Cards are the primar

Do's and Don'ts

**Do**

• Do use the primary teal (#00a699) exclusively for primary actions and focus states—it is the brand's signature accent and must never be diluted or overused.
• Do maintain a minimum touch-target size of 40px × 40px for all interactive elements to ensure accessibility on mobile devices.
• Do apply consistent spacing using the semantic scale (sm: 8px, md: 16px, lg: 24px) to create visual rhythm and predictability across pages.
• Do use the three-tier shadow system (sm/md/lg) to create depth hierarchy—never use custom shadow values outside this system.
• Do restrict font weights to 400, 600, and 700 to ensure consistent rendering and reduce file size.
• Do use the full border-radius (9999px) only for badges and pill-shaped elements; use 4px for buttons and inputs, 6px for cards, and 8px for modals.

**Don't**

• Don't use the primary teal (#00a699) for body text, backgrounds, or non-interactive elements—reserve it exclusively for actions and focus states.
• Don't apply shadows to flat elements like buttons or inputs; use border and background changes instead to indicate state.
• Don't use custom color values outside the defined palette—all colors must reference the token system to maintain consistency.
• Don't apply letter-spacing greater than 0.03em on body text, as it reduces readability; use it only on labels and UI annotations.
• Don't use rounded corners greater than 8px on standard containers; excessive rounding appears unprofessional in a travel-booking context.
• Don't apply opacity changes to disabled elements; instead, use the surface-container-high background (#e9ecef) and secondary text color (#6c757d) with a not-allowed cursor.