Skip to content

Forget the headache and enjoy your time.

Voyager turns a short conversation into a calm, usable trip. This book shows how it looks, sounds and moves.

Download the markRead the story
بيت الإبرةbayt al-ibra, the house of the needle

One calm day with Voyager

Proposed
Follow a sample day in Kyoto, from the first question to the last stop. Places and times are illustrative.

How to read this book

Approved
Recorded as agreed by the owner.
Proposed
New in this brand system, awaiting your approval.

  1. A short conversation

    Who is travelling?
    Just me
    Two of us
    Family with children

    Planning for: Two of us

    Every question comes with three suggested answers and room for your own.

  2. Three ways to spend it

    • Visitors walking up Sannenzaka, a sloping lane of tiled wooden shopfronts with hanging signs.
      Chosen

      Temples and slow lanes

      Unhurried

      Kiyomizu-dera before the crowds, then the stone lanes of Higashiyama on foot.

    • Markets and kitchens

      Lively

      Nishiki Market in the morning and a cooking class after lunch.

    • Gardens and rest

      Restful

      Two quiet gardens, a long lunch and an early night.

    Three different days, not three hotels.

  3. One day, one tile

    An empty stone lane in Higashiyama at dawn, lit lanterns on wooden houses and the Yasaka pagoda rising under a grey sky.

    Day 2

    Kyoto

    Morning
    1. Kiyomizu-dera
      Visited
    2. Sannenzaka lanes
      Planned
    3. Lunch in Higashiyama
      Booked
    Afternoon
    1. Yasaka Shrine
      Planned
    2. A tea ceremony
      Booked
    3. Gion at dusk
      Planned

    Planned, booked and visited never look the same.

  4. In both languages

    English

    Your tea ceremony is booked

    Arrive in Higashiyama by .

    Your ticket is saved in Voyager and works offline.

    Sample interface copy. The booking and the ticket are illustrative.

    العربية

    تم حجز جلسة الشاي

    احرص على الوصول إلى هيغاشياما قبل .

    تذكرتك محفوظة في Voyager وتعمل دون اتصال.

    نص تجريبي للواجهة. الحجز والتذكرة للتوضيح فقط.

    Arabic has its own words and direction, not a translated heading.

  5. Enjoy your time

    A quiet cobbled street in Gion between wooden houses with bamboo screens, willow leaves catching the afternoon sun.

    Leave room to sit for a while.

    Voyager holds the direction, so you can look up.

Colour

Approved

Six brand colours and their roles were approved on 26 September: warm paper, ink, terracotta, a deeper action tone, amber and sage, with a quiet border #DAD9D4 for dividers.

The proportions, ramps, semantic tokens and dark theme built from those six are proposed. Every contrast figure here is measured, not estimated.

Six colours, in proportionProposed

The hex values and roles are approved. How much of each a screen uses is a proposal.
60%

Paper

Page. A quiet background for photographs and useful content.

Let paper do most of the work and ink carry the words. Terracotta marks the one thing that matters on a screen, and Action, its deeper tone for buttons and links, shares that tenth. Amber and sage appear only where they mean something: a highlight, a confirmation. If a view feels orange, remove terracotta until only the action and the mark keep it.
sand-50
25%

Ink

Text. Primary text and line artwork.

sand-800

Terracotta10%

Brand accent. Small identity accents.

Action

Primary action. Buttons with white text.

Amber2.5%

Supporting accent. Illustrated objects and gentle status backgrounds.

Sage2.5%

Supporting accent. Illustrated objects and gentle status backgrounds.

RampsProposed

Eleven steps per hue, built around the approved brand colours, which stay pinned at their own values. The marked steps are those colours; the steps between are derived from them, so lightness and hue shift a little where a pin sits. Press any step to copy its hex and see its OKLCH value.

terracotta

The accent. Small identity moments, focus rings and the mark. Links and buttons use Action (600).

500 Terracotta600 Action

50
100
200
300
400
500
600
700
800
900
950

amber

Warm support for highlights and warnings.

300 Amber

50
100
200
300
400
500
600
700
800
900
950

sage

Calm support for confirmed, booked and success states.

