1500+ ready React Native mobile app screens

Affiliates
App sets

Interval

12 screens · Fitness and training

Training measured in zones, not in minutes

Twelve screens of an interval training app built on the one measurement that makes a hard session honest, which heart rate zone the work actually happened in, with every zone boundary, time in zone, session load and weekly total on every screen derived from a maximum and a threshold rather than asserted beside the timer.

PRO

The design system and all 12 screens in one prompt. Each screen is also on its own page, free, if you only want one.

Design system

One file, shipped with the set. Every screen declares these values inline so it can be lifted out on its own, and the build refuses a screen that paints a colour this file does not name.

Colours

palette
ground
#000000
raised
#121212
sunken
#1C1C1C
line
#2A2A2A
ink
#FFFFFF
inkMuted
#A0A0A0
inkFaint
#6A6A6A
accent
#C8E600
onAccent
#12160A
data
zone1
#3B6FD4
zone2
#35D6C0
zone3
#8C9440
zone4
#C2542F
zone5
#7A2320
neutral
#333333

Scales

radius
tile10
card14
sheet22
pill999
space
gutter20
gap12
row15
section28
text
display54
title21
body15
label12
micro10
Typeface
Inter, 5 weights

The flow

In the order somebody meets them. This is the app's own sequence, not a list of categories.

Planning the work

4

Deciding what today is for. A week that balances hard against easy, a session written as rounds rather than prose, and the editor that shapes it.

Doing it

4

The four screens that exist for someone out of breath. Large figures, one decision at a time, and the zone ring that says whether the effort is landing where it was meant to.

Seeing it add up

4

What a month of this actually did. Sessions behind you, the trend they make, the watch strapped to your wrist, and the account holding it together.

Interval, a 12 screen app | Clevens