Health & Fitness · Charcoal & Voltage
Workout App UI Design Template
Forge is a strength-training app design with a charcoal-and-voltage look, built for founders and designers shipping a workout tracker.



Önizle
Ekranları keşfedin
Sleek'te tamamen düzenlenebilen workout mobil uygulama tasarımını önizleyin.
Workout App hakkında
Forge is a workout app UI design template built around a "Charcoal & Voltage" aesthetic: a near-black graphite base, slate panels separated by thin hairlines, bone-white text, and a single electric-lime accent reserved only for active sets, progress fills, and the primary action. The big numbers (reps, weight, the rest timer) are set in a heavy condensed grotesque, tracked tight, so the interface feels athletic and dense, like a dim gym at 6am with one bright bar overhead.
The template ships seven connected screens that form a complete training flow: a Today home with today's split and a weekly volume chart, a Programs list of training plans, an Active workout logger with a plate-weight stepper and set table, a full-screen Rest timer with a depleting lime ring, an Exercise detail with target muscles and execution cues, a Progress dashboard with PR cards and a volume trend, and a Profile with stats and a consistency grid. A signature vertical voltage meter climbs the left edge of the active workout and reappears as a mini meter on workout cards.
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
Today
A 'Ready, Marcus' greeting over a hero card for today's Push Day split with exercise list and a full-width "Start Session" button, plus a weekly volume bar chart and a streak counter.
Programs
A stacked list of training plans (Push/Pull/Legs, 5x5 Strength Base, Hypertrophy 4-Day) as slate panels with difficulty tags, schedule, and lime week-progress fills, plus a "Create Custom Program" option.
Active Workout
A live session showing the exercise name, a plate-weight stepper with quick-add increments, and a set table with previous lifts, weight, reps, and lime checkmarks to log each set.
Rest Timer
A full-screen 01:30 countdown set in a giant tracked-tight numeral with a lime ring depleting around it, an 'Up Next' set preview, and '+15S' and 'Skip' controls.
Exercise Detail
A barbell bench press hero image with a primary-exercise tag, target muscle chips, and numbered execution cues so lifters know exactly how to perform the movement.
Progress
Personal-record cards for squat, deadlift, bench, and press in oversized lime numerals, plus a 30-day volume trend line chart and a body-weight section.
Profile
An athlete header with total workouts, day streak, and total pounds lifted, a 12-week consistency grid, and settings for equipment and notifications.
Tasarım ve özellikler
Öne çıkan özellikler
- Charcoal & Voltage aesthetic: graphite base, slate panels, one lime accent
- Condensed grotesque for oversized reps, weight, and timer numerals
- Signature vertical voltage meter that climbs as sets are logged
- Plate-weight stepper with quick-add increments and a set table
- Full-screen rest timer with a depleting lime ring
- Bottom nav bar with monochrome line icons and a lime active underbar
- Progress dashboard with PR cards and a volume trend chart
- Consistency grid and streak tracking on the profile
Hedef kitle
Kimler için
Kullanım alanları
Neler oluşturabilirsiniz
- Launch an MVP for a strength-training or workout tracker app
- Mock up screens for an investor or stakeholder pitch
- Hand a consistent, athletic dark-mode UI off to developers
- Explore a redesign of an existing fitness 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
workout 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







