Postie, drawn and built — every screen, every state.

11 screens, 128 states, on desktop and on a phone: 260 finished screens, each one designed against your brand and then built in code that matches it pixel for pixel. Open the canvases to see the design; open the app to click through it. Nothing here needs an install, a login or a terminal.

Start hereThe inbox — 45 screensthe screen you would live in, on one canvas The app, runningWalk it — a demo with sample mailOpens in demo mode: click through every screen — sign in, read the inbox, open a thread, write a reply, walk the settings and the setup wizard. The mail is sample content and nothing is ever sent. Design systemColour, type, components, kitspina-brand-001-postie.pages.dev Design system · canvasThe whole brand on one boardpina-brand-001-postie.pages.dev/canvas/

8journeys

11screens

128states

260finished screens

2sizes · desktop, phone

20components

The eight journeys

Each journey is one canvas. Boards are grouped by screen; inside a group the states run left to right, and the phone sits directly under its desktop twin. Scroll and pinch like a map — on a large canvas the far-off boards wait until you zoom to them, then draw.

journey	what it covers	screens	canvas
auth	Friends sign themselves upSign in · sign up · the first run	15	open
inbox	Every account in one streamResting · loading and backfill · empty and search · menus and sheets · chips and rows · accounts and health	45	open
wizard	Setup wizard — connect an accountEvery step, every provider, every way it can go wrong	47	open
thread	Open a conversation and read the whole thingQuoting, attachments, long threads	30	open
compose	Write mail that actually arrivesNew, reply, reply all, forward — sending and failing	34	open
account	One account's settings, remove and restoreEditing, disconnecting, bringing it back	40	open
api-keys	An agent can operate my mail with a scoped keyMinting, scoping, revoking	29	open
orphans	The settings screens outside the main flowsAppearance, data, key detail	20	open

How to look at it

Open one canvas and read one journey end to end. Start with the inbox — it is the screen you would spend the day in, and it sets the tone for everything else.
Read across, not down. A row of boards is one screen moving through its states. The board underneath is the same moment on a phone.
Then open the app and walk it. It opens in a demo: the same design in real code, at the real sizes, filled with sample mail so you can click sign in, read the inbox, open a thread, write a reply, and go through settings and the setup wizard. Nothing is sent and no real mail is touched — the mail server is the next piece of work. A panel in the corner jumps to any one of the 260 screens if you want a particular state.
Check it against the design system if a colour, a size or a component looks off — the system is the source those screens are drawn from.
Write down anything you would change, with the journey name and what you saw. Screen by screen is more useful than a general impression.

What "finished" means here

The design is locked and the code matches it. All 260 screens were drawn first, reviewed, and then built — and every built screen was compared back against its drawing until the two were identical. The dark theme is the default throughout, with light checked on a sample. What is not here yet is the back end: accounts, mail and sending are the next piece of work, and none of them change what you see above.

Comments

Coming here shortly.

A comment box on this page, so a note lands against the journey you are looking at instead of in a mail thread. Until it is live, send your notes back the way you received this link — journey name plus what you saw is all we need.