400 Sage

50
100
200
300
400
500
600
700
800
900
950

sand

The warm neutral that carries most of the interface.

50 Paper800 Ink

50
100
200
300
400
500
600
700
800
900
950

Semantic tokensProposed

Components never reference a ramp step directly. They use these role tokens, which repoint for the dark theme while the primitives stay fixed. Each swatch shows light on the left and dark on the right.

  • The page canvas: warm paper by day, night sand after dark.

    Light
    sand-50
    Dark
    sand-950

  • Cards, tables and accordions that sit on the page.

    Light
    Custom
    Dark
    sand-900

  • Recessed areas inside a surface, such as group rows.

    Light
    sand-100
    Dark
    sand-800

  • Deeper insets and loading skeletons.

    Light
    sand-200
    Dark
    sand-700

  • Popovers, menus, dialogs and toasts that float above the page.

    Light
    Custom
    Dark
    sand-900

  • Neutral controls: secondary buttons, chips, tracks and hovers.

    Light
    sand-100
    Dark
    sand-800

  • Inputs, selects and text areas.

    Light
    Custom
    Dark
    sand-900

  • The selected tab and segmented control thumb.

    Light
    Custom
    Dark
    sand-700

  • A soft terracotta wash for highlighted stops, brand chips and selected rows.

    Light
    terracotta-100
    Dark
    terracotta-900

Contrast

Ratios are WCAG 2 luminance contrast, measured with culori from the token values. A pair passes when it clears AA for body text.

AA 4.5:1
Body text and labels
AA large 3.0:1
Text from 24px, or 18.5px bold, and UI components
AAA 7.0:1
Long reading and small text

Light theme

  • Paper#FAF9F5sand-50

    • Ink10.98:1Pass
    • Muted text4.91:1Pass
    • Terracotta text5.22:1Pass

  • Action#AD4B2Dterracotta-600

    • White5.50:1Pass

  • Terracotta#C96442terracotta-500

    • White3.90:1Fail

  • Amber#FFC469amber-300

    • Ink7.35:1Pass

  • Sage#98C598sage-400

    • Ink5.93:1Pass

Dark themeProposed

  • Night#1C1B17sand-950

    • Paper14.71:1Pass
    • Muted10.06:1Pass
    • Terracotta text7.09:1Pass

  • Terracotta#F38A67terracotta-400

    • Night7.09:1Pass

Type

Approved

Fraunces, Inter and Caveat were approved on 26 September, and Baloo Bhaijaan 2 on 1 October. Fraunces gives headlines a warm editorial voice, Inter carries the interface, Baloo Bhaijaan 2 sets every Arabic line and Caveat adds the occasional handwritten note.

The Manrope wordmark and the type scale are proposed.

Families

Kyoto, day two

Temples in the morning, tea in the afternoon, Gion at dusk.

Fraunces

Approved

Display headings and editorial moments

Fraunces, "Baloo Bhaijaan 2", Georgia, serif
Booked

A tea ceremony

Leave Yasaka Shrine by 14:05. About 15 minutes on foot.

Sample stop from the Kyoto day. Interface copy only.

Inter

Approved

Interface text, body, data

Inter, system-ui, sans-serif

أبجد

تبدأ رحلتك من هنا. خطّط لكل يوم، وشارك الخطة مع كل من يسافر معك، في مكان واحد وبهدوء.

Baloo Bhaijaan 2

Approved

All Arabic text, rounded and warm, with its own line height

'Baloo Bhaijaan 2', Inter, Tahoma, sans-serif

Gion at dusk

Walk Shirakawa lane as the lamps come on, then find somewhere to sit by the canal.

Bring a jacket

Caveat

Approved

Short handwritten notes only, never instructions

Caveat, cursive

Manrope Bold

Proposed

The voyager wordmark in lockups

Outlined paths

Type scale Proposed

Eight steps, set as one page of a trip. Display sizes tighten tracking as they grow. Body sizes keep it at zero, h3 tightens slightly and captions open up a little. Rendered live from the tokens.

Fraunces

Kyoto, at your pace

56px / 1.05, -0.04em, 500

