Masthead

Best for

• News publishers. Local and regional papers, independent newsrooms, specialist news sites. It's written to the Press Council's principles and the advertising and electoral rules (see "News: what we build in").
• Anyone who publishes stories and updates them:
  • sport news (Pitchside: match reports and a minute-by-minute live blog)
  • technology news (Signal Desk: breach stories, explainers, a launch live blog)
  • association and council newsrooms, university news, trade press, newsletters with a website
• Audiences: readers who want to know what happened, what it means and whether they can trust it.

Less suited to: a blog with no corrections or labels to speak of (Folio), a magazine led by photography (Tableau), or a forum (Thread).

Personality and voice

Trustworthy and clear, like a good local editor. Say what happened, say what it is, and own the mistakes.

• Headlines: "News you can check." · "Updates that wait for you." · "Know what you're reading."
• Buttons: "Subscribe" · "Sign me up" · "Show what changed" · "2 new updates"
• Microcopy:
  • "An earlier version of this story said … We've corrected it."
  • "Sponsored · Paid for by Harbourside Credit Union"
  • "Billed $16 every 4 weeks. Cancel online, anytime."
• Words to avoid in a newsroom: "breaking" for anything that isn't, "exclusive" for a press release, "stealth edit" behaviour (changing a story without a note), and "from $1" prices that jump later.

Colour

Measured contrast (WCAG).

• Morning edition:
  • ink on paper 17.4:1
  • muted on paper 6.4:1 (5.8:1 on well)
  • red on paper 6.4:1 (5.9:1 on well, 5.6:1 on its soft fill), white on red 7.0:1
  • note on paper 6.3:1 (5.7:1 on its soft fill)
  • paid-ink on paid 6.9:1, ink on paid 13.8:1
• Late edition:
  • ink 16.2:1
  • muted 7.0:1 (6.5:1 on card)
  • red 8.2:1, red on its soft fill 7.0:1, text on red 7.6:1
  • note 9.3:1 (7.7:1 on its soft fill)
  • paid-ink on paid 7.6:1
• Example dials: grass green (Pitchside), violet (Signal Desk) and river teal (The Riverbend Lantern) all meet AA on paper and in the dark.

Typography

• Display and stories: Newsreader, 400–700 with italics and optical sizes. Headlines, standfirsts, the story text, pull quotes.
• Interface: Public Sans, 400–700. Labels, bylines, buttons, forms.
• Times: IBM Plex Mono, 500–600. Live blog times, the edition stamp.

The signature move: the lit words turn italic and get the masthead's red rule underneath, which draws itself on load.

Layout

• Frame: a 1200px wrap with a max(20px, 4vw) gutter. An ink top line carries the date and edition stamp; the sticky nameplate sits on a double rule.
• Front page: three columns under a heavy rule: the lead with its figure, a column of stories, and the latest and most read. They collapse to two, then one.
• Story: the label, headline, standfirst, byline with text size, the figure, the text with a drop cap, then the corrections ledger; the trust box and most read sit beside it.
• Then: the live blog with a side box, the labels explained with paid examples, standards, plans, and an ink newsletter card with columns of type in the corner.

Shape

• Square, mostly: --r-s 3px, --r-m 6px, --r-l 10px; only chips and the "new updates" button are pills.
• Rules: a 3px ink rule on top of the front page, live blog and page heads; hairlines between stories; the double rule under the nameplate.
• Figures: drawn illustrations in the palette, with captions. Never stock photos of things that didn't happen.
• The mark: a folded page in ink with a red band.

Motion language

• Live blog: the live dot pulses; "N new updates" drops in; released updates slide down and glow briefly; times tick every 30 seconds.
• Corrections: the mark scrolls to its note and flashes it.
• Reader: a red progress rule across the top of the window, and text size changes ease.
• Elsewhere: the headline's red rule draws on load, the newsletter card's rule presses in and out, sections reveal with a 12px rise over 600ms, and the phone menu drops in.
• Motion switch in the footer ([data-motion-toggle], html.calm, remembered as site-motion, with the default from prefers-reduced-motion). Calm keeps the live blog working but stops the slides, pulse, flash and rule.
• Late edition switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

Real news photos, credited, are the norm. The template uses drawn illustrations with "Illustration:" captions so nothing pretends to be a photo of an event. Never use a stock photo as if it showed the story.

