Voyage：旅行アプリ デザインシステム
アプリ · ライト · 温かみ · セリフ体 · 旅行Voyage
全幅の写真、オーシャンブルー、絵はがきのようなセリフ体。
Voyage は、まず目的地を売ります。全幅の写真のヘッダー、地名には絵はがきのようなセリフ体、予約にはオーシャンブルー、お得な情報にはサンセットオレンジ。写真の下は実用的に切り替わり、温かみのあるサンドホワイトの上に、はっきりした日付、価格、旅程が並びます。
プレビュー
下のトークンから、このシステム自身のフォントでリアルタイムに描画しています。
9:41
おはようございます今日週の目標5 日中 4 日次の予定朝のルーティン15 分チームのチェックイン30 分夜の振り返り10 分
ホーム統計プランマイページ9:41
今週合計7,842先週比 +12%セッションを開始
ホーム統計プランマイページ9:41
設定通知毎日のリマインダー単位メートル法
ホーム統計プランマイページプロジェクトで使う
これを Codex か Claude Code に貼り付けてください。エージェントが仕様を DESIGN.md として保存し、以降はそれに従います。
このプロジェクトでは Voyage デザインシステムを使います。仕様は https://codexdesign.io/ja/design-systems/voyage.md にあります。プロジェクトのルートに DESIGN.md として保存し、これからはすべての画面でそれに従ってください。
トークン
カラー
ライトテーマ
- background#FAF7F2oklch(0.977 0.007 80.721)
- foreground#0F2A33oklch(0.268 0.037 222.627)
- card#FFFFFFoklch(1 0 0)
- card-foreground#0F2A33oklch(0.268 0.037 222.627)
- popover#FFFFFFoklch(1 0 0)
- popover-foreground#0F2A33oklch(0.268 0.037 222.627)
- primary#0B5D7Aoklch(0.448 0.085 229.04)
- primary-foreground#FFFFFFoklch(1 0 0)
- secondary#E5F0F2oklch(0.947 0.012 209.805)
- secondary-foreground#0B4458oklch(0.362 0.065 227.324)
- muted#F1ECE4oklch(0.945 0.012 79.784)
- muted-foreground#5A6A70oklch(0.513 0.022 222.453)
- accent#EAE4DAoklch(0.921 0.015 80.706)
- accent-foreground#0F2A33oklch(0.268 0.037 222.627)
- destructive#B3261Eoklch(0.501 0.178 28.705)
- border#E3DCD0oklch(0.897 0.018 81.329)
- input#D6CDBEoklch(0.851 0.023 80.676)
- ring#0B5D7Aoklch(0.448 0.085 229.04)
- chart-1#0B5D7Aoklch(0.448 0.085 229.04)
- chart-2#E2884Aoklch(0.711 0.134 53.267)
- chart-3#3E8E6Aoklch(0.586 0.097 161.695)
- chart-4#C9A227oklch(0.728 0.138 89.726)
- chart-5#B45A7Boklch(0.585 0.122 358.323)
ダークテーマ
- background#0C181Doklch(0.2 0.02 226.179)
- foreground#ECF1F2oklch(0.955 0.006 211.039)
- card#122229oklch(0.241 0.025 227.57)
- card-foreground#ECF1F2oklch(0.955 0.006 211.039)
- popover#122229oklch(0.241 0.025 227.57)
- popover-foreground#ECF1F2oklch(0.955 0.006 211.039)
- primary#6CC3E0oklch(0.773 0.093 221.874)
- primary-foreground#0C181Doklch(0.2 0.02 226.179)
- secondary#1A2C33oklch(0.281 0.027 224.452)
- secondary-foreground#ECF1F2oklch(0.955 0.006 211.039)
- muted#16262Coklch(0.257 0.024 223.568)
- muted-foreground#93A6ACoklch(0.712 0.023 218.708)
- accent#1D3038oklch(0.296 0.029 226.355)
- accent-foreground#ECF1F2oklch(0.955 0.006 211.039)
- destructive#F08A7Eoklch(0.74 0.126 27.61)
- border#233840oklch(0.327 0.03 223.875)
- input#2C434Coklch(0.368 0.032 224.38)
- ring#6CC3E0oklch(0.773 0.093 221.874)
- chart-1#6CC3E0oklch(0.773 0.093 221.874)
- chart-2#F2AA75oklch(0.796 0.109 56.768)
- chart-3#76C29Eoklch(0.754 0.093 162.572)
- chart-4#E6C65Aoklch(0.833 0.131 92.827)
- chart-5#E091AEoklch(0.745 0.102 356.24)
フォント
- 見出し
- DM Serif Display · 400
- 本文
- Manrope · 500
- 等幅
- JetBrains Mono
タイプスケール
- display · 44/1.05 · -0.01emデザインで、画面はもっと使いやすくなる
- h1 · 32/1.1デザインで、画面はもっと使いやすくなる
- h2 · 24/1.2デザインで、画面はもっと使いやすくなる
- h3 · 18/1.3デザインで、画面はもっと使いやすくなる
- body · 16/1.5デザインで、画面はもっと使いやすくなる
- small · 13/1.4デザインで、画面はもっと使いやすくなる
角の半径、余白、影
角の半径sm 16pxmd 18pxlg 20pxxl 24px
余白xs 4pxsm 8pxmd 16pxlg 24pxxl 48px
影低く広がるやわらかな影。カードとシートにだけ使います。
レイアウト
- タッチ領域
- 48px
- タブバー
- 64px、4 項目、icons with labels
- 画面の余白
- 20px
- ナビゲーション
- bottom tab bar; full-bleed photo headers
- 数字
- proportional
向いている用途
- 旅行予約と旅程プランナー
- ホテルと貸別荘のアプリ
- 街歩きガイドとツアー
- 航空会社と鉄道の連携アプリ
やること・やらないこと
- 目的地の画面は、全幅の写真で始める。
- 予約ボタンの前に、税込みの合計金額を示す。
- 本文にセリフ体を使わない。地名とタイトルのために取っておく。
- にぎやかな写真の上に、暗いスクリムなしで文字を置かない。