Type, colour and the phone

Use measurements that are known to work, colour a phone's dark mode can't change, and a phone layout of its own.

The grid [proven], on a 1920 × 1080 page:

Type [proven]: the brand's own web fonts first. Otherwise a condensed display face, a semi-condensed body face, one serif italic "voice" word at most once a section, a mono face for labels, and a matched Arabic face (this Guide's own decks use Barlow Condensed, Barlow Semi Condensed, Instrument Serif italic, JetBrains Mono and Cairo). Never Courier New, Times, Arial or Calibri. Floors never broken at any width: labels 14 px, body 17 px, page headings 28 px. Headings in sentence case, left-aligned; lines of 45–75 characters.

Colour, locked against dark mode [proven]. A viewer's dark mode once turned a light world black.

• Set the ground and text colour of the page body, every page and every component explicitly, and write no dark-mode variant (no prefers-color-scheme block).

• Declare the whole document light only, so Chrome's forced dark mode (its auto dark theme) leaves the deck alone. Then mark light pages light only and dark pages dark, so scrollbars and controls match each ground. A plain "light" setting on the root or a page cancels the light-only lock there, and forced dark mode darkens that page (the code is below).

• Check it twice in Chrome: once with a dark colour-scheme preference emulated, once with auto dark mode emulated. The page must look identical to its normal render both times. Let the fonts finish loading before you compare (steps below).

• Neutral grounds; the frames carry the colour [proven]. Never tint, wash or grade a frame with a brand colour [proven].

• One accent per page, at most 5% of its area; hold the signature colour back for the payoff and the close [best available, not yet validated]. Tone strong accents down [proven].

• Tag every brand colour by its source: the brand book, a sample from the client's own files (an estimate until the client confirms it), or your own choice. A brand font is named only when it is identified.

• Contrast: 4.5:1 for body text, 3:1 for large text, checked with a contrast checker (steps below). For text over a frame, measure against the darkest and the lightest parts behind it.

Three layouts by width [proven]:

• wide (1280 px and up): a 16:9 page;

• medium (768–1279 px): flowing, with frames beside or above the text;

• phone (under 768 px): stacked, in the order frames, heading, text.

On phones every client table becomes stacked cards, one per option, and the page never scrolls sideways.

The fit check [proven] decides when a page splits, not a word count: at 1920 px the text fills at most 85% of its column, and at 1280 px it fits the page. As a guide, about 120 words fit beside a vertical pair, about 170 beside a single frame. A page that fails becomes a spread.

Do it yourself

Lock the colours against dark mode (the deck's HTML and CSS)

1. Declare only light for the whole document: put this in its head, or set color-scheme: only light on the page's root.

<meta name="color-scheme" content="only light">

1. Set color-scheme: only light on light pages and color-scheme: dark on dark pages.

2. Never write plain color-scheme: light on the root or a page: it cancels the only lock there.

Check the page in dark mode (Chrome DevTools)

1. Let the fonts finish loading.

2. Open Chrome DevTools → Rendering and turn on "Emulate CSS media feature prefers-color-scheme: dark". Compare the page with its normal render.

3. Turn that off, turn on "Emulate auto dark mode", and compare again.

Measure text contrast (WebAIM's contrast checker, or Chrome DevTools)

1. Take the text colour and the colour behind it; for text over a frame, the darkest and the lightest parts behind it.

2. Enter both colours in WebAIM's contrast checker and read the ratio. Or inspect the text in Chrome DevTools and open the colour picker beside its colour, which shows the contrast ratio.

3. Body text passes at 4.5:1 or more, large text at 3:1 or more.

Sources

• The WCAG (Web Content Accessibility Guidelines) contrast ratios; measurements checked on pages rendered at 390, 768, 1024, 1280, 1440 and 1920 px wide.