---
version: alpha
name: "Voyage"
description: "Randlose Fotos, Ozeanblau und eine Serife, die sich wie eine Postkarte anfühlt. Voyage verkauft zuerst das Reiseziel: randlose Foto-Header, eine Postkarten-Serife für Ortsnamen, Ozeanblau fürs Buchen und Sonnenuntergangsorange für Angebote. Unter den Fotos wird es praktisch, mit klaren Daten, Preisen und Reiseplänen auf warmem Sandweiß."
colors:
  primary: "#0B5D7A"
  on-primary: "#FFFFFF"
  secondary: "#E2884A"
  tertiary: "#3E8E6A"
  neutral: "#5A6A70"
  surface: "#FAF7F2"
  on-surface: "#0F2A33"
typography:
  display-lg:
    fontFamily: "DM Serif Display"
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.01em
  headline-lg:
    fontFamily: "DM Serif Display"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.1
  headline-md:
    fontFamily: "DM Serif Display"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
  headline-sm:
    fontFamily: "DM Serif Display"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.3
  body-md:
    fontFamily: "Manrope"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
  body-sm:
    fontFamily: "Manrope"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
rounded:
  sm: 16px
  md: 18px
  lg: 20px
  xl: 24px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Voyage verkauft zuerst das Reiseziel: randlose Foto-Header, eine Postkarten-Serife für Ortsnamen, Ozeanblau fürs Buchen und Sonnenuntergangsorange für Angebote. Unter den Fotos wird es praktisch, mit klaren Daten, Preisen und Reiseplänen auf warmem Sandweiß.

## Colors

- **primary (#0B5D7A):** Tiefes Ozeanblau für die Suche, Buchen-Buttons und ausgewählte Daten. Im Dunkelmodus Himmelblau.
- **on-primary (#FFFFFF)**
- **secondary (#E2884A):** Sonnenuntergangsorange für Angebote, Preissenkungen und die zweite Diagrammreihe.
- **tertiary (#3E8E6A):** Palmengrün für kostenlose Stornierung, Öko-Unterkünfte und eine dritte Reihe.
- **neutral (#5A6A70):** Schiefergrau für Daten, Entfernungen und Kleingedrucktes.
- **surface (#FAF7F2):** Warmes Sandweiß; weiße Karten, mit weichem Schatten, wo sie Fotos überlappen.
- **on-surface (#0F2A33)**

## Typography

DM Serif Display im Schnitt 400 für Ortsnamen und Screen-Titel (44px auf Foto-Headern, 32px für Titel); Manrope im Schnitt 500 und 16px für Fließtext, Preise und Details.

## Layout

Smartphone-Screens mit 20px Seitenrand und einer Tab-Leiste mit 4 Einträgen und 64px Höhe unten. Reiseziel- und Hotel-Screens öffnen mit einem randlosen Foto-Header; die Buchungsdetails folgen in gestapelten Karten über einer fixierten Preis-und-Buchen-Leiste.

## Shapes

20px-Ecken an Karten, Fotos und Sheets; pillenförmige Suchleiste und Datums-Chips; mindestens 48px große Touch-Ziele. Weiche, niedrige Schatten an Karten, die Fotos überlappen.

## Components

Eine pillenförmige Suchleiste für Wo, Wann und Wer, Reiseziel-Karten mit großem Foto und Ortsnamen in Serifen, ein Datumsbereichs-Picker, eine Reiseplan-Timeline und eine Bordkarte.

## Do's and Don'ts

- Eröffne Reiseziel-Screens mit einem randlosen Foto.
- Zeige vor dem Buchen-Button den Gesamtpreis inklusive Steuern.
- Setze keine Absätze in der Serife; behalte sie für Namen und Titel.
- Lege keinen Text ohne dunkle Abdeckung auf unruhige Fotos.