---
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의 휴대폰 화면, 높이 64px의 4개 항목 하단 탭 바. 여행지와 호텔 화면은 꽉 찬 사진 헤더로 시작하고, 예약 세부 정보는 고정된 가격·예약 바 위에 카드로 쌓입니다.

## Shapes

카드, 사진, 시트는 20px 모서리, 알약 모양의 검색 바와 날짜 칩, 최소 터치 영역 48px. 사진과 겹치는 카드에는 부드럽고 낮은 그림자.

## Components

어디서, 언제, 누구와를 묻는 알약 모양 검색 바, 큰 사진과 세리프 이름이 있는 여행지 카드, 날짜 범위 선택기, 일정 타임라인, 탑승권 카드.

## Do's and Don'ts

- 여행지 화면은 꽉 찬 사진으로 시작하세요.
- 예약 버튼 앞에 세금을 포함한 총액을 보여 주세요.
- 본문 단락에 세리프를 쓰지 마세요. 이름과 제목에만 쓰세요.
- 복잡한 사진 위에는 어두운 스크림 없이 텍스트를 올리지 마세요.