for review Front-end preview · September 2026

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.

8journeys

11screens

128states

260finished screens

2sizes · desktop, phone

20components

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/

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.

auth15screens

Friends sign themselves up

open the canvas

inbox45screens

Every account in one stream

Resting · loading and backfill · empty and search · menus and sheets · chips and rows · accounts and health

open the canvas

wizard47screens

Setup wizard — connect an account

Every step, every provider, every way it can go wrong

open the canvas

thread30screens

Open a conversation and read the whole thing

Quoting, attachments, long threads

open the canvas

compose34screens

Write mail that actually arrives

New, reply, reply all, forward — sending and failing

open the canvas

account40screens

One account's settings, remove and restore

Editing, disconnecting, bringing it back

open the canvas

api-keys29screens

An agent can operate my mail with a scoped key

Minting, scoping, revoking

open the canvas

orphans20screens

The settings screens outside the main flows

Appearance, data, key detail

open the canvas

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.