SELFPOSTREFDESIGN CONTRACT

Reference · page_head

Components

Every building block of the panel, in every state it has. A screen is assembled from these and from plain Bulma — nothing else. The title of each box is the name of its template partial.

Cover sheet

flash — the result of the last action, between page_head and the first box. Success, or…

…flash, error — a failure that belongs to the page, not to one field. A field's error stays under the field in Bulma's help is-danger.

Page layouts

A page is exactly one of these

list: page_head, then full-width boxes: the add form first, the table second. Example
detail: page_head, then columns: is-3 side menu + is-9 boxes. Example
form: page_head, then boxes in equal columns, one submit row under them. Example
signed out: The split brand / form screen, no navbar. Example

postmark

Worst status of the page's checks

SELFPOSTOK6 OF 6 CHECKS

SELFPOSTWARN1 OF 6 CHECKS

DNSFAIL1 OF 3 RECORDS

Only inside page_head, at most one per page, and only where the page has a verdict to give.

status_tag

One mapping, one function

Status	Tag	Bulma classes
ok, published, running, sent	ok	tag is-success is-light
warn, deferred, quiet	warn	tag is-warning is-light
error, fail, mismatch, bounced	fail	tag is-danger is-light
unknown, off, neutral counts	off	tag is-light
held: quarantine · role: global	quarantine	tag is-primary is-light

box · box_head

The end slot: a note, a tag, a link or a filter form

The after the end slot is sp-help: an optional link to the section's topic on the Help page. It replaces today's help drawer.

box_body — padded content. A table or a run of sp-record blocks sits directly in the box, without box_body.

box_foot — a legend, pagingend slot

box · sp-danger-zone

For destructive confirmations and the "delete" entry of a settings page. The number may be an icon when the box is not part of a sequence.

box · sp-credential

Shown once

Only for a secret the panel will never show again.

health_card

Overview only · each card links to its detail

NameVerdict in wordsok · one supporting fact NameExpires in 12 dayssp-warn Name1 of 2 answeringsp-fail

dns_record · copy_field

One block per record

Record

publishedA one-line note

Host / name

Type

Value to publish

copy_field — multi-line, for a DKIM key

Record

mismatch"In DNS now" appears only when it differs

In DNS now

What is wrong and the exact fix.

Table conventions

Always inside table-container · an address breaks after its @

Time, UTC	Name	sp-clip	Status
09-21 14:01:52	the row's link	A long subject is clipped with an ellipsis instead of wrapping the row	sent	Details

Page 1 of 9Older →

log_pane

sp-d time · sp-w warning · sp-e error

13:58:07 an ordinary line
13:58:09 a deferred delivery — sp-w
13:57:41 a reject or a bounce — sp-e

facts

Label: Value
Mono value: 4XcB7k2Jm9z1
sp-big: 5 days; a supporting line

timeline

13:58:07 UTCDone — default
13:58:09 UTCDeferred — sp-warn
14:40:00 UTCBounced — sp-fail
not yetExpected next — sp-pending

empty_state

One sentence: what is absent and why that is fine.

confirm_list

each thing that will be lost, one per line;
inside an sp-danger-zone box, above the danger button.

Form rows · route · help_topic

sp-row — a wide field

and a short one

sp-pair — two equal fields

Repeat

Help text lives in Bulma's help.

from@example.orgto@example.netdeferred

help_topic

A heading and a paragraph; topics stack inside one box on the Help page.

shell

Owned by the layout — a screen never writes it

Name: The wordmark, not the stamp: at nav size the stamp's perforation is under a pixel and its brick field dissolves into the bar. The stamp lives on sign-in, setup and the favicon.
Edge: Built like the mark: the brick field, then the stamp's paper margin, and the perforation along the outer edge of that margin — round holes, flat teeth, the ink hairline. One tile, perf-edge.svg.
Sibling strip: The pages of the current group, under the edge. Five or six entries; past that the group is split.
Menus: Bulma hover dropdowns, no JavaScript. The user menu holds Account, Help and Sign out.

Type scale

Three sizes · nothing to be read is under 13px

Size	Looks like	Used for
body · 16px	The quick brown fox, 203.0.113.25	Text, table cells, inputs, selects, buttons, menus and their dropdowns
--sp-fs-s · 14px	The quick brown fox, 203.0.113.25	Supporting text: labels, `help`, notes in a box head or foot, mono values (`sp-small`), logs, the footer
--sp-fs-xs · 13px	Upper-case mono label tag	Upper-case mono micro-labels (kicker, table head, `dt`, box title) and tags — nothing else

Bulma's is-small and is-size-7 are not used: a control is never small, and sp-small replaces the helper. The postmark's fine print is an imprint, not text.