Find the sunrise. Walk it offline.

Tarn is a mobile-first UI kit for a hiking and trail app where the map is the product and every check-in becomes a small social moment. Plan a 2-day ridge trek, download the area, navigate with no signal, catch the sunrise, and post it once you're back in range.

Why designers pick Tarn

• A real map system, not screenshots. Vector topo terrain, planned, navigating and off-route route states, markers, spot pins, callouts, labels and an elevation profile, all as components.
• Built for the hard moments outdoors. Off-route alerts, low battery mode, offline downloads and posts queued until signal returns.
• One system, three devices. Every flow on phone, with key screens on tablet and desktop, where planning happens and "Send to phone" takes over.
• Light and Dark from one set of variables. Dark for night starts and cloud hunting, Light for midday sun.

What's inside

• 48 screens / 160 frames across Mobile (390), Tablet (1194) and Desktop (1440)
• 9 flows: Onboarding · Explore · Trail & Spot · Plan & Offline · Navigate & Record · Check-in & Post · Social · Profile · Premium & Settings
• 69 components with 191 variants, 80 icons
• 132 variables: color (Light/Dark), spacing, radius and primitives
• 16 text styles, auto layout throughout
• Clickable prototypes with Dark, Light, Desktop and Tablet starting points on every flow page
• Documented foundations and components, plus a Read me

Good for

Hiking, trekking and outdoor apps · travel and adventure products · GPS and activity tracking · location-based social apps · any product that needs map UI done properly.

Specs

• Made for Figma, using variables, components and auto layout
• Fonts: Sofia Sans and Sofia Sans Semi Condensed (free, Google Fonts, OFL)
• Icons: Phosphor (MIT license, included)
• Photos are for preview only. Replace them with your own.
• All names, places and data are fictional.