trivago DESIGN.md

Design System Inspiration of trivago

Overview

Visual Theme & Atmosphere

trivago's mission: "When travelers are searching for a hotel, we want the obvious choice to be trivago." It was "founded in 2005 in Dusseldorf, Germany" with "a simple idea: use technology to solve real user problems and simplify hotel search", turned a $1 million investment into $1 billion of revenue, listed on NASDAQ, survived the pandemic, and now has 650+ team members from 75+ nationalities. Its legal notice names trivago N.V., Kesselstrasse 5–7, 40221 Düsseldorf.

The hotel search page is white and utilitarian: near-black text #171717, trivago blue #0079c2 for the search action, green #0a850e for revenue (deal) actions, red and orange for alerts, and decorative blue, orange and pink. It sets text in the system font stack — no brand face loads.

What makes it worth reading:

• Actions by business meaning. --action-{primary, highlight, revenue, success, critical, warning}-{default, hovered, pressed, disabled} — "revenue" is its own action, the green of a deal.
• Surfaces in nine steps. --surface-*-{default, emphasis, hovered, muted, pressed, soft, subdued, tint} for each intent, with surface-success-pricing #ebfdec reserved for prices.
• A 10px root scale. Radii and borders are declared in rem on a 10px base (--radius-8 0.8rem renders 8px).

Primary tasks

• Search hotels by destination, dates and guests.
• Compare prices across booking sites; log in.

Brand Narrative

A Düsseldorf company that bootstrapped hotel search into a NASDAQ-listed brand. The product is a comparison tool, and it looks like one: white, dense, system-set, with blue for searching and green for the deal.

Principles

• The obvious choice for hotel search. Its mission.
• Actions named by meaning. Revenue is an action.
• Simplify hotel search.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

Measured with getComputedStyle on trivago.de: 511 root custom properties — --size-* 129, --space-* 66, --border-* 62, --type-* 59, --surface-* 51, --text-* 31, --action-* 24, --icon-* 20, --radius-* 11 … All first-party.

Primary blue

• Primary (#0079c2) — --action-primary-default, --text-link.
• Hovered (#4dbeff) · Pressed (#00578b) — declared in tokens.
• Emphasis (#24a3ec) · Highlight subdued (#bde7ff).

Revenue and status

• Revenue (#0a850e) → hovered (#6dce70) → pressed (#075f0a).
• Critical (#e22851) → pressed (#b4183a) · Warning (#e27423) · Notice (#ffcc31).

Decorative

Blue #78daff · Orange #ff932c · Pink #ff9dde.

Neutrals

• Foreground (#171717) — --text-default.
• Text strong (#4d4d4c) · Text subdued (#6c6c6b) · Border neutral (#8d8d8b).
• Canvas (#ffffff) · Surface subdued (#f2f2f1) · Disabled (#d9d8d6).

Typography

Font family

--font-family-default: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Noto Sans", …. No brand typeface is loaded on this surface; none is claimed.

Scale

Search button 16px/700; header buttons 14px/700.

Layout

• A slim header, a hero search bar (destination, dates, guests, search), and a partner-logo row ("Unsere Partner und über 100 weitere").

Responsive Behavior

Not measured. Desktop 1440×1000 only.

Elevation & Depth

Flat; surfaces and borders separate content.

Motion & Easing

Not measured.

---

Tier 1 sources: https://www.trivago.de/ (live homepage — 511 root custom properties read via getComputedStyle; two components measured at rest and focus, captured 2026-09-26); https://www.trivago.de/zz-this-does-not-exist (nonsense-path control — HTTP 200 rendering the homepage, a catch-all; noted, read 2026-09-26); https://company.trivago.com/ (company site — mission, founded 2005 in Düsseldorf, NASDAQ listing, 650+ team members, read 2026-09-26); https://www.trivago.com/en-US/sl/legal-information (legal information — trivago N.V., Kesselstrasse 5–7, 40221 Düsseldorf, read 2026-09-26)

Components

Measured with focus under a real Tab key. Hover and pressed could not be measured: an overlay intercepted the pointer on every load. They are omitted, not recorded as "no change".

• Search — Suchen: #0079c2, white 16px/700, 8px, 44px. Focus a 1px dotted #4d4d4c outline. (Tokens declare hovered #4dbeff, pressed #00578b.)
• Header button — Einloggen: white, #171717 14px/700, 8px, 36px. Focus drops the border for a 2px #0079c2 outline.

Radius

--radius-4 / -8 / -16 / -circle → 4px, 8px, 16px, full.

States

Focus: dotted or 2px blue outlines. Hover and pressed: not measured on the live page; declared in tokens (--action-primary-hovered #4dbeff, -pressed #00578b).

Do's and Don'ts

Do

• Use trivago blue #0079c2 for search and links, and green #0a850e for deal actions.
• Give every action default, hovered, pressed and disabled values.
• Keep #ebfdec for price highlights.

Don't

• Don't load a brand typeface here; the product uses the system stack.
• Don't use revenue green for navigation.
• Don't use decorative colours for text.

Voice & Tone

Not assessed as authored voice.

Agent Prompt Guide

Quick Color Reference

#0079c2 trivago blue · #00578b pressed · #0a850e revenue green · #e22851 critical · #171717 ink · #6c6c6b subdued · #f2f2f1 surface · #ff932c orange

Example Component Prompts

• "A 44px #0079c2 search button, white 16px/700 system font, 8px radius."
• "A white 36px header button with #171717 text and a 2px #0079c2 focus outline."