Health & Fitness · 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.



Önizle
Ekranları keşfedin
Sleek'te tamamen düzenlenebilen running mobil uygulama tasarımını önizleyin.
Running App hakkında
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.
İçindekiler
Dahil olan ekranlar
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.
Tasarım ve özellikler
Öne çıkan özellikler
- 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
Hedef kitle
Kimler için
Kullanım alanları
Neler oluşturabilirsiniz
- 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
Bu şablon nasıl kullanılır
- 1
Şablonu aç
Ekranlara göz atın ve fikrinize uyup uymadığını görmek için tüm tasarımı önizleyin.
- 2
Bu şablonu kullan
Tek tıkla Sleek'te tamamen düzenlenebilir kendi kopyanızı açın.
- 3
Yapay zekâ ile düzenle
Ne istediğinizi anlatarak paleti yeniden tasarlayın, düzenleri değiştirin, ekran ekleyin veya kaldırın.
- 4
Dışa aktar ve yayınla
Tasarımınızı dışa aktarın ya da geliştiricilere teslim edin, lansmana kadar geliştirmeye devam edin.
Sıkça sorulan sorular
İlgili mobil uygulama şablonları
running uygulamanızı tasarlamaya başlayın
Sleek'te kullanın ve kendinize göre uyarlayın: paleti yeniden tasarlayın, herhangi bir ekranı yapay zekâ ile düzenleyin, ardından koda veya Figma'ya dışa aktarın.
Bu şablonu kullan







