Voyage: Travel App Design System

App · Light · Warm · Serif · Travel

Voyage

Full-bleed photos, ocean blue and a serif that feels like a postcard.

Voyage sells the destination first: full-bleed photo headers, a postcard serif for place names, ocean blue for booking and sunset orange for deals. Below the photos it turns practical, with clear dates, prices and itineraries on warm sand-white.

Preview

Rendered live from the tokens below, in the system's own fonts.

9:41

Good morningTodayWeekly goal4 of 5 daysUp nextMorning routine15 minTeam check-in30 minEvening review10 min

HomeStatsPlanMe

9:41

This weekTotal7,842+12% vs last weekStart session

HomeStatsPlanMe

9:41

SettingsNotificationsDaily remindersUnitsMetric

HomeStatsPlanMe

Use it in your project

Paste this into Codex or Claude Code. The agent saves the spec as DESIGN.md and follows it from then on.

This project uses the Voyage design system. Its spec is at https://codexdesign.io/design-systems/voyage.md. Save it as DESIGN.md in the project root and follow it for every screen from now on.

Tokens

Colors

Light theme

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)

Dark theme

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)

Fonts

Headings: DM Serif Display · 400
Body: Manrope · 500
Monospace: JetBrains Mono

Type scale

display · 44/1.05 · -0.01emThe quick brown fox
h1 · 32/1.1The quick brown fox
h2 · 24/1.2The quick brown fox
h3 · 18/1.3The quick brown fox
body · 16/1.5The quick brown fox
small · 13/1.4The quick brown fox

Radius, spacing and shadow

Corner radiussm 16pxmd 18pxlg 20pxxl 24px

Spacingxs 4pxsm 8pxmd 16pxlg 24pxxl 48px

ShadowSoft, low and wide, on cards and sheets only.

Layout

Touch targets: 48px
Tab bar: 64px, 4 items, icons with labels
Screen padding: 20px
Navigation: bottom tab bar; full-bleed photo headers
Numerals: proportional

Voyage: Travel App Design System

Preview

Use it in your project

Tokens

Colors

Light theme

Dark theme

Fonts

Type scale

Radius, spacing and shadow

Layout

Best for

Do's and don'ts

More design systems for apps