Where to build a travel interface?

A flat, photo-led marketplace preview built from deep Trip Green, bright search actions, pill controls, rating bubbles, award moments, and dense comparison cards.

Search AllThings to DoHotelsRestaurantsCruises

oBest things to do near Berlin

Canal cruise

Food walk

Old town tour

40Colors

16Type Levels

20Components

86Tokens

01 / Colors

Green ink, bright action, travel campaign accents.

primary#002B11

Consumer ink and deep CTA fill.

accent#00EB5B

Signature search and commerce action.

tripMoss#00AB42

Borders, rating, secondary green.

surface#FFFFFF

Main product plane.

surfaceAlt#F7F7F7

Footer and quiet bands.

border#DFE1DF

Flat card separation.

travelerChoiceGold#FFC56F

Awards and winners.

favorite#FB5184

Saved pins and emotional marks.

businessInk#000000

Owner-facing B2B mode.

businessMintSoft#C9F2E3

Business marketing panels.

02 / Typography

Heavy Trip Sans hierarchy, no decorative tracking.

Travelers compare quickly

display - 62px / 900 / 1.10 / 0em / Inter as Trip Sans substitute

Travelers' Choice Awards

hero - 54px / 900 / 1.20 / 0.02em / Inter

Plan the whole trip

headline-lg - 44px / 900 / 1.09 / 0em / Inter

Where to?

headline-md - 32px / 700 / 1.19 / 0em / Inter

Must-dos in trending places

title-lg - 28px / 800 / 1.21 / 0em / Inter

Experiences travelers love

title-md - 20px / 800 / 1.20 / 0em / Inter

Amsterdam All-Inclusive Canal Cruise

title-sm - 18px / 700 / 1.22 / 0em / Inter

Clean body copy supports dense travel decisions without stealing attention from photos, ratings, and prices.

body - 16px / 400 / 1.50 / 0em / Inter

4.9 (14,210) from $30 per adult

caption - 14px / 400 / 1.29 / 0em / Inter

Terms, privacy, currency, and region controls sit quietly in footer zones.

legal - 12px / 400 / 1.50 / 0em / Inter

A softer editorial paragraph can appear in long-form travel content.

editorial - 20px / 400 / 1.20 / 0em / Georgia

54%

business-display - 54px / 700 / 1.19 / 0em / TripSansUltra substitute

Enhance your listing

business-title - 40px / 400 / 1.00 / 0em / TripSansBold substitute

03 / Buttons

Pill controls for search, account, utility, and owner CTAs.

button-primary

button-primary-active

button-accent

button-accent-hover

button-secondary

button-outline

button-business-primary

button-icon

search-tab

04 / Cards & Surfaces

Flat cards, square photos, award panels, and business surfaces.

Colosseum, Roman Forum & Palatine Hill (556)

from $32 per adult

Standard bordered card

White surface, 8px radius, 1px border, no shadow.

Learn more

Winner hero surface

Deep green ground with white campaign type and direct CTAs.

Travelers' Choice badge

Gold is celebratory, not a warning surface.

Explore winners

Business mint panel

Owner-facing pages use soft mint with black type.

Insights panel

Lavender supports B2B analytics and resource modules.

View insights

05 / Brand-Specific Product Patterns

The Tripadvisor product language in miniature.

Hero search with category tabs

Search AllHotelsRestaurants

oWhere to?

Review-dense product card

Small Group Blue Cave Boat Tour
4.9 (8,990)

from $71 per adult

Map pins and saved places

$84Save4.8

Travelers' Choice campaign

Best of the Best

2026

Business Advantage stats

54%more clicks

93%effective

99%reach

FAQ accordion rows

How much does Business Advantage cost?

How do I track performance?

Where can I view my invoice?

06 / Forms

Pill inputs with green focus and quiet error treatment.

Default input Focused input Select Textarea Save this trip Restaurants Error state

07 / Spacing

Compact marketplace rhythm with larger section pauses.

4px

8px

16px

24px

32px

xxl

56px

section

80px

08 / Radius

Small cards, giant pills.

4px

Small details

8px

Product cards

12px

Footer selectors

28px

Award badges

9999px

Search and CTAs

09 / Elevation

Flat surfaces: borders first, scrims second, shadows last.

Flat card

This brand uses flat surfaces. Depth comes from color contrast, not shadows.

box-shadow: none;

Image scrim

Use dark overlay only when text sits on media.

#00000080

Quiet band

Depth comes from surface contrast and hairline borders.

#F7F7F7 + #DFE1DF

10 / Extracted Component Tokens

CSS custom properties used by this preview.

:root {
  --brand-primary: #002B11;
  --brand-accent: #00EB5B;
  --brand-accent-hover: #00D352;
  --brand-accent-pressed: #1F9448;
  --brand-ink: #002B11;
  --brand-body: #38443A;
  --brand-muted: #768A79;
  --brand-surface: #FFFFFF;
  --brand-surface-alt: #F7F7F7;
  --brand-border: #DFE1DF;
  --brand-business-ink: #000000;
  --brand-business-mint-soft: #C9F2E3;
  --brand-traveler-choice-gold: #FFC56F;
  --brand-rating-fill: #00AA6C;
  --brand-favorite: #FB5184;
  --type-display: 62px;
  --type-hero: 54px;
  --radius-md: 8px;
  --radius-pill: 9999px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-section: 80px;
}