SelfPost · panel redesign · stage 2

The accepted direction, every screen

Direction C (Bulma) was picked as the base: the important things in view, details one or two clicks away. It takes the postal signature of A — the postmark verdict, numbered mono section heads, the stamp's perforated paper edge under a brick bar that carries the wordmark — and the icons of B. Thirty-four screens and a components page live in panel/. Serve this folder from the repository root: the pages load the panel's own fonts and mark by relative path.

Screen map

Signed out	Sign in · sign in before an administrator exists · Create administrator
Overview	Overview — postmark verdict, six health cards, both domain lists
Outbound	Domains · domain · domain settings · application form · password shown once · delete domain Log · message · Queue · DMARC reports · by domain · one report
Inbound	Domains · domain · delete domain · Log · Queue (empty state) Quarantine · held message · Filter lists — roadmap items, drawn as their target look
Server	Health · Preflight (roadmap) · System log · Backup · Users · user form · delete user · Settings
User menu	Account · Help
Contract	Components — every building block in every state · the plan · `panel/check.py` lints the mockups and writes `panel/outlines.json`

What changed against today's panel

Overview shows verdicts, Health shows tables. Process lists, socket paths and interface counters moved to Server › Health, one click from each card.
Every page is one of three layouts: a list (form on top, table below), a detail page (sticky side menu + numbered boxes), or a form page (boxes in equal columns). No page picks its own width.
Own password is Account, instance defaults are Settings. Export sits with the domain, import with Backup, and each links to the other.
Queues are tables, not a postqueue -p dump — this needs postqueue -j parsing. The inbound queue is the same queue filtered by recipient domain.
Confirm pages say what will be lost as a list, beside a hint for the usual alternative (export before delete).
Own components on top of Bulma: postmark, perforated edge, numbered box head, health card, DNS record block, facts grid, timeline, log pane. The mockup's theme.css is about 200 lines.
panel/build.py wraps the fragments in panel/src/ with the shared navbar; the built pages are committed, so nothing has to be run to view them.

Stage 1 · three directions on three key screens

Kept for the record: Overview, an outbound domain and sign-in, drawn three ways.

Shared by all three

Navigation by mail direction. Overview · Outbound (Domains, Log, Queue, DMARC reports) · Inbound (Domains, Log, Queue) · Server (System log, Backup, Users, Settings). Account, Help and Sign out live with the user name. Eleven flat entries become four groups.
One block per DNS record. Today "DNS status" and "records to publish" show every host twice. Here a record is one block: its status, what to publish, and — only on a mismatch — what DNS holds now.
The domain page stops being nine cards. DNS and applications are the page; limits, report address, export and delete are "rarely changed" and sit behind one click.
Applications are a table; editing one is its own form page instead of a three-column panel inside a list row.
Brand carriers stay: the stamp, brick, IBM Plex. No inline style or script in any mockup.

The directions

A · Pico CSS 2.1

Blank

The panel as a postal form: one centred sheet, numbered sections, mono field labels, a postmark for the verdict. Overview is a ledger — one row per check, the row opens into its detail. Sections on the first header row, the section's pages on the second.

Overview Domain Sign in

B · Tabler 1.5 (Bootstrap 5)

Console

The classic admin kit: ink sidebar with every page one click away, status tiles, cards and tables in a 12-column grid, read-only input groups with Copy. Almost nothing is ours; it also looks the most like every other admin panel.

Overview Domain Sign in

C · Bulma 1.0

Counter

Brick top bar with CSS-only hover menus. Overview is the whole service on one screen: a health strip over the outbound and inbound domain lists. The domain page gets a sticky side menu. Softer, rounder, the boldest use of the brand colour.

Overview Domain Sign in

What each one costs

	A · Pico	B · Tabler	C · Bulma
Licence	MIT	MIT	MIT
Vendored CSS (minified)	83 KB	694 KB	678 KB
JavaScript	none	none for these screens; Bootstrap bundle only if dropdowns / modals are wanted	none
Build step	none	none	none (a Sass build could trim it; not needed)
CSP `default-src 'self'`	needs `img-src 'self' data:` — 14 `data:` SVGs (select chevron, checkbox tick)	needs `img-src 'self' data:` — 28 `data:` SVGs	works as is — no `data:` URIs
Our own CSS in the mockup	≈ 200 lines	≈ 80 lines	≈ 100 lines
Markup style	semantic HTML, few classes — closest to today's templates	class-heavy Bootstrap markup	class-based, moderate
Own components	sheet, ledger row, postmark, record block	sidebar group label, record block	health strip, record block
Recognisable	most	least	middle

Open points

Icons in B come from Tabler Icons (MIT) through its webfont for the mockup; the panel would vendor only the used glyphs as an SVG sprite.
Inbound log rides on the agreed inbound-antispam-panel journal; Inbound queue is a new filter over the one Postfix queue and needs its own roadmap row.
Dark scheme and the narrow-screen shell are not drawn at this stage; all three libraries ship both.
The earlier panel-ui experiment and panel-redesign.md are superseded by whichever direction is accepted.