twc-006 / A study by Syafril · not client work
A planning application with three illustrative routes, a topographic diagram, calculated elevation metrics, checkpoint states and a text export. All route data is synthetic and clearly labeled, not navigation guidance.
#f2f4ec#203d32#1e5b49WHAT IS HERE / WHAT COMES NEXT
Outdoor and planning interfaces that benefit from linked visual and numeric views.
This theme includes dashboard, login/recovery UI, settings, interface states and its own component book. Registration UI is provided where it fits the theme.
Account forms validate sample values locally. They do not authenticate, create users or deliver email. Dashboard records are authored examples.
Routes are synthetic interface examples. They are not navigation instructions, terrain advice or live geographic data.
Page scope, brand assets, content, handover, hosting, costs and support are discussed in a consultation before work begins. The demo is a reference for that conversation.
Prepare a brief for this directionPut an application workflow inside the collection. Select a route, inspect its profile, mark the stops and take a text itinerary away. The work happens in the interface rather than in a promotional headline.
Field-paper surfaces, forest ink, contour lines and hairline rules. One folded route sheet: an index fold, the map in the middle and the elevation profile along the bottom edge; numbers on the map, stops and profile refer to each other.
Overpass, an open cousin of highway sign lettering, titles the route like a road sign. DM Sans keeps dense route labels readable; IBM Plex Mono marks coordinates, small identifiers and metric units.
The selected route titles the sheet, with the itinerary export beside it. The route index sits on the left fold beside the schematic map; calculated distance/ascent, the profile and numbered stops follow along the bottom edge. On phones: name and route choice, then map, profile and checklist.
Motion crossfades the selected route while keeping the map frame stable. Checkpoints update immediately. Reduced motion shortens the fade and does not alter route calculations or available actions.
Static typed route data drives the diagram, elevation profile, metrics and plain-text export. Totals are calculated from the selected route. No map service, live location, weather API or backend is connected.
Routes use labeled buttons in an index group; checkpoints expose pressed state. Diagram and elevation chart have meaningful text alternatives, with all elevations also available in the checkpoint list. The export is a real text file.
Free time, on purpose.
A product you can turn, recolor and illuminate.