---
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):** サンセットオレンジ。お得な情報、値下がり、2 番目のチャート系列用。
- **tertiary (#3E8E6A):** ヤシのグリーン。無料キャンセル、エコな宿泊、3 番目の系列用。
- **neutral (#5A6A70):** スレートグレー。日付、距離、注意書き用。
- **surface (#FAF7F2):** 温かみのあるサンドホワイト。白いカードは、写真に重なる部分にやわらかな影を付けます。
- **on-surface (#0F2A33)**

## Typography

地名と画面タイトルは DM Serif Display のウェイト 400（写真ヘッダーは 44px、タイトルは 32px）。本文、価格、詳細は Manrope のウェイト 500、16px。

## Layout

左右 20px のパディングと、高さ 64px で 4 項目の下部タブバーのスマートフォン画面。目的地とホテルの画面は全幅の写真ヘッダーで始まり、予約の詳細は、固定表示の価格と予約のバーの上に、積み重ねたカードで続きます。

## Shapes

カード、写真、シートは 20px の角丸。ピル型の検索バーと日付のチップ。タッチ領域は最小 48px。写真に重なるカードには、やわらかく低い影。

## Components

どこで、いつ、誰とを入力するピル型の検索バー、大きな写真とセリフ体の名前を載せた目的地のカード、日付範囲のピッカー、旅程のタイムライン、搭乗券のカード。

## Do's and Don'ts

- 目的地の画面は、全幅の写真で始める。
- 予約ボタンの前に、税込みの合計金額を示す。
- 本文にセリフ体を使わない。地名とタイトルのために取っておく。
- にぎやかな写真の上に、暗いスクリムなしで文字を置かない。