Content & templates
These are the screens nobody designs first and everybody sees. The 404. The empty library. The paywall. The “Saved” toast that flashes for two seconds. They earn their craft because they’re where the brand has to do its work without a hero image to lean on.
The voice is set in voice. The shapes are set here.
Issue cover (template)
The magazine’s table of contents on screen. The cover image is the same one as the print issue – never a re-crop, never a web-only edit. The contents list never exceeds the prose container width. The theme line is six words or fewer.
The contents column never exceeds 60ch. If the issue has more than five features and four departments, drop the line numbers – not the entries. See layout for the prose container.
Contributor page (template)
The full bio for a writer or photographer. One column, generous space, the portrait sized to feel like a magazine masthead photograph rather than a profile avatar.
Newsletter signup (pattern)
Used in three places. Capture only what you’ll use – email and (optionally) first name. No double-opt-in marketing language. The unsubscribe is named, never hidden behind the word “preferences”.
Article footer
Inline. One value-prop line, one input, one button. The line says what you get.
Read with us. Eight issues a year. £64.
Dedicated page
Narrow container, headline, standfirst, form, trust line.
A short letter, every other Tuesday.
One observed thing from the week. One link to read. No round-ups.
One email a fortnight. Unsubscribe at the bottom of any letter.
Modal
Small, centred, dismissible. Maximum once per session, never on first visit, never on exit-intent.
A short letter, every other Tuesday.
No round-ups, no upsells.
Paywall / member gate (pattern)
Two flavours. Long-reads use the soft gate – first 200 words readable, body fades into a card. Subscriber-exclusives use the hard gate – title and standfirst readable, body completely withheld. The gate says exactly what’s behind it. No teaser, no “and 17 more articles like this”.
Soft gate
Settled, never bouncy.
For three years she ran the calendar of the man who ran London. Then the building changed hands, and so did everything else. The new chair arrived on a Tuesday. By Thursday she had restructured the diary – two hours each morning before the office opened, no meeting after 4pm, the standing items rotated weekly so nothing ossified.
Hard gate
The chief of staff at 47.
A long interview with Maya Reis, on the work after the work, and the calendar she keeps for herself.
Login / signup (template)
The simplest form on the site. Two columns on desktop – form on the left, an editorial portrait on the right. Single column on mobile, image hidden. Uses the field contract from forms.
The image rotates per session from the editorial library. Never marketing photography. Never the cover.
Search (pattern)
The header icon opens an input on click. Esc closes it. The full results page has its own URL – modal-only search loses session context. Result rows show kicker, headline, two-line excerpt, date, and the matched term highlighted.
The empty / no-results state for search reads: “No matches for ‘calendar’. Try the issue archive.”
Empty states
Three flavours. Each has a primary action or a clear next step. None apologise. None use exclamation marks.
Onboarding empty (first-time)
Save an article from the issue and it will appear here.
Filtered empty
Clear filters to see all 14 saved articles.
System empty (offline / error)
We’ll try again in a moment. You can also retry now.
Error states
404 – page not found
The 404 sounds like the magazine, not a chatbot. No “Oops!”. No mascot. A Freight Big headline, a short paragraph, two links – home and search.
Lost a page.
The page you asked for isn’t where it used to be. The magazine still is.
500 – server error
Our end. We’re looking.
Try again in a minute. If it persists, write to help@executivesupport.co.
Form submission error
Inline. Under the field. Never a banner alone if the error attaches to a single input.
That doesn’t look like a complete email address. Add the part after the @.
Connection error
Toast at the bottom. Dismissible. Always offers retry.
Loading states
Three flavours. Show progress within one second. Never run silent.
Skeleton
For known shapes – article cards, list rows. Uses --es-state-loading-shimmer.
Spinner
For unknown duration. Replaces the action’s label – never sits next to it.
Progress bar
For known durations longer than two seconds. File uploads, exports, multi-step submissions.
Success / confirmation
Short, factual, never triumphant. Toasts auto-dismiss at 4 seconds by default. Confirmations that require user awareness – a payment, a deletion, an unsubscribe – never auto-dismiss.
For payments and account changes, use a confirmation page – not a toast. The reader needs to be able to leave and come back to the same screen.
You’re a subscriber.
Issue 04 ships on 7 May 2026. We’ve sent a receipt to anya@executivesupport.co.
Read the current issueOnboarding
First-run pattern. Three short steps maximum. Each one screen. Skip is always visible. No more than 30 words per step.
Save what you want to come back to.
A bookmark icon at the top of every article. Saved articles live in your library.
Usage rules
Statement, then path. No exclamation marks, ever, in any state.
Two exclamation marks doing the work of zero useful words.
Three words. The voice is the editor’s, not the chatbot’s.
“Journey”, emoji, “whoops” – three things wrong in nine words.
A soft error must not block the reader. Always offer an action.
No retry, no timeline, no link. The reader is stuck.
Skeleton, spinner, or progress bar – something within 1s. Silent loads feel broken.
A blank screen for three seconds is the same as an error.
Toast, 4-second auto-dismiss, no focus shift. The reader stays where they were.
A modal for a save is a punishment. Toasts for routine actions, pages for consequential ones.
Specific scope. The reader can decide.
“More”, “exclusive”, “content” – the reader still doesn’t know what they’d get.
A URL. Shareable. Bookmarkable. Survives a refresh.
Refresh, share, back-button – all break. The search becomes ephemeral.
The skip control is visible on every step. Onboarding is hospitality, not a gate.
Five steps with no exit. The reader leaves the product instead.
For the copy in any of these screens, see voice. For the form contract, see forms. For the editorial layouts these patterns sit inside, see layout and editorial.