1500+ ready React Native mobile app screens

Affiliates
App sets

Skillet

8 screens · Cooking and recipes

A recipe app where changing the servings changes everything

Eight screens of a cooking app built on one number stored with each recipe, the servings it was written for, with every quantity, dish size, browning batch, total cook time, cost a portion and merged shopping list quantity worked out from it against the servings you actually want.

PRO

The design system and all 8 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
#FBF7F0
surface
#FFFFFF
sunken
#F1EBE1
line
#E4DCCF
ink
#1C1917
inkMuted
#6B665C
inkFaint
#847E72
accent
#C8412B
onAccent
#FFFFFF
data
spend
#2F6BD4
stock
#1F7A4D
waiting
#7B52AB

Scales

space
gutter20
xs4
sm8
md12
lg16
xl24
xxl32
radius
sm8
md12
lg16
sheet22
control12
pill999
insetFloor
top12
bottom16
Typeface
Inter, 4 weights

The flow

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

Deciding what to cook

3

The three screens that end with a recipe open on the counter. Every price and every count on them is for the servings set in Settings, not for the number the recipe was written at.

Actually cooking it

2

One step at a time, large enough to read from the hob, then the note you leave yourself about what you changed.

The week, the shop and the servings

3

Five dinners, the merge that turns them into one shop, and the single control that rewrites every number in the app.

Skillet, a 8 screen app | Clevens