WayfareOne conversation. The whole journey.
Wayfare / Noodle Seed’s conversational travel demo
Wayfare brand guidelines
29 visual studies spanning brand foundation, identity, color, typography, imagery, product interfaces, and MCP apps. Wayfare is a demo within Noodle Seed’s travel vertical offering. These studies document its visual system and use the actual demo assets. Interface specimens use illustrative data; the flight-results capture uses the real component with test fixtures.
Download the PDF ↓ · Get the complete written specification ↓Wayfare
WayfareFor the globally curious.
A demo of agentic travel for Noodle Seed’s travel vertical. Worldly, optimistic, calm, and precise.
WorldlyOptimisticPrecise
WayfareA clear point of view.
The experience should feel as considered as the journey.
Go
with clarity.
with clarity.
01Chat first
02Clear before clever
03Editorial, not ornamental
04Confident, not loud
05Truthful by construction
06Global without clichés
WayfareThe Wayline
One continuous line. A visible origin and destination. Movement and connection, without a plane or a map pin.
A visible origin.A continuous journey.A destination.
WayfareRecognizable at every scale.
A single mark, precise geometry, and a consistent relationship to the wordmark.
WayfareWayfare
One-color compact marks.
Blue is the favicon exception.
WayfareOne silhouette. Four expressions.
Ink and white for everyday identity. Blue for the favicon. A liquid blue-hour field for the editorial feature.
Blue hourEditorial fallback
WayfareSpace to let the world in.
White, ink, and quiet neutrals. Photography brings the atmosphere.
Canvas#FFFFFF
Surface#F7F7F7
Boundary#E8E8E8
Muted#5D5D5D
Ink#0D0D0D
WayfareColor has a job to do.
Blue means selected. Green means confirmed. Red means action is needed. Every state gets a label.
#66CCFF
Selected
Your current choice
Selected#99FF99
Confirmed
A verified completion
Confirmed#FF6666
Action needed
A clear next step
Review changesWayfareHost Grotesk
One type family. A confident voice, from the first impression to the smallest trip detail.
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & →
Regular / 400Medium / 500Semibold / 600
WayfareA rhythm you can read.
Compact headlines. Calm reading. Precise facts. Sentence case throughout.
Display / 600Where next?
Section / 600
Somewhere worth discovering.
Body / 400–500
Tell Wayfare what you have in mind.
Refine the journey in one conversation.
Facts / tabular numerals09:00 £184 2h 45m
WayfareSoft edges. Clear actions.
Pill buttons and composers. Circular icon controls. Neutral cards. Generous touch targets.
Where would you like to go?
Start a new tripSelected
999pxText controls and composer
44pxMinimum target size
14–24pxContent-card corners
WayfareA window you recognize as Wayfare.
The 3:4 aperture turns a familiar travel detail into a repeatable brand signature. The place changes. The frame stays.
3 : 4
The apertureArched edges.
A pale structural surround.
Caption safe areaA place-specific crop.
A darker lower interior.
LisbonSunlit staysCentered, readable captions.
Reserved for inspiration.
WayfareA window into somewhere else.
The jet-window silhouette gives destination imagery a distinctive, repeatable frame.
LisbonSunlit staysIstanbulFlexible datesBanffMountain escapesWayfareA sense of place.
Observed, atmospheric, specific. Natural color and light. Real texture over generic travel symbolism.
Observed light.Local texture.
A real sense of place.
WayfareThe system comes together in the demo.
The Wayline, type, photography, and conversation starter working together on the Wayfare homepage.
Actual website / September 2026WayfareOne identity. Every screen.
A clear first message, one composer, and a compact header. Brand continuity without crowding the journey.
Less chrome.
More journey.
More journey.
One clear start.
Readable type.
Comfortable controls.
9:41••• ▰
WayfareTell us the trip
you have in mind
A long weekend in Lisbon
Where the journey could take you
WayfareThe conversation is the interface.
Intent, refinement, comparison, and selection stay in one chronological flow. Useful UI appears when it is needed.
Find a flight from London to Lisbon.
Here’s how a flight can fit into the conversation.
Sample AirwaysNonstop
LHRLondon · 09:00
2h 45mLISLisbon · 11:45
£184Illustrative fare
Selected Refine the dates, compare an option, or keep planning.
Ask about this journey
WayfareThe brand lives in the details.
The real flight-results component: a compact comparison, readable fare facts, and a clear selection state.
Useful facts.
One next action.
One next action.
Neutral surfaces
Rounded controls
Selection blue
Explicit fare states
WayfareOne useful decision at a time.
A compact hotel card gives the conversation a visual answer. Neutral surfaces let the destination and decision lead.
Illustrative stay
A place in Lisbon
Alfama · Double room · Breakfast included
£160 / nightSelected
MCP app interface specimenLet the place
lead the card.
lead the card.
A photograph. The room facts. The rate. A clear selection.
Illustrative layout and valuesWayfareWayfare, wherever the conversation lives.
ChatGPT-hosted widgets inherit host typography and neutral theme tokens. Wayfare keeps its voice, iconography, and meaningful selection blue.
Light host
Sample AirwaysNonstop
LHRLondon · 09:00
2h 45mLISLisbon · 11:45
£184Illustrative fare
Selected Dark host
Sample AirwaysNonstop
LHRLondon · 09:00
2h 45mLISLisbon · 11:45
£184Illustrative fare
Selected WayfareOne family of useful signs.
Heroicons for functional UI. Outline by default. Consistent scale and stroke. Every control gets a useful accessible name.
Flights
Stays
Explore
Dates
Vouchers
DestinationsWayfareSmall signs. Clear decisions.
Outline icons guide actions. A compact solid check confirms selection. Shared shapes connect the website and MCP apps.
01 / Navigation
A familiar action.
Menu, new trip, close.
One outline family. Circular targets.
02 / Conversation
Where next?
One next step.
20px functional icons.
A 44px minimum touch target.
03 / Selection
Selected
Meaning in words.
A solid status check.
Blue and a label together.
WayfareA little character, inside the glyph.
The six capability icons carry the same restrained liquid field as the editorial Wayline. The Heroicon silhouettes stay fixed.
Flights
Search and compare fares.
Hotels
Stays, rooms, and cancellation terms.
Experiences
Activities around the itinerary.
Loyalty
Points and redemption previews.
Vouchers
Eligible value for the trip.
Booking & trip care
Review and manage the journey.
Brand application from the product. Capability availability follows the product’s live/demo labels.
WayfareCalm. Specific. Transparent.
Name what happened, explain the tradeoff, and make the next action clear.
Discovery
“I found three current fares that fit your dates.”
Tradeoff
“The lower fare has one stop. The nonstop option is £84 more.”
Change
“That price changed. Review the new total before continuing.”
WayfareMove when it means something.
Motion communicates activity and continuity. The message, controls, and focus stay steady.
Ready
Where would you like to go?
Still and ready for input.
Responding
Thinking…
Planning your journey
BorderBeam / 3.1s loop
TextShimmer / activity only
Complete
Keep exploring
Motion stops. The answer stays readable.
WayfareA moment of discovery.
The original WebGL shader moves blue-hour color and light inside the exact Wayline. The path and endpoints stay still.
Color moves.
The identity holds.
Static blue-hour fallback in print and reduced motion.
The identity holds.
Sky blue · deep ocean
Violet · warm horizon
Static blue-hour fallback in print and reduced motion.
WayfareThe details are part of the brand.
Readable contrast. Visible focus. Labels beyond color. Comfortable targets. A complete reduced-motion experience.
Continue planningVisible keyboard focus
Review the new total
The fare changed. Your selection needs another look.
Meaning is explicit in words.AAColor contrast200%Text zoom44pxTouch targets
WayfareMake the decisions reusable.
A canonical guide records the identity. Real examples explain it. Review keeps the next piece of work consistent.
WayfareBrand guidelines
Identity / Color / Typography
Imagery / Voice / Motion
Product / Accessibility
The working systemDocument.
Document.
Apply.
Review.
Preserve approved decisions.
Keep examples in context.
Inspect the actual output.
WayfareOne demo. A consistent experience.
From the first impression to the next useful decision.
9:41••• ▰
WayfareTell us the trip
you have in mind
A long weekend in Lisbon
Where the journey could take you
Sample AirwaysNonstop
LHRLondon · 09:00
2h 45mLISLisbon · 11:45
£184Illustrative fare
Selected