---
version: alpha
name: "Voyage"
description: "通栏大图、海洋蓝和一款像明信片的衬线字。 Voyage 先把目的地卖出去：通栏照片页头、像明信片一样的衬线字写地名，预订用海洋蓝，优惠用落日橙。照片下面转为实用：日期、价格和行程在暖沙白底上清清楚楚。"
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 先把目的地卖出去：通栏照片页头、像明信片一样的衬线字写地名，预订用海洋蓝，优惠用落日橙。照片下面转为实用：日期、价格和行程在暖沙白底上清清楚楚。

## Colors

- **primary (#0B5D7A):** 深海洋蓝，用于搜索、预订按钮和选中的日期；深色模式下是天蓝。
- **on-primary (#FFFFFF)**
- **secondary (#E2884A):** 落日橙，用于特价、降价提醒和第二组图表数据。
- **tertiary (#3E8E6A):** 棕榈绿，用于免费取消、生态住宿和第三组数据。
- **neutral (#5A6A70):** 石板灰，用于日期、距离和附加条款。
- **surface (#FAF7F2):** 暖沙白；卡片是白色，压在照片上时带柔和阴影。
- **on-surface (#0F2A33)**

## Typography

地名和页面标题用 DM Serif Display，字重 400（照片页头 44px，标题 32px）；正文、价格和详情用 Manrope，字重 500，16px。

## Layout

手机屏幕左右边距 20px，底部 4 个标签的导航栏，高 64px。目的地和酒店页以通栏照片页头开场，下面是层叠的预订详情卡片，底部固定价格和预订栏。

## Shapes

卡片、照片和弹层用 20px 圆角；搜索栏和日期标签是胶囊形；触控区域至少 48px。压在照片上的卡片用柔和的低阴影。

## Components

填写目的地、日期和人数的胶囊搜索栏、带大图和衬线地名的目的地卡片、日期范围选择器、行程时间线和登机牌卡片。

## Do's and Don'ts

- 目的地页面用通栏照片开场。
- 预订按钮前先显示含税总价。
- 不要用衬线字排大段正文，它只留给地名和标题。
- 不要把文字直接压在杂乱的照片上，要垫一层深色遮罩。