Wayfinder / DESIGN SYSTEM

A system for getting somewhere.

One folded route sheet on field paper: an index fold, a schematic map, the profile along the bottom edge and numbered stops that refer to each other.

Open the website

Layout schematic of the implemented website

This book belongs to Wayfinder. The catalogue website has a separate interface guide. Samples below reuse the components from this demo.

01 / FOUNDATIONS

Color, type & form

Compact controls. Practical hierarchy. Data with a clear source.

Field paper#f2f4ec

Forest ink#203d32

Route green#1e5b49

Overpass / DISPLAY

Plan. Inspect. Go.

DM Sans / READING & INTERFACE

Select a route, inspect its elevation, check the stops and export a text itinerary.

02 / LIVE COMPONENTS

Routes & elevation.

Select a route, inspect its elevation, check the stops and export a text itinerary.

SHEET 01 / 03

Ridge loop

Distance / ascent6.4 km / +340 m5 checkpoints

0 / 5 stops checked · this session

Illustrative data. Not a real route or navigation guidance.

03 / INTERFACE DETAILS

The small things belong here too.

Try the select, focus the help button, and scroll the inventory. The popup and tooltip retain this theme’s character.

Inspect a component

Overpass sets account h1/h2 headings and wordmarks; DM Sans carries reading text, fields and smaller headings.

Component inventory (scroll to inspect)

01
Account typography
Overpass sets account h1/h2 headings and wordmarks; DM Sans carries reading text, fields and smaller headings.
02
Your brand on account pages
The name and logo replace the wordmark. Main and second colours become readable ink and accent across account surfaces, inputs, actions, focus and reset dialogs. Backgrounds, artwork, lamp finishes and the dark Wayfinder fascia stay authored. Name-only brands and Show originals keep the authored colours.
03
Application frame
The app is one route sheet titled by the selected route. The account dashboard indexes the three sheets; search, pins and the text export stay local.
04
Identity
Wayfinder uses its own wordmark, independent of the catalogue.
05
Selection
Select a route, inspect its elevation, check the stops and export a text itinerary.
06
Select menu
A keyboard-operated popup with this theme’s borders, type, focus and selected states.
07
Tooltip
Contextual help opens on hover or keyboard focus and closes with Escape.
08
Scroll area
A bounded region with a themed track and thumb. Wheel, touch and keyboard scrolling remain available.
09
Focus & motion
Visible focus and short, input-driven transitions. Reduced motion removes movement.
10
Forms & validation
The settings below use labeled inputs, radios, a switch and checkbox. Saving changes this theme’s actual local dashboard preferences.
11
Dialog & feedback
The reset dialog keeps this theme in its portal, returns focus, and makes the background inert. State tabs expose empty, error, loading and success transitions.

Forms, decisions & feedback

These are the working settings and state components used by this theme’s essential pages.

Explore this theme’s pages