Day two in Higashiyama

40px / 1.1, -0.035em, 500

The morning

30px / 1.15, -0.03em, 500

Inter

Kiyomizu-dera

20px / 1.3, -0.01em, 600

Arrive before the lanes fill up, then walk down through Sannenzaka when you are ready.

17px / 1.6, 0, 400

Leave by 10:15 to reach the Sannenzaka lanes at an easy walk. Lunch is booked for 12:00.

15px / 1.6, 0, 400

The lanes are a plan, not a reservation.

13px / 1.5, 0, 400

Updated a few minutes ago

12px / 1.4, 0.02em, 500

Sample itinerary. Places and times are illustrative.

Rules

Grouped by script, plus how numbers behave in each.

Latin

Fraunces for headlines, Inter for the interface, Caveat for notes.

Fraunces for display only

Headlines, trip titles and editorial moments. Never body copy, labels or controls.

Your itinerary

Everything below the headline is Inter.

Inter for everything interactive

Buttons, inputs, menus, tabs and data. One face for everything a person can press keeps controls predictable.

Caveat for short notes only

A personal aside on a plan. Never instructions, errors, buttons or anything a person must act on.

Bring a jacket

Do
Confirm bookingAvoid

Arabic

Baloo Bhaijaan 2, set right to left with its own line height.

Arabic is never letter-spaced

Arabic letters join, so tracking breaks words apart. Set Baloo Bhaijaan 2 at line height 1.7 for its taller marks.

Do

رحلة هادئة إلى العُلا

Avoid

رحلة هادئة إلى العُلا

The brand name stays Latin

Inside Arabic text, Voyager is written in Latin letters and isolated so it keeps its own direction.

خطّط رحلتك القادمة مع Voyager وشاركها مع عائلتك.

Numbers

Arabic shows Arabic-Indic numerals. Codes stay Latin in both languages.

Isolate numerals and times

Arabic times, dates and counts use Arabic-Indic digits, while flight numbers and other codes stay Latin. Each is wrapped in bdi so it reads correctly in either direction.

الإقلاع الساعة ٠٩:٤٠ على الرحلة SV 1024

Departs 09:40 on SV 1024

Together

The same trip card in English and Arabic. Each language keeps its own face, rhythm and direction, and shares the colour, spacing and controls.

Family trip

Five days in AlUla

A calm route through the Old Town and Elephant Rock, with time to rest before sunset.

  • 12 to 16 October, 4 travellers
  • Check-in from 15:00
Bring a jacket
رحلة عائلية

خمسة أيام في العُلا

مسار هادئ بين البلدة القديمة وصخرة الفيل، مع وقت كافٍ للراحة قبل الغروب.

  • من ١٢ إلى ١٦ أكتوبر، ٤ مسافرين
  • تسجيل الوصول من الساعة ١٥:٠٠
خذ معك سترة
Sample trip. Dates, travellers and check-in time are illustrative.

Patterns

Proposed
Four graphic devices grown from the mark: its needle, its trailing band, the star compass of the Indian Ocean navigators and the Sadu weaving of the peninsula. Lines are drawn in currentColor, so they follow the theme. The star compass ray and the Sadu triangles keep their terracotta and amber. None ever sits behind body text.

Route lines

Parallel lines at 45 degrees with equal band and gap. The path behind you, as a quiet modern texture.

  • Use on section backgrounds, cards that need a surface and hatched placeholders.
  • Keep it between 4 and 8 percent opacity, and fade it at the edges.
  • Never behind body text or under the mark.
The lines fade from a strong drawing on the left to 6 percent on the right, the strength they are used at.Plate #FAF9F5 in light, #333331 in dark.
An enlarged crop at 35 percent so the needles read. In use it sits at 6 to 12 percent.Plate #FAF9F5 in light, #333331 in dark.

Needle field

Small needles on an offset grid, every one pointing up and to the right. Many places, one direction.

  • Use on empty states, onboarding backgrounds and packaging.
  • Ink or paper at 6 to 12 percent opacity, never in terracotta.
  • Never behind body text. Fade it out before content starts.

Where to next?

