coderef

trivago

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…
DownloadRaw
trivago

Build with the trivago look.

Palette, type and components from this DESIGN.md, applied to a sample hero.

Palette

At a glance

Website
trivago.de ↗
Theme
light
Typefaces
System
Sections
10
Length
931 words

Add it to your project

Then prompt your agent

Design System · trivago

Light and dark previews, tokens and a ready-to-use package, generated from this DESIGN.md. No AI involved: the same file always produces the same output.

Generating design system…

DESIGN.md

DownloadRaw
Design tokens (YAML front matter)
name: trivago
colors:
  primary: '#0079c2'
  primary-hovered: '#4dbeff'
  primary-pressed: '#00578b'
  primary-emphasis: '#24a3ec'
  highlight-subdued: '#bde7ff'
  revenue: '#0a850e'
  revenue-hovered: '#6dce70'
  revenue-pressed: '#075f0a'
  critical: '#e22851'
  critical-pressed: '#b4183a'
  warning: '#e27423'
  notice: '#ffcc31'
  decorative-blue: '#78daff'
  decorative-orange: '#ff932c'
  decorative-pink: '#ff9dde'
  foreground: '#171717'
  text-strong: '#4d4d4c'
  text-subdued: '#6c6c6b'
  border-neutral: '#8d8d8b'
  canvas: '#ffffff'
  surface-subdued: '#f2f2f1'
  disabled: '#d9d8d6'
typography:
  button:
    fontSize: 16px
    fontWeight: 700
    use: search button; system font stack
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  full: 9999px
components:
  button-search:
    type: button
    backgroundColor: '#0079c2'
    textColor: '#ffffff'
    rounded: 8px
    height: 44px
    padding: 12px 32px
    typography: 16px / 700
    focus: 'outline 1px dotted #4d4d4c'
    use: 'Suchen — the primary blue search button (--action-primary-default); hover and press could not be measured; the tokens declare hovered #4dbeff and pressed #00578b.'
  button-header:
    type: button
    backgroundColor: '#ffffff'
    textColor: '#171717'
    rounded: 8px
    height: 36px
    padding: 8px 16px
    typography: 14px / 700
    focus: 'outline 2px solid #0079c2'
    use: 'Einloggen in the header — white with #171717 text; focus drops the border for a 2px blue outline. Hover not measured.'
omitted:
  - section: spacing
    reason: No verified values in current evidence.

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.

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.”

More like trivago

All brands designs →

Brand names describe the visual style only; coderef is not affiliated with or endorsed by any brand listed. Licenses