GetYourGuide DESIGN.md

Design System Inspiration of GetYourGuide

Overview

Visual Theme & Atmosphere

GetYourGuide is a marketplace for tours, activities and attraction tickets. By its own account it began as a student project: "2009 GetYourGuide is founded in Zurich, Switzerland", the website launched in 2010, and in 2012 came "Hallo, Berlin!" — the first official office. The company later "established Berlin HQ" in the historic Ampere Gardens, and it describes a Zurich base, opened in 2017, as its founding country, where much of the tech team still works. Its footer reads "Made in Zurich & Berlin".

The site is bright and photographic: white ground, midnight-blue text #1a2b49, and actions in a clear blue #0071eb. The brand's orange-red #ff5533 — the colour of the GetYourGuide mark — appears as an accent, not on buttons. The search button is a large pill, 56px tall with a 24px bold label.

What makes it worth reading:

• Role names, not colour names. Tokens read as --interactive-primary, --label-secondary, --surface-highlight, --border-primary-hovered — every interactive level has hovered, pressed and disabled steps.
• Named decorative colours. Six playful names sit beside the roles: guiding red, poolside blue, plant green, flamingo pink, basking yellow, midnight blue.
• A typeface in transition. --font-family still renders GT Eesti; --font-primary declares a variable GYG Sans with Arabic and Cyrillic cuts, fetched but not yet applied on the page measured.

Primary tasks

• Search a destination or activity; browse cities and experiences.
• Sign in; manage wishlist and bookings.

Brand Narrative

GetYourGuide turned a student project in Zurich into a travel marketplace run from Berlin, with offices from Rome to Bangkok. Its interface is friendly and plain: photographs do the selling, blue does the acting, and the brand's orange-red stays in the logo. The tokens say what each colour is for, and the type is mid-change — GT Eesti today, GYG Sans already declared.

Principles

• Blue acts. One action colour with a darker hover.
• Name the role. Tokens describe purpose, with every state spelled out.
• Photos first. Chrome stays white and calm.

Personas

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

Colors

Measured with getComputedStyle on getyourguide.de: 104 root custom properties, about 100 of them GetYourGuide's own. The rest are a Swiper carousel's and build artefacts.

Brand and ink

• Brand (#ff5533) — --surface-gyg, --label-gyg, --decorative-guiding-red.
• Primary (#0071eb) — --interactive-primary, --border-interactive-focused; the search button and link text.
• Primary hover (#304c84) — --interactive-primary-hovered and -pressed.
• Foreground (#1a2b49) — --label-primary, --decorative-midnight-blue; the most frequent text colour.
• Label secondary (#63687a) · Label tertiary (#858995).
• Canvas (#ffffff) — --surface-primary.

Surfaces and borders

Surface secondary #ebeef1 · Highlight #e1f0ff · Border #dcdfe4 (--border-primary) → hovered #a0a8b6 → focused #0071eb.

Decorative

Poolside blue #81beff · Plant green #a1d55d · Flamingo pink #f4cdd7 · Basking yellow #ffd938.

Status

Critical #c72a3d (hovered #951d2b) · Success #007850 · Warning #a65200.

Typography

Font family

GT Eesti renders body, headings and buttons: --font-family: "GT Eesti", arial, sans-serif, with 400, 500 and 700 loaded (document.fonts), served from GetYourGuide's CDN under design-system/GT-Eesti/. The newer --font-primary names GYG Sans (GYGSans-VF, a variable face, weight 200–900, with Arabic and Cyrillic families); its files are fetched but document.fonts reports it unloaded on this page, so it is declared, not rendered.

Scale

Measured: the search button 24px/700, header links 14px/400.

Layout

• Spacing: --spacing-0-5x 4px, -1x 8px, -1-5x 12px, -2x 16px, -3x 24px, -4x 32px, up to -8x 64px and -16x 128px.
• Photography-led cards and city tiles on white.

Responsive Behavior

Not measured. Desktop 1440×1000 only.

Elevation & Depth

--elevation-subtle #dad2f440 exists; the measured controls carry no shadow. Image overlays use --supportive-over-image-*.

Motion & Easing

Not measured.

---

Tier 1 sources: https://www.getyourguide.de/ (live homepage — 104 root custom properties read via getComputedStyle; GT Eesti loaded, GYG Sans declared and unloaded; two components measured at rest, hover, pressed and focus, captured 2026-09-26); https://www.getyourguide.careers/ (GetYourGuide Careers — "2009 GetYourGuide is founded in Zurich, Switzerland", "Hallo, Berlin!" 2012, "Established Berlin HQ" in Ampere Gardens, read 2026-09-26); https://inside.getyourguide.com/ (Inside GetYourGuide blog — "Made in Zurich & Berlin"; nonsense path returns 404, read 2026-09-26)

Components

Measured on getyourguide.de, focus read under a real Tab key, and a hover counted only when :hover matched.

• Search button — Suchen: #0071eb, white 24px/700, radius 80px, 56px, 13px 32px. Hover and press turn it to #304c84. Focus draws outline: 2px solid #0071eb.
• Header link — Profil: #63687a, 14px/400, 64px. Hover, press and focus change nothing.

Radius

The search button is a full pill (80px on a 56px height).

States

Hover and press: the search button to #304c84; the Profil header link does not change. Focus: a 2px #0071eb outline on the search button, nothing on the header link. Disabled tokens exist (--interactive-primary-disabled #dcdfe4) but none was observed.

Do's and Don'ts

Do

• Put actions in #0071eb and deepen to #304c84 on hover and press.
• Set text in midnight #1a2b49; secondary in #63687a.
• Keep the orange-red #ff5533 for the brand mark and accents.

Don't

• Don't make buttons orange; the action colour is blue.
• Don't claim GYG Sans as the rendered face yet — GT Eesti renders.
• Don't use the decorative colours for text.

Voice & Tone

Not assessed as authored voice.

Agent Prompt Guide

Quick Color Reference

#0071eb action · #304c84 action hover · #1a2b49 ink · #63687a secondary · #ff5533 brand · #dcdfe4 border · #ebeef1 surface · #e1f0ff highlight · #c72a3d critical

Example Component Prompts

• "A 56px pill search button, #0071eb, white 24px/700 GT Eesti; hover #304c84; focus a 2px #0071eb outline."
• "An activity card on white with a #1a2b49 title and #63687a meta line."

Governance

Known Gaps

• Contrast, link-header. Text #63687a on #00000000 measures 3.79:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.