Skip to main content

Mockups

These are drawn as SVG in apps/docs/src/components/mockups.tsx rather than exported from a design tool, deliberately: they live in git, they diff on review, and they cannot drift out of the repository the way a link to a design file does.

They are intent, not pixel specification — the real thing uses system fonts, system spacing, and Liquid Glass, none of which an SVG can honestly represent.

When a screen changes, this page changes in the same PR.

Crags — the home tab​

The list you land on. Large title with the iOS scroll behaviour, a search field in the navigation bar rather than behind a button, and cards that are Liquid Glass surfaces over the background.

Note what is not here: no loading state. The list comes from on-device SQLite.

Crags list screen9:41CragsSearch cragsStanage PopularPeak District · GB · 10 min walk-intradbouldertop ropeCéüseHautes-Alpes · FR · 45 min walk-insportPortland — Cheyne WearDorset · GB · 5 min walk-insportSynced 4 min ago▲▲Crags▤Logbook◍Profile
Crags — local-first list, native large title, glass cards
Sector topo screen12The Tower12 routes · faces east · dries fastHVD 4aFlying Buttress★★★ · 23 m · tradVS 4cWall End Slab★★ · 18 m · tradE2 5cThe DanglerCrags · Log · You
Sector — the topo is the hero; the route sheet slides over it

The sector screen is the one that has to be right. Two rules for it:

  1. Tapping a line selects the route; tapping a route highlights its line. Both directions, always, with a haptic tap on each. It is the only interaction that matters here.
  2. The sheet never covers the part of the photo you are looking at. Dragging it down is a system sheet gesture, not a custom one.

Route detail and logging​

Route detail screenThe TowerFlying ButtressHVD 4a★★★trad · 23 m · 1 pitchDESCRIPTIONUp the front of the buttress to the roof,then hand-traverse left and finish upthe arete. The classic.FA Joe Brown, 1948GEARA rack of medium cams and a couple of large hexes.!Nesting restriction1 Mar – 30 Jun · checked 2 weeks agoYOUR ASCENTSOnsight · 11 Apr 2026with Sam · “Greasy in the roof but brilliant.”Log ascent♡ WishlistSaved on this device · will sync when you have signal
Route detail — safety information gets its own surface, not a footnote
Log ascent sheetFlying ButtressLog ascentSaveSTYLEOnsightFlashRedpointOtherDATESaturday 11 April 2026›WITHSSam+ Add personYOUR OPINIONGradeHVD 4aQuality★★★Works offline · queued until you have signal
Logging — style and partners are first-class, not buried in more options

The logging sheet is where principle 5 shows up: partners are on the first screen, not behind a disclosure triangle, and the ascent saves whether or not there is signal.

What these mockups deliberately do not show​

  • Fonts and exact spacing. The app uses the system font at system sizes so it inherits Dynamic Type. Anything drawn here is an approximation.
  • Liquid Glass. The flat translucent panels above are a stand-in. The real surfaces refract and have a specular edge — see iOS native feel.
  • Motion. Sheet detents, the tab bar minimising on scroll, and the haptic on route selection are all part of the design and none of them survive a static image.

Editing them​

The SVG lives in apps/docs/src/components/mockups.tsx, not inline in this file, for a mechanical reason worth knowing: MDX parses text inside a multi-line JSX element as markdown. A <text>9:41</text> that Prettier splits across three lines renders as a paragraph inside the SVG rather than as SVG text, and the mockup silently turns into a list of stray words. In a .tsx file it is just JSX and the problem does not exist.