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

Eleven screens, 121 states, on desktop and on a phone: 246 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 fullest journey, on one canvas The app, runningClick through it in your browserpina-brand-001-postie-app.pages.dev 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

121states

246finished 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	33	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 carries the most states and 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 click the same screens live. It is the design in real code, at the real sizes, in your browser — the mail server is not connected yet, so it shows you the interface rather than your mail.
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 246 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.