Bundles
Clasp
52 screens · DatingDating that ends in a first date, planned on a real map
Fifty-two screens of a dating app in the category's own language: profiles built from photos and prompts with a verified selfie, one person at a time with like and skip, likes and matches, chat with the date card inside it, a first date planned at a real place with both walks routed on a real map, reschedule, cancel and the check-in after, report and block, Clasp+, and the states a real app hits.
PRO
The design system and all 52 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
#FFFCFF
white
#FFFFFF
surface
#F3F0F3
surfaceSoft
#F6F3F6
surfaceAlt
#F2EEF2
fill
#EDEAED
fillAlt
#EFEBEF
fillSoft
#EDE8ED
fillPale
#ECE8EC
line
#E6E3E6
lineAlt
#E6E1E6
lineSoft
#E4DFE4
hairline
#DCD7DC
divider
#D9D4D9
keyGrey
#C9C4C9
keyMuted
#B9B3B9
ink
#130F13
inkSoft
#3F3B3F
muted
#686368
faint
#948F94
coral
#D13079
coralPale
#F2A7C8
red
#C4282E
walkBlue
#2F6FE4
mapGrey
#E8E8E8
mapLine
#D1D3D9
mapLabel
#ABB0BA
mapInk
#898A8D
mapDark
#4A4B50
appleBlack
#000000
googleBlue
#4285F4
googleRed
#EA4335
googleYellow
#FBBC05
googleGreen
#34A853
googleInk
#1F1F1F
googleGrey
#747775
Scales
Typeface
Inter, 6 weights
The flow
In the order somebody meets them. This is the app's own sequence, not a list of categories.
First run
4Welcome and three slides of the real app: one person at a time, meeting halfway, both saying yes.
Account
3Email first, then Apple and Google, and the code.
