Local reference

Design system

Shared tokens, accessible primitive contracts, and product components for the MVP surfaces.

Tokens

Amber

#B45309

Adventure, primary action, active filters

Forest

#166534

Trust, save, success, recovery

Ink

#1C1917

Primary text and story headings

Muted

#78716C

Metadata and secondary copy

Page

#FAFAF9

Warm public page background

Dark

#0C0A09

Preview and operational surfaces

Typography

Plus Jakarta Sans carries display moments.

DM Sans keeps UI and story reading clear and warm.

JetBrains Mono is reserved for metadata and small labels.

Components

Primary action Secondary action
Walkable Would return Saved
City fallback cover

Lisbon · Spring 2026 · 7 min read

How Lisbon worked when I stopped rushing

Story cards preserve semantic links, metadata, fallback media, chips, and save affordances without requiring client rendering.

Start hills early and keep one afternoon unscheduled.

Draft restored.

No saved stories yet

Return to discovery and save a story when it earns a place in your trip notes.

Explore stories

Rich Primitive Checks

dialog

Use native dialog for static islands or a headless React primitive when focus trap complexity grows.

Tab cycles within the open dialog · Escape closes · focus returns to trigger

drawer

Sheet/drawer is a dialog variant with edge anchoring and stable touch targets.

same focus and escape behavior as dialog · close control remains visible on mobile

tabs

Prefer static links for URL-changing filters and headless tabs for in-page panels.

Arrow keys move between tabs · Home/End jump to edges · Tab enters selected panel

accordion

Use details/summary for content disclosure unless custom roving focus is needed.

Enter/Space toggles · headings remain semantic

menu

Keep public navigation as links; use headless menu patterns for auth/account menus.

Arrow keys move · Escape closes · typeahead where practical

select

Native select first; custom listbox only when search or rich option content is required.

Native select behavior or headless listbox behavior · visible focus

combobox

Use datalist for simple city autocomplete; upgrade to headless combobox when results need rich metadata.

Arrow suggestions · Enter accepts · Escape clears/closes

tooltip

Use for icon-only controls; never hide required instructions solely in tooltips.

appears on focus as well as hover · Escape dismisses when persistent

toast

Use for nonblocking confirmation, undo, and transient status only.

does not steal focus · undo action is reachable after announcement