Voyage: Reise-App-Designsystem
App · Hell · Warm · Serifen · ReisenVoyage
Randlose Fotos, Ozeanblau und eine Serife, die sich wie eine Postkarte anfühlt.
Voyage verkauft zuerst das Reiseziel: randlose Foto-Header, eine Postkarten-Serife für Ortsnamen, Ozeanblau fürs Buchen und Sonnenuntergangsorange für Angebote. Unter den Fotos wird es praktisch, mit klaren Daten, Preisen und Reiseplänen auf warmem Sandweiß.
Vorschau
Live aus den Tokens unten gerendert, in den Schriften des Systems.
9:41
Guten MorgenHeuteWochenziel4 von 5 TagenAls NächstesMorgenroutine15 Min.Team-Check-in30 Min.Abendrückblick10 Min.
StartStatistikPlanIch9:41
Diese WocheGesamt7,842+12 % ggü. VorwocheSession starten
StartStatistikPlanIch9:41
EinstellungenMitteilungenTägliche ErinnerungenEinheitenMetrisch
StartStatistikPlanIchIn deinem Projekt verwenden
Füge das in Codex oder Claude Code ein. Der Agent speichert die Spezifikation als DESIGN.md und hält sich ab dann daran.
Dieses Projekt verwendet das Designsystem Voyage. Die Spezifikation liegt unter https://codexdesign.io/de/design-systems/voyage.md. Speichere sie als DESIGN.md im Projektstamm und halte dich ab jetzt bei jedem Screen daran.
Tokens
Farben
Helles 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)
Dunkles 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)
Schriften
- Überschriften
- DM Serif Display · 400
- Fließtext
- Manrope · 500
- Monospace
- JetBrains Mono
Schriftgrößen
- display · 44/1.05 · -0.01emZwölf Boxkämpfer jagen Viktor
- h1 · 32/1.1Zwölf Boxkämpfer jagen Viktor
- h2 · 24/1.2Zwölf Boxkämpfer jagen Viktor
- h3 · 18/1.3Zwölf Boxkämpfer jagen Viktor
- body · 16/1.5Zwölf Boxkämpfer jagen Viktor
- small · 13/1.4Zwölf Boxkämpfer jagen Viktor
Radius, Abstände und Schatten
Eckenradiussm 16pxmd 18pxlg 20pxxl 24px
Abständexs 4pxsm 8pxmd 16pxlg 24pxxl 48px
SchattenWeich, flach und breit, nur auf Karten und Sheets.
Layout
- Touch-Ziele
- 48px
- Tab-Leiste
- 64px, 4 Einträge, icons with labels
- Bildschirmrand
- 20px
- Navigation
- bottom tab bar; full-bleed photo headers
- Ziffern
- proportional
Ideal für
- Reisebuchung und Reiseplaner
- Hotel- und Ferienwohnungs-Apps
- Stadtführer und Touren
- Begleiter für Flug und Bahn
Dos and Don’ts
- Eröffne Reiseziel-Screens mit einem randlosen Foto.
- Zeige vor dem Buchen-Button den Gesamtpreis inklusive Steuern.
- Setze keine Absätze in der Serife; behalte sie für Namen und Titel.
- Lege keinen Text ohne dunkle Abdeckung auf unruhige Fotos.
Weitere Designsysteme für Apps
- StrideAppGroße kondensierte Zahlen und ein energiegeladenes Orange für Bewegungs-Apps.Überschriften in Barlow Condensed
- PantryAppWarm, freundlich und appetitlich, für Essens- und Bestell-Apps.Überschriften in Bricolage Grotesque
- CalmAppSanftes Salbeigrün, eine milde Serife und Raum zum Atmen.Überschriften in Newsreader