Colour

Industrial ink and paper with a Designers Republic–tinged signal orange. Surfaces stay flat; accent is reserved for indexes, rules, and primary actions.

#0e0e0e

Header, footer, display ink.

#ecece8

Page ground and grid.

#f7f7f4

Light section surface.

#ff4d00

Accent rules and indexes.

#c03600

Primary buttons and text links (WCAG AA).

#141414

Dark section surface.

rgba(14,14,14,0.18)

Hairlines and grid.

Typography

IBM Plex Sans for display, Source Sans 3 for body, IBM Plex Mono for indexes and buttons. Logo font Powerr is logo-only. Shareable notes keep Source Sans 3 on headings and skip the uppercase hire treatment (see [07] Notes).

Section title

IBM Plex Sans 600, uppercase on h2/h3.

Source Sans 3 at weight 400. Measure about 42rem for long prose. Strong text uses weight 600.

Button and index labels

IBM Plex Mono 500, tracked uppercase.

Section numbering

Zero-padded brackets in signal orange. Sections use [NN] Label; cards under a section use [NN.MM].

Experimental projects

Main section index above the heading, tight 0.25em gap.

Flood Watch

Sub-index for items inside a numbered section.

Buttons and links

Zero radius. Default is ink outline; primary fills signal orange. Hover inverts to ink or white depending on surface.

Inline link example: return to the homepage.

Sections

Light sections use --panel with a top hairline. Dark sections use --dark-panel with a 3px signal rule. Hero and footer are near-black with corner ticks and a diagonal signal flash.

British English in all user-facing copy. No emoji. No em dashes.

Shareable notes

Long-form notes (not hire or Labs pages) use body.note-page and the styles in main.scss. Put the CSS there, not in a page <style> block. Live example: sole-trader-vs-ltd.html.

Chrome: skip link (site-wide), .brand-bar with logo and .brand-title / .brand-subtitle, main.page, .notice for caveats, .toc for on-this-page, tables in .table-wrap, then .footer. Powerr stays on .brand-title only. Body type is Source Sans 3. Measure is --note-measure (820px). Colours are the [01] palette tokens, not a second note palette.

#ecece8

Note page ground (no grid).

#0e0e0e

Note body and headings.

#c03600

Note links and h3.

#f7f7f4

Notice, TOC, and table header.

Notes
Sample heading

Shareable note

Paper document for a URL you can send. Not a hire section.

Notice. Caveats and “not advice” lines use this panel.