Signature components

• Labels: .label[data-kind], where the kind is news, analysis, opinion, explainer, sponsored, political or live; with .by for who paid and .live-dot.
• Front page: .front › three columns: article.story.top (.figure, .label, h3 a, p, .meta), more article.story, and .rail (li > time + a) with .most (numbered).
• Article: .article › .article-head (.label, .h1, .standfirst, .byline with .face, .updated and .reader), figure, .article-body (drop cap, h2, blockquote > cite, .fixed + a.fixmark[href="#fix-1"], .help-box), .corrections; .trust beside it; .progress[data-progress] at the top of the page.
• Live blog: .live[data-live][data-now][data-one][data-many] › .live-head ([data-live-updated]), .keypoints, .switch[data-live-auto], button.new-bar[data-live-new], [data-live-status], ol.feed > li.entry[data-ago] (.pinned[data-pin-label], .when > time + span, .entry-body), and template[data-live-queue] > li.entry[data-delay].
• Corrections: .corrections[data-corrections] › h3, ol > li.fix#id (.fix-head > b + span, p, button[data-diff][aria-controls], .diff > del, ins).
• Paid: .paid-card with .why (who made it) or .authorised (who authorised it).
• Supporting pieces: .plans > .plan(.pick), .person, .facts, .labels-key, .notice, .side-box, .topline .ed, .close-card (--close-em, with a newsletter form).

Multi-page kit

• Phone menu: .menu-btn[aria-controls] opens .site-menu. Escape, an outside click or choosing a link closes it, and Tab stays inside while it's open.
• Current page: aria-current="page", shown with the red rule under the link.
• Inner pages: .page-head (a heavy rule under it), .crumbs, a .tag and a smaller .h1.
• Fields: .field, .fields, .field-wide, fieldset.field-set, .check, .form-card, [aria-invalid="true"]; form[data-template].
• Tiles, segmented control, gate, slider, switch, tables: .choices, .seg, [data-gate], input.range, .switch[role=switch], .table.
• Events: live (pending, shown), correction (open, id), textsize (size, name).
• Helper: Masthead.refresh(root).

News: what we build in

We checked these for Australian news sites in October 2026:

• Accuracy and corrections. The Australian Press Council's General Principles ask publications to make factual material accurate and distinguishable from opinion, and to correct significant errors promptly with due prominence. The template puts the correction on the story, says what changed and when, marks the fixed sentence, and keeps a public corrections log.
• Fact versus opinion. Opinion and analysis carry labels that look different from news, and the labels page explains each one.
• Right of reply and conflicts. The trust box says who was asked for comment and declares conflicts; the standards page explains both.
• Advertising that's distinguishable. The AANA Code of Ethics says advertising must be clearly distinguishable as such. Sponsored content is amber, says who paid, and says the journalists weren't involved.
• Electoral authorisation. Paid electoral advertising needs an authorisation naming who approved it; genuine news and editorial content is exempt. The paid political ad carries one. State and local elections have their own rules too.
• Subscriptions. Prices include GST, the billing cycle is stated, there's no introductory price that jumps, and cancelling is online.

These notes are design guidance, not legal advice.

• Adjudication 1568: corrections with due prominence (Australian Press Council)
• Distinguishable advertising (Ad Standards)
• Is an authorisation required? (AEC)

Do and don't

• Do label every story, and keep news and opinion visibly different.
• Do correct on the story, with what changed, and link the fixed sentence to the note.
• Do let live updates wait for the reader.
• Don't use blue for anything but corrections, or amber for anything but paid content.
• Don't edit a published story without a note.
• Don't auto-scroll or auto-insert live posts by default.

Accessibility

• AA contrast throughout (measured above), a skip link and a 3px focus ring.
• Live blog: times are real text; new updates are announced politely and wait behind a button; releasing them moves focus to the newest; auto is an opt-in switch.
• Corrections: "Show what changed" uses aria-expanded and aria-controls; the fix mark has a label ("Correction 1") and moves focus to its note.
• Reader: text size buttons are labelled, the size is announced, and the steps disable at each end; the progress rule is decorative (aria-hidden).
• Labels: the kind is in the text ("Sponsored", "Paid political ad"), never colour alone.
• Testing: responsive to 360px, and tested with motion on and off, in Morning and Late edition.

How to make it yours