Night plate #1C1B17 on a light page, lifted to #333331 on a dark one. Paper hairlines, and only the forward ray in terracotta.

Star compass

A 32 point compass card in the tradition of Ahmad ibn Majid, whose directions were named after star risings and settings. The 45 degree ray is Voyager's heading.

  • Use as a single large hero or background graphic, cropped at an edge is fine.
  • Hairlines in ink or paper with only the forward ray in terracotta.
  • One per view. Never tiled, never behind body text.

Sadu band

A border strip inspired by Al Sadu, the Bedouin weaving of Saudi Arabia on the UNESCO list of intangible heritage. Rows of triangles and diamonds in terracotta, amber and ink.

  • Use for edges and dividers: a card top, a ticket stub, a footer rule.
  • Always full width at its drawn size, never scaled into a large field.
  • One band per surface, and never behind text.

Day 2, Kyoto

A tea ceremony

Booked
Sample ticket. Place and time are illustrative.The rule above this chapter and the footer of this book use the same band.

Photography

Proposed
Calm, real places, soft light, room to breathe. People are seen travelling, not posing.
An empty stone lane in Higashiyama at dawn, lit lanterns on wooden houses and the Yasaka pagoda rising under a grey sky.
Yasaka-dori and Hokan-ji pagoda, KyotoDawn light and an empty lane. The sky leaves room for a headline.

Use

  • Soft natural light, morning or late afternoon.
  • Real places, as they are.
  • Space for type: open sky, a quiet lane.

Morning light, before the crowds.

A quiet cobbled street in Gion between wooden houses with bamboo screens, willow leaves catching the afternoon sun.
Gion, KyotoWarm side light on wood and bamboo, close to the brand's own colours.
The wooden stage of Kiyomizu-dera standing over red and orange autumn maples, with the city and mountains beyond.
Kiyomizu-dera, KyotoAutumn reds run hot next to terracotta, so keep this one small.

Avoid

  • Flash, or any hard light.
  • Crowds as the subject.
  • Staged smiles and looks at the camera.
Visitors walking up Sannenzaka, a sloping lane of tiled wooden shopfronts with hanging signs.
Sannenzaka, KyotoVisitors seen from behind, on their way up the lane. Travelling, not posing.
The vermilion and white main hall of Yasaka Shrine under a curved bark roof, with a few visitors on the stone forecourt.
Yasaka Shrine, KyotoFlat grey light. Fine as a small reference, never as a wide band.

Credits

Photographs from Wikimedia Commons, retrieved 26 September 2026, as reduced-size copies. No edits beyond resizing and compression for the web; the page may show them with a CSS crop.

Foundations

Proposed

The quiet layer under every screen: radius, elevation, spacing, motion and icons. Every value here is a live token that follows the theme, and the radius, elevation and motion panels can be tried.

Radius

One scale, from 4px tags to 24px hero surfaces. Drag the sliders to see why nested corners add up.

  1. xs4px

  2. sm6px

  3. md10px

  4. lg14px

  5. xl18px

  6. 2xl24px

  7. icon23%

  8. pill999px

Controls
radius-xs Tags inside chips, tiny indicators
radius-sm Badges, small buttons, inputs inside cards
radius-md Buttons, inputs, menus (the default)
Surfaces
radius-lg Cards, popovers
radius-xl Panels, dialogs, sheets
radius-2xl Hero surfaces, marketing blocks
Special shapes
radius-icon App icon and mark tile (a squircle)
radius-pill Pills, switches, avatars

Outer radius = inner radius + padding

Nested surfaces share a centre for their curves. Past 24px of padding, treat the layers as separate surfaces.

Inner radiusradius-md10px
Padding8px
Kiyomizu-deraDay 2, 09:00
Concentric10 + 8 = 18px
Kiyomizu-deraDay 2, 09:00
Same radius10px on both layers

Shadows and elevation

Shadows lift surfaces. They switch with the theme, becoming a fine light ring in the dark where soft shadows disappear.

  1. 09:00Kiyomizu-dera
  2. 10:30Sannenzaka lanes
  3. 12:00Lunch in Higashiyama
  4. 13:30Yasaka Shrine
  5. 15:00A tea ceremony
  6. 17:00Gion at dusk
