Kinetic Dawn

Running App Design Template

Stride is a running app design with a high-voltage, instrument-cluster look, built for founders and designers shipping a run-tracking product.

Use this template

Running app home screen with circular start button and weekly stats

Running app live run tracking screen with neon route map and pace numeral

Running app run summary screen with split bar chart and route thumbnail

Explore the screens

Preview the running mobile app design, fully editable in Sleek.

Training plansScreen 4

CommunityScreen 5

ProfileScreen 6

About the Running App

Stride is a running app design template built on a "Kinetic Dawn" aesthetic: near-black charcoal backgrounds, cool fog-grey panels, and bone-white numerals, with a single high-voltage sunrise lime reserved for live pace, the active route line, and primary actions. Huge condensed numerals and recessed tonal panels give every screen a performance-watch feel, readable at a glance mid-stride.

The template ships six connected screens that form a complete running flow: a Home with a circular start key and goal ring, a full-bleed Live run map with a glowing lime route ribbon, a Run summary with split charts and shoe mileage, a Training plans hub, a Community activity feed, and a Profile with lifetime distance and personal records. The signature "live ribbon" route trace draws across dark map tiles and reappears as a kinetic header, with current pace pulsing at its leading edge.

Use it in Sleek and make it yours: restyle the palette, edit any screen with AI by describing the change, and add the flows your product needs. Then export it to code, copy it into Figma, or hand a prompt to an AI agent to build it for real, far faster than starting from a blank canvas.

Screens included

Home

A personalised greeting ("Ready, Theo"), a chunky circular Start key inside a lime goal ring showing today's progress (3.2 / 5.0 km), and a bento row of weekly stats for distance, average pace, and runs. The launch point for every session.

Live run

A full-bleed dark map with the glowing lime route ribbon, a massive center pace numeral (4:47 /km), distance and elapsed-time panels, and per-kilometer split chips. Built to read at a single glance while running.

Run summary

A hero distance number (8.12 km) above a route map thumbnail, time and average-pace panels, a split-comparison bar chart, and a shoe mileage bar. The post-run breakdown with a share action.

Training plans

An active plan card ("Sub-50 10K Challenge") with week-progress segments, plus recommended structured plans like "Base Builder" and "First Marathon" as inset cards. Structured paths toward your next PR.

Community

A feed of friends' runs with mini route maps, distance, pace and elevation stats, PR badges, and kudos and comment counts. Keeps runners connected and motivated.

Profile

A runner avatar with stamina level, a hero lifetime distance number (2,482 total km), a personal records grid (fastest 5K and 10K), and a shoe rotation list with mileage. The personal stats home.

Key features

Kinetic Dawn aesthetic: charcoal base, fog-grey panels, sunrise-lime accent
Signature 'live ribbon' route trace with pulsing pace at its edge
Wide condensed grotesque numerals set enormous for glanceable stats
Recessed tonal panels in a dense bento grid, no borders
Circular hardware-style start key with a lime ring
Live run tracking with neon route map and split chips
Run summary with split-comparison bar chart and shoe mileage
Floating capsule navigation dock with lime active icon

Who it's for

Founders validating a run-tracking or fitness MVP

Product designers needing a polished running-app starting point

Indie developers building a GPS running or pace app

Fitness startups prototyping a Strava-style experience

What you can build

Launch an MVP for a running and pace-tracking product
Mock up screens for an investor or stakeholder pitch
Hand a complete, consistent running UI off to developers
Explore a redesign of an existing fitness or run app

How to use this template

1
Open the template
Browse the screens and preview the full design to see if it fits your idea.
2
Use this template
Open your own fully editable copy in Sleek with one click.
3
Edit with AI
Restyle the palette, change layouts, and add or remove screens just by describing what you want.
4
Export and ship
Export your design or hand it to developers, and keep building toward launch.

Questions, answered. Everything to know before you start.

How do I build a running app from this template?

Click "Use this template" to open it in Sleek as your own editable project, then shape it by describing the changes you want: restyle the palette, edit any screen, and add the flows your product needs. You start from six complete screens instead of a blank canvas, so you reach a working running app design far faster.

What screens are included in this running app design template?

Six connected screens: Home, Live run, Run summary, Training plans, Community feed, and Profile. Together they cover the core flow of a real run-tracking app, from hitting start to reviewing splits and tracking personal records.

Can I customize the running app UI design?

Yes. Use the template in Sleek and edit any screen by chatting with the AI: restyle the palette, change layouts, and add or remove flows. There's no manual redraw; you describe the change and it's applied.

Does this template include a screen to design a running route?

Yes. The Live run and Run summary screens feature the signature lime route ribbon drawn over dark map tiles, and the Community feed shows mini route maps. You can adapt these to plan, record, or display running routes in your own app.

Can I export the design to code or Figma?

Yes. Sleek exports your design as code, copies straight into Figma with no plugin, or hands you a ready-made prompt that an AI agent like Claude Code or Cursor can use to build it into a real, working app.

Is this template free to use?

You can open and explore the running app design for free, then use it in your own Sleek project to build on it. Editing and exporting follow Sleek's standard plans.

Something else? Write to support@sleek.design.