Brand-adapted extraction

Tripadvisor design system.

Travel discovery UI with green search moments, cream editorial surfaces, rounded destination cards, rating bubbles, review excerpts and map/list exploration patterns.

HotelsThings to doRestaurantsFlightsVacation rentals

● ● ● ● ◐

Find your next favorite place.

Traveler-backed recommendations, prices and plans in one friendly product surface.

BrandTripadvisor

CategoryTravel reviews

PatternDiscovery

Depth10 sections

01 / Colors

Tripadvisor is mostly white and practical. Brand energy comes from action green, mint support, deep green trust and warm cream/yellow travel surfaces.

Tripadvisor green#00AA6CMain action, search, ratings and success states.

Fresh mint#34E0A1Secondary brand signal and soft highlights.

Deep trust green#004F32Premium badges and high-contrast dark modules.

Ink#1F1F1FPrimary text and black CTAs.

Muted text#6B6B6BMetadata and secondary descriptions.

Canvas#FFFFFFDefault product background.

Warm cream#F7F4EATravel editorial surface and planning panels.

Soft green#EAFBF4Selected, saved and helpful states.

Hairline#DADADACard borders and form outlines.

Traveler yellow#F2B203Awards, warning, sponsored/highlight cues.

02 / Typography

Trip Sans-like sans-serif throughout: friendly, bold, product-native, with tight large headings and readable review copy.

DisplayWhere to?72px / 800

HeadlineTop destinations near you48px / 800

Card titleThe Green House Inn24px / 750

BodyTraveler reviews, photos and tips for a practical decision.16px / 1.6

LabelTravelers' Choice12px / 800

03 / Buttons

Pill CTAs are friendly and direct. Green is reserved for the main travel action; black is account/utility; cream is secondary.

04 / Cards and surfaces

Surfaces feel like travel product modules: white listing cards, cream planning panels, green rating cues, price rows and map/list layouts.

Search hero surface

Large destination question with pill input.

Review rating card

Green bubble row as trust signal.

Hotel price row

Price, availability and cancellation cue.

Choice badge

Deep green premium/trust module.

Map split card

Exploration list paired with location context.

Sponsored highlight

Warm yellow for award or promo moments.

Category rail

Restaurants, hotels and activities as tabs.

Trip planner CTA

Soft green save/planning surface.

05 / Brand-specific product patterns

These are the important Tripadvisor patterns: destination browsing, listing cards, maps, reviews, planning checklists, photo grids and trust badges.

Destination inspiration card

Big rounded travel card with place name and image-like color field.

Hotel result card

Thumbnail, title, rating bubbles, price and cancellation metadata.

Map pin summary

Location-first exploration and saved places context.

Review excerpt module

Rating bubbles plus short traveler quote.

Save hotelAdd restaurantBook activity

Trip planning checklist

Saved itinerary steps and practical planning rhythm.

Traveler photo strip

Rounded user-generated image grid.

Travelers' Choice badge

Trust marker with deep green and award yellow support.

06 / Forms

Search and booking forms are rounded, high contrast and practical, with green focus rings and clear error borders.

DestinationDatesTravel typeReview

Free cancellation 4 stars and upRequired

07 / Spacing

Generous product spacing: 8px controls, 16px rows, 24px cards, 40px modules, 72px hero/section breathing room.

4px

8px

16px

24px

40px

72px

Trip card rhythm

24px card padding

16px list row gap

40px product module gap

08 / Radius

Tripadvisor is rounded and friendly: pill search/CTAs, soft listing cards, rounded imagery, tight form inputs.

8px
small

16px
input

20px
image

24px
card

32px
hero module

999px
pill

09 / Elevation

Depth is subtle: mostly borders and small shadows so travel content remains approachable and practical.

Listing border

Saved trip chip

Hotel card hover

Search overlay

10 / Extracted component tokens

Copyable CSS tokens and handoff notes for rebuilding a Tripadvisor-style travel discovery interface.

--trip-green: #00AA6C;
--trip-mint: #34E0A1;
--trip-deep-green: #004F32;
--trip-ink: #1F1F1F;
--trip-muted: #6B6B6B;
--trip-canvas: #FFFFFF;
--trip-cream: #F7F4EA;
--trip-soft-green: #EAFBF4;
--trip-border: #DADADA;
--trip-yellow: #F2B203;
--trip-radius-sm: 8px;
--trip-radius-md: 16px;
--trip-radius-lg: 24px;
--trip-radius-hero: 32px;
--trip-pill: 999px;
--trip-font: "Trip Sans", Inter, Arial, sans-serif;
--button-padding: 14px 22px;
--search-padding: 8px;
--card-padding: 24px;
--focus-ring: 0 0 0 4px rgba(0,170,108,.18);
--layout-max: 1240px;

Implementation notes
Keep pages mostly white. Use green for the main decision action, ratings and saved/trust states. Use cream for travel planning/editorial modules. Build product demos around search, ratings, hotel cards, reviews, map/list split and saved-trip planning rather than generic SaaS cards. Do not use dark editorial styling; Tripadvisor should feel white, practical, rounded and review-driven.