Voyage: 여행 앱 디자인 시스템
App · Light · Warm · Serif · TravelVoyage
꽉 찬 사진, 오션 블루, 엽서 같은 세리프.
Voyage는 여행지를 먼저 팝니다. 꽉 찬 사진 헤더, 지명에는 엽서 같은 세리프, 예약에는 오션 블루, 특가에는 선셋 오렌지. 사진 아래에서는 따뜻한 샌드 화이트 위에 날짜, 가격, 일정이 또렷하게 나오는 실용적인 화면이 됩니다.
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
HomeStatsPlanMe9:41
This weekTotal7,842+12% vs last weekStart session
HomeStatsPlanMe9:41
SettingsNotificationsDaily remindersUnitsMetric
HomeStatsPlanMeUse 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/ko/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
Best for
- 여행 예약·일정 플래너
- 호텔·휴가용 숙소 앱
- 도시 가이드와 투어
- 항공·기차 컴패니언
Do's and don'ts
- 여행지 화면은 꽉 찬 사진으로 시작하세요.
- 예약 버튼 앞에 세금을 포함한 총액을 보여 주세요.
- 본문 단락에 세리프를 쓰지 마세요. 이름과 제목에만 쓰세요.
- 복잡한 사진 위에는 어두운 스크림 없이 텍스트를 올리지 마세요.