Designing Rune Sport’s Planning Experience with MadeByCat

Rune Sport is a run club that lives on a schedule. Athletes need to know where the next run starts, how long it is and what the session asks of them. Coaches need the same information one level up: which sessions exist across cities, how they sequence over the weeks, and how to point a group at the right one.

The digital experience is built around those two reading modes. A runner arrives with a single question — what is next for me — and should answer it in one screen. A coach arrives with a comparison question and needs the full calendar, filterable by city, month and pace, without losing the detail of any individual session.

The site is organised into a small number of durable sections: the club story, the run calendar, individual run pages and the kit that supports those runs. Each section has one job, and every page states its own purpose in the first screenful rather than asking the visitor to scroll to find out where they landed.

Run pages are the centre of the structure. Each one carries the route, the format, the flow of the session and the gallery from previous editions, so a runner can decide to show up without leaving the page. The calendar acts as the index above them, offering both a grid and a list view because scanning by image and scanning by city are genuinely different tasks.

Breadcrumbs run across the deeper pages so the hierarchy stays visible, and internal links move sideways — from a run to the gear used on it, from a product back to the sessions it was tested on — instead of forcing every journey through the home page.

The interface uses a restrained palette, a single accent colour and a typographic hierarchy that does the structural work: large display headings for orientation, monospaced labels for metadata such as dates, cities and distances, and a neutral body face for reading.

MadeByCat supported the design and development of Rune Sport’s digital experience. The front end is built with React on TanStack Start, with file-based routing, server-side rendering and a shared component layer for navigation, cart and gallery behaviour, so the same patterns repeat across every page rather than being rebuilt per screen.

Motion is treated as a system rather than decoration. Section reveals, hover states and page transitions share the same easing and timing vocabulary, and every motion rule is written to degrade to a plain, static layout when it cannot run.

Most people check a run while standing up, outdoors, shortly before or after running. That assumption sets the baseline: single-column layouts, tap targets sized for thumbs, fluid type that scales with the viewport instead of breaking at fixed widths, and navigation that collapses into a full-screen drawer.

Dense desktop compositions are re-authored rather than shrunk. Galleries become swipeable sliders on small screens, filter controls stack instead of crowding a row, and long tables of session data reflow into readable cards.

Accessibility is handled at the markup level: semantic landmarks and heading order, labelled controls, visible focus, descriptive alternative text on meaningful imagery, and contrast checked against the dark interface. Menus and dialogs can be opened, traversed and dismissed from the keyboard alone, and reduced-motion preferences suppress the animation layer.

Performance work focuses on what the first screen costs. Media is compressed and sized for its container, heavy assets load lazily below the fold, fonts are preconnected and swapped rather than blocking, and routes are preloaded on intent so that navigation feels immediate without eagerly downloading the whole site.