TRAVELER / DESIGN SYSTEM — V1.0 / NOV 2026

An atlas
in motion.

A visual language for a route that becomes a film. Warm paper against deep ink, an editorial serif over a living globe, and a single international-orange signal for everything that moves.

TYPEINSTRUMENT SERIF / INTER TIGHT / IBM PLEX MONO
ACCENT#FF4D1C · INTERNATIONAL ORANGE
GRID12 COL / 24 PX GUTTER / 32 PX MARGIN
MOTIONCUBIC-BEZIER(.2, .8, .2, 1)
INK#0A0A0B
SURFACE#141416
PAPER#F3EFE5
SIGNAL#FF4D1C
ACID · STATUS#D9FF57
CHROME#B9B4A7
01 / PRINCIPLES

Four rules, kept.

THE SHORT VERSION
01

Motion is
the medium.

The globe is never a static image. Routes draw, vehicles move, arcs breathe. Interface chrome must never freeze the frame.

02

Chrome
recedes.

Panels are dark, quiet glass at the edges. The map keeps the centre; no opaque surface ever covers the current stop.

03

One
accent.

Orange means action or “now”: play, current leg, apply, export. Everything else is ink, paper, or a hueless grey.

04

Type does
the talking.

Instrument Serif for feeling, Inter Tight for doing, Plex Mono for data. Labels are small, tracked, and never decorative.

02 / COLOR

Ink, paper, signal.

SIX TOKENS · NO GRADIENTS ON TEXT
INK / CANVAS
Ink#0A0A0B

The globe canvas, app shell, and every dark surface. Never pure black.

PAPER / LIGHT
Paper#F3EFE5

Editorial sections, mobile manifest, admin. Warm, never clinical white.

SIGNAL / ACTION
International Orange#FF4D1C

Play, current leg, primary action, live dot. The only saturated accent.

ACID / STATUS ONLY
Acid#D9FF57

Saved, online, ready. A status signal — never a button colour.

CHROME / METADATA
Chrome#B9B4A7

Secondary labels, coordinates, dividers on paper. Quiet, warm grey.

SURFACE / GLASS
Surface#141416 / 68%

Floating panels: 24 px blur, 13% hairline, 20 px radius.

Contrast. Paper or bone text on ink measures above 14:1. Orange on ink is used for large type and icons only; body copy stays at 62% bone.
Never use cyan/magenta neon, pure white surfaces, or two accents in one panel. Grain is 5% overlay, fixed, pointer-events none.
03 / TYPOGRAPHY

Feeling, doing, data.

THREE VOICES · ONE HIERARCHY
The world
moves here.
DISPLAY
Aa Gg 01
INSTRUMENT SERIF / 400 / ITALIC

Hero lines, route titles, big numbers. Tight tracking, 0.82–0.95 leading, italic for the emotional word.

INTERFACE
Aa Gg 01
INTER TIGHT / 300–600

Buttons, rows, dialogs, navigation. 12–14 px body, 11 px controls, negative tracking on large sizes.

DATA
Aa 01:24
IBM PLEX MONO / 400–500

Timecode, coordinates, durations, labels. 7–10 px, 0.12–0.2 em tracking, always uppercase.

DISPLAY / HEROMake the world move.138–174 PX · −4% TRACKING
DISPLAY / TITLEThe Long Way East46–104 PX · −2.5%
DISPLAY / PANELGrand Tour 0126–31 PX · −1.5%
UI / BODYDrop a pin. Choose a vehicle. Cut the film.14 PX / 1.6 · 0 TRACKING
DATA / LABEL35°41′N 139°41′E — FL 380 — 928 KM/H8–10 PX · 0.14 EM · UPPER

Chinese copy uses PingFang SC / Noto Sans SC at +0.06 em tracking; never set Chinese in Instrument Serif. English labels may stay uppercase; Chinese labels do not.

04 / GRID & SPACE

Room to orbit.

12 COLUMNS · 24 PX GUTTER
MARGIN 32GUTTER 24CONTENT 1376
04
08
12
16
24
32
48
64
96
6 / CHIP
10 / INPUT
14 / CARD
20 / PANEL
999 / PILL
ManifestLEFT 32 · TOP 104
332 × AUTO · RADIUS 20
Light tableRIGHT 32 · TOP 104
132 WIDE · 3 TILES
Editor dockLEFT/RIGHT 32 · BOTTOM 24
156 TALL · RADIUS 20
AI commandCENTER · BOTTOM 196
548 × 56 · PILL
05 / COMPONENTS

A small, honest kit.

EVERYTHING IS 44 PX TOUCH-SAFE ON MOBILE
BUTTONS / 40 PXRADIUS 999

SIGNAL = COMMIT · BONE = QUIET COMMIT · GHOST = CANCEL · ICON = TOOL

CHIPS & STATUS30 PX
LIVE · 60 FPS PROPOSAL SAVED

MONO 9.5 / 0.12 EM. ACID IS STATUS; ORANGE IS ACTION OR NOW.

SEGMENT & AVATAR40 / 34 PX
G

CAMERA MODE LIVES IN THE TOP CENTRE ON DESKTOP, IN THE DOCK UNDER 1100 PX.

MANIFEST ROW48 PX / ACTIVE
TokyoJAPAN · STOP 03
03:12
AIR

ACTIVE = 11% ORANGE + 2 PX INSET BAR. THE THUMB IS THE PHOTO, NOT AN ICON.

TIMELINE CLIP58 PX TALL
TYO → SIN03:12

WIDTH = PLAYING TIME, NEVER UNDER 44 PX. THE PLAYHEAD IS 1 PX ORANGE.

MAP PINPAPER ON GLOBE
Paris48.8566° N · 13:08

THE ONLY LIGHT SURFACE ALLOWED OVER THE GLOBE. EVERY PIN HAS A COORDINATE.

AI COMMAND56 PX
Ask Traveler to shape this route…

⌘K FOCUSES; ENTER OPENS THE CHAT AND SENDS. NOTHING APPLIES WITHOUT CONFIRM.

TOGGLES36 × 20
NOWREADY

ON = ACID FOR PREFERENCES, ORANGE FOR LIVE PLAYBACK. OFF = 16% BONE.

ICON SET1.5 PX STROKE

ROUNDED CAPS, 24 PX GRID, CURRENTCOLOR. NO DUOTONE, NO FILLED SHAPES EXCEPT PLAY.

06 / MOTION

Slow arcs, fast feedback.

RESPECT REDUCED MOTION
01 / ARRIVE

Panels rise.

Chrome enters 18 px low and fades over 900 ms. Stagger 60–80 ms by cluster: manifest, globe, dock, AI.

FADE-UP · 900 MS · BOTH
02 / DRAW

Arcs travel.

Route dashes run forever at 14 s; orbit rings rotate at 42 s. Motion implies distance, never urgency.

DASH 3 7 · OFFSET −240 · 14 S
03 / RESPOND

Hovers snap.

Buttons and rows answer in 240 ms. Scale is reserved for presses (0.975) and play (1.05).

HOVER · 240 MS · EASE(.2 .8 .2 1)
04 / STILLNESS

Reduced means still.

prefers-reduced-motion removes loops, marquees and reveals. No essential state is conveyed by motion alone.

ANIMATION: NONE · TRANSITION: NONE
One easing curve for the whole system: cubic-bezier(.2, .8, .2, 1) Durations: 160 / 240 / 420 / 900 ms. Nothing bounces.