Sample stops from a day in Kyoto, each one step higher than the last. Hover the first stop for shadow-border-hover.

  • Cards, buttons and containers. A shadow that acts as a border and adapts to any surface.

  • The hover state of anything using shadow-border.

  • Inputs and small controls that sit just above the page.

  • Resting cards that need a little more lift than a border.

Shadow for depth

Cards and buttons use shadow-border. It is transparent, so it reads the same on paper, on a photo or in the dark theme.

Five days in AlUla

Hover to see shadow-border-hover

Border for structure

Dividers, table lines and inputs keep a real border. They separate or enclose content rather than lift it.

  • 09:00Old Town walk
  • 13:30Lunch at the oasis
  • 17:45Sunset at Elephant Rock

Spacing

A four-pixel base in three bands. Small steps sit close inside controls; the large steps separate sections.

Inside controls

Icon gaps, chip padding and the room inside a button.

  • space-14px
  • space-28px
  • space-312px

Between items

Stops in a list, fields in a form, cards in a row.

  • space-416px
  • space-524px
  • space-632px

Between sections

Blocks of a page and the parts of a day.

  • space-748px
  • space-864px
  • space-996px

Motion

Motion confirms an action and shows where something came from. It is short, never bounces and always has a static cue beside it.

Durations

  • duration-fast160ms
    Hover, press, toggles
  • duration-base220ms
    Menus, popovers, tabs
  • duration-slow320ms
    Dialogs, sheets, page sections

Easings

  • ease-outThings entering and responding
  • ease-in-outThings moving on screen

Try it with the needle

The curves run at 320ms, then each duration runs on ease-out. With reduced motion on, the needles jump straight to their heading.

ease-out320ms
ease-in-out320ms
duration-fast160ms
duration-base220ms
duration-slow320ms

Every needle settles on north-east.

Icons

One library: Phosphor

Proposed

Regular weight, drawn in currentColor. States change colour, never the asset. These are the travel icons this book uses.

Day states
  • Planned
  • Booked
  • Visited
Getting around
  • Walk
  • Train
  • Car
  • Directions
Actions
  • Save
  • Language

Three sizes

  • 16pxInline with small text, table cells
  • 20pxButtons, inputs, menu items
  • 24pxNavigation and standalone actions

One weight beside any text

Yasaka Shrine, KyotoYasaka Shrine, Kyoto

Duotone only for large spot icons, such as an empty day waiting for its first stop.

Components

Proposed
HeroUI v3 components themed with the Voyager tokens (radius, shadows, colour, motion) for the web, admin and future apps. The interactive samples work: press Book tea ceremony, open the menus and dialogs, try the toasts and tick the checklist. The other buttons show styles only. The copy is sample interface copy: trips, bookings, payments and features shown are illustrative.

Composition

The proof that the system works in product UI: today's plan in Kyoto.

Today in Kyoto

Day 2 of 6

  1. Kiyomizu-dera

    Visited

    Higashiyama 75 min

    Time for the view before the streets get busy.

  2. Next

    Lunch in Higashiyama

    Booked

    Higashiyama 60 min

    Table for two, kept short so the afternoon stays calm.

  3. A tea ceremony

    Booked

    Higashiyama 45 min

    Arrive by 14:20. Shoes off at the door.

  4. Gion at dusk

    Planned

    Gion 60 min

    Keep the rest of the evening flexible.

Before you head out

2 of 4 ready

Frame

Card
The day as one surface, header, content and footer
Separator
Structure without extra boxes

Actions

Dropdown
Day options behind one quiet icon
Button and Tooltip
One primary action, one labelled secondary

State

Chip
Stop state, with an icon and a written label
Checkbox
Preparation list with 44 px rows
Progress bar
Derived from the checklist, never stored twice

Tick a box. The bar follows.

A traveller's day, built only from the components below and the brand tokens. No one-off styles.Sample itinerary. Places, times and bookings are illustrative.

Buttons

Controls are 10 px rounded. Primary uses Action on paper and terracotta 400 in dark. A press scales to about 0.97 in 160 ms on the brand curve.

Variants

One primary action per view

States

Press one to see loading

Sizes

32, 40, 44 px

With icons

Icon side is 2 px tighter

Icon only, always labelled, with a tooltip

Form controls

Inputs keep a real border for accessibility. Helper text sits below the field; errors say what to do next.

Only you and your travel group see this.
Enter a full address, like name@example.com.
Start the day in
Optional. A person reads this, not only the planner.
Travel pace
Two or three stops, long breaks
Four stops with room to wander
Early starts, more to see
Before you go
Download Kyoto on Wi-Fi before you leave.
SAR 450
Per person, excluding flights and hotels.

Status and feedback

Planned, Booked and Visited always pair an icon with a word. Colour supports the state, it never carries it alone.

Itinerary states

Icon and word carry the meaning

Planned
In the plan, nothing reserved yet.
Booked
Reserved and confirmed by the provider.
Visited
Done. Kept for memories and receipts.

Alerts

Hue lives in the icon only

Train times updated

Your 09:12 to Arashiyama now leaves from platform 32.

Tea ceremony booked

Your ticket is saved and works offline.

Nijo Castle closes at 16:00

Last entry is 30 minutes earlier. Move it up or keep it short.

Payment did not go through

Nothing was charged. Try another card or ask your concierge.

Badges and toasts

Short, factual labels

NewDraftOptionalConcierge pickConfirmedCloses earlyCancelled

Toasts sit at the bottom centre. Swipe to dismiss.

Progress and loading

Trip preparation3 of 5 ready

Overlays

Menus and popovers are 14 px rounded with a large shadow. Dialogs are 24 px. Menus and popovers enter in 220 ms, dialogs in 320 ms, both on the brand curve, and all exit faster.

  • Dialog, focused edits

  • Dropdown menu, actions and view options

  • Popover, context in place

  • Tooltip, names for icon buttons

Navigation and data

Tables use hairline dividers and tabular numbers. Times are wrapped for bidirectional isolation.

Higashiyama and Gion

TimeStopState
Kiyomizu-deraVisited
Lunch in HigashiyamaBooked
A tea ceremonyBooked
Gion at duskPlanned

Voyager moves the stops after it and tells you what changed. Anything booked stays where it is until you or your concierge confirm a new time.

Avatars and separator

NAFALH+2

5 travellers

Noura, Faisal, Leila and 2 more

Sample travel group. Names are illustrative.

Voice

Proposed
How Voyager sounds in English and Arabic: calm, precise, warm and honest. The tagline is approved; the principles and word list are proposed.

Principles

Words we use

Instead of Secured, we say Booked

Booked means confirmed, nothing more.

  • Instead of Optimised itinerary, we say Plan

    Plain words travel further.

  • Instead of Must-see, we say Suggestion

    The traveller decides what matters.

  • Instead of Downtime, we say Free time

    Rest is part of the trip.

  • Instead of Submit a ticket, we say Ask your concierge

    A person answers.

  • Instead of Oops, something went wrong, we say Try again

    Name the next step, skip the cute.

  • Instead of Guaranteed on time, we say About 20 minutes

    Never promise what we do not control.

In English and Arabic

One delay, written for each reader rather than translated word for word. Both sides stay precise about the times and honest about what could still change, and every time is isolated so it reads correctly inside Arabic.

English

Your train is running about 20 minutes late

The 10:05 to Arashiyama now leaves at about 10:25. Your 11:30 boat is still on time, with about 15 minutes to spare. We will tell you if that changes.

Updated at 09:52

العربية

قطارك متأخر نحو ٢٠ دقيقة

قطار ١٠:٠٥ إلى أراشيياما يغادر الآن قرابة ١٠:٢٥. رحلة القارب في ١١:٣٠ ما زالت في موعدها، ويبقى لديك نحو ١٥ دقيقة. سنخبرك إن تغيّر ذلك.

آخر تحديث ٠٩:٥٢

Sample interface copy. The train, the times and the boat are illustrative.

Forget the headache and enjoy your time.

ApprovedTagline, from the original specification, VOYAGER.md.