Bundles
Natter
52 screens · MessagingA messenger where the next meet-up lives in the chat
Fifty-two screens of a messenger on one story, Jonah in London on a Friday, in azure on white: first run, sign-up with the code, your number, your profile and two permission primes, chats of real faces, a group chat with its plan pinned on top, message actions, replies, attachments, a photo, a one-to-one chat, voice notes and live location, deleting a message, new chats and groups, group and contact info and shared media, plans with a real map, the walk there and who is coming, voice and video calls, search and starred messages, settings, privacy, disappearing messages, notifications, Natter Plus and the states a messenger really 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
#FFFFFF
chat
#F2F2F5
raised
#E8E8EC
line
#E6E6EA
system
#E6E6EB
soft
#EEEEEE
mapGround
#E8E8E8
black
#000000
dark
#0B0B0D
photoWarm
#1C1A18
photoBrown
#2B2420
Scales
Typeface
Inter, 5 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.
Account
3Email first, then Apple and Google, the code.
Set up
5Your number, your profile, two permission primes, ready.
