UI Skillbook
2

Tripadvisor DESIGN.md

Brands

Travel discovery with content-heavy browsing, green brand cues, and review-driven utility. Tripadvisor's public site uses white surfaces, black text, rounded search controls, and the familiar Tripadvisor green…

Raw DESIGN.md

At a glance

Group
Brands
Main color
#34e0a1Green design systems
Fonts
Trip SansSF Mono

Colors in this file

  • #e5e5e5

    Unnamed

  • #34e0a1

    Unnamed

  • #111111

    Unnamed

  • #ffffff

    Unnamed

  • #f7f7f7

    Unnamed

  • #6b7280

    Unnamed

Travel discovery with content-heavy browsing, green brand cues, and review-driven utility. Tripadvisor's public site uses white surfaces, black text, rounded search controls, and the familiar Tripadvisor green (#34E0A1) with review-and-discovery framing.

1. Visual Theme & Atmosphere

Overall Aesthetic

Tripadvisor feels like travel recommendations and reviews organized into a consumer discovery engine.

Mood & Feeling

  • Helpful
  • Review-driven
  • Travel curious
  • Mainstream
  • Utility-first

Design Density

Medium density. Review categories and destination modules are numerous but legible.

Visual Character

  • White interface with green highlights
  • Search-led travel discovery
  • Rounded modules and content cards
  • Reviews and guides framed as first-class content

2. Color Palette & Roles

TokenHexRole
--ta-green#34E0A1Primary brand accent
--ta-black#111111Text
--ta-white#FFFFFFMain surface
--ta-surface#F7F7F7Background
--ta-muted#6B7280Secondary text
--ta-border#E5E5E5Borders

3. Typography Rules

Font Stack

css--font-display: "Trip Sans", "Inter", "Helvetica Neue", Arial, sans-serif;
--font-sans: "Trip Sans", "Inter", system-ui, sans-serif;
--font-mono: "SF Mono", Menlo, monospace;

Type Scale

Hero 52/700, H1 38/700, H2 28/700, Body 16/400, Small 14/400

Typography Philosophy

Use sturdy, mainstream travel-discovery typography with strong readability.

4. Component Stylings

css.button-primary { background:#111; color:#fff; border:none; border-radius:999px; min-height:44px; padding:0 18px; font-weight:600; }
.button-secondary { background:#fff; color:#111; border:1px solid #e5e5e5; border-radius:999px; min-height:44px; padding:0 18px; }
.card { background:#fff; border:1px solid #e5e5e5; border-radius:20px; }
.search-shell { background:#fff; border:1px solid #e5e5e5; border-radius:999px; }

5. Layout Principles

Spacing Scale

4, 8, 12, 16, 24, 32, 48px

Layout Behavior

  • Lead with search, reviews, and travel categories
  • Keep destination and attraction content easy to browse
  • Let content density remain organized through simple cards and tabs

6. Depth & Elevation

Tripadvisor uses minimal content-card elevation with strong emphasis on search and review browsing.

7. Do's and Don'ts

Do

  • Keep it review-first and search-led
  • Use green as a light brand cue
  • Preserve broad destination browsing clarity

Don't

  • Don’t make it luxury-travel editorial
  • Don’t crowd cards with too much decorative chrome

8. Responsive Behavior

Breakpoints

  • Mobile <768px
  • Tablet 768px-1023px
  • Desktop 1024px+

Responsive Rules

  • Keep search obvious
  • Stack content shelves and destination modules cleanly

9. Agent Prompt Guide

textDesign this like Tripadvisor: white travel-discovery UI with rounded search controls, review-driven content cards, light green brand accents, and mainstream browse-first marketplace clarity.

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/tripadvisor.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "tripadvisor" })

Related Design.md files

CircleCI

Brands · Inter

CI/CD platform design with confident black-and-green delivery surfaces, automation-first dashboards, and pipeline clarity.

Neon

Brands · Inter

Serverless Postgres design with dark developer-native surfaces, bright green database accents, and branch-based workflow clarity.

Square

Brands · Square Sans Display

Commerce infrastructure with black-and-white precision and practical business breadth. Square's public site uses a clean sans system, sharp monochrome structure, and modest accent color while balancing payments,…

Betterment

Brands · GT America

Digital investment design with calming green identity, trust-forward surfaces, humanist typography, and goal-based financial clarity.

Chime

Brands · Circular

Neobank design with energetic green identity, member-first surfaces, friendly typography, and accessible mobile-first banking.

Temporal

Brands · Inter

Durable execution design with dark reliability surfaces, green workflow accents, and code-first orchestration clarity.

All Design.md filesBrowse by font