Style Guide
“How every block in the editor looks on this site — and how to add it.”
Last updated 6 October 2026
This page is a living reference for everyone who writes on this site. Every block below was made with the Ghost editor, so what you see here is exactly what readers will see when you use the same card in a post or page — the Millie theme styles all of it automatically, in light and dark mode.
Two shortcuts do most of the work: type / on an empty line to open the card menu, or click the + button that appears beside an empty line. Paste a link on its own line and Ghost offers to turn it into a bookmark or an embed.
Headings
How to add — type ## and a space for a section heading, ### for a sub-heading and #### for a small heading. Or select text and choose H from the toolbar.
Use one H2 for each main section of a story (they also build the “On this page” index at the top of this guide), and H3 or H4 for the steps inside it. The page title is always the H1, so never add another.
A sub-heading (H3) groups a few paragraphs
Sub-headings stay in Playfair Display and are a step smaller than a section heading.
A small heading (H4) labels a short block
Paragraphs & inline styles
How to add — just start typing. Select any words to get the formatting toolbar, or use ⌘/Ctrl + B for bold, ⌘/Ctrl + I for italic and ⌘/Ctrl + K for a link.
Body text is set in Inter at a comfortable reading size. You can make a phrase bold for emphasis, use italics for titles and asides, link to another story (links are underlined in the accent colour), mark inline code with backticks, and highlight a key line by wrapping it in ==.
Keep paragraphs short — three or four sentences reads best on a phone. Press Shift + Enter for a line break inside a paragraph.
Lists
How to add — type - or * and a space for a bulleted list, or 1. and a space for a numbered list. Press Tab to indent an item and Enter twice to leave the list.
- Use bullets when the order does not matter.
- Keep each item to a line or two.
- Start items the same way — nouns or verbs, not a mix.
- Use numbers for steps that happen in order.
- Begin each step with the action.
- End with what the reader should see when it worked.
Quotes
How to add — type > and a space. Click the quote button in the toolbar a second time (or press > again) to switch to the larger, centred alternative quote.
The standard quote sits in a soft card with a dark rule — use it for a passage from someone else, a book or an interview.
The alternative quote is a centred pull-quote. Use it once per story, for the line you want readers to remember.
Divider
How to add — type --- on an empty line, or choose Divider from the / menu.
A divider marks a change of scene or a pause in the story — it is lighter than a new heading.
Use it sparingly: two or three in a long piece at most.
Callout
How to add — type /callout. Pick an emoji (or none) and a background colour from the card’s settings.
Callouts draw the eye to a tip, a warning or a short summary. The accent colour suits the single most important note; grey and white are calmer.
Toggle
How to add — type /toggle. Write the question in the heading and the answer below it — readers click to open it.
Toggles keep long answers tidy. They are ideal for FAQs, spoilers, transcripts and extra detail.
When should I use a toggle?
When the answer is useful to some readers but would interrupt everyone else — FAQs, footnotes, full transcripts or technical detail.
Can I put links and formatting inside?
Yes. The answer supports bold, italic and links, just like a paragraph.
Do toggles work on phones?
They do — the whole heading is a tap target, and the theme styles them for light and dark mode.
Button
How to add — type /button. Enter the label and link, and choose left or centre alignment.
Buttons are for one clear next step — a sign-up, a download, a booking. One per section is plenty.
Image
How to add — type /image, drag a photo into the editor, or paste one. Use the card toolbar to switch between regular, wide and full width, and always add alt text in the image settings.
A regular image sits in the text column with rounded corners. Click below the image to write a caption.
A wide image breaks out of the text column — good for landscapes and details you want to linger on.
A full-width image runs edge to edge across the screen. Use it once, as a pause between sections.
Gallery
How to add — type /gallery and select up to nine images. Drag them to reorder; Ghost arranges them in rows of up to three.
Galleries suit sets of related photos — a walk, a long lunch, a before-and-after.
Video
How to add — type /video and upload an MP4 or WebM file. Add a custom thumbnail and choose regular or wide width in the card settings. For YouTube or Vimeo, paste the link instead — see Embed below.
Audio
How to add — type /audio and upload an MP3, M4A or WAV file. Give it a title and, if you like, a small cover image.
Use it for voice notes, interviews and readings of your own essays.
File
How to add — type /file and upload any document. Edit the title and description that readers see; the file name and size are shown automatically.
Offer worksheets, PDFs and templates. Try it — this one is a printable editor cheat sheet.
Embed
How to add — paste a YouTube, Vimeo, Spotify, X, Instagram or CodePen link on an empty line and choose Embed — or type /youtube, /vimeo and so on.
Bookmark
How to add — paste a link on an empty line and choose Bookmark, or type /bookmark. Ghost fetches the title, description and image for you.
Bookmarks are the tidy way to point to a related story — on this site or anywhere else.
Product
How to add — type /product. Add an image, title, description, optional star rating and a button.
Use it for books you recommend, tools you use, or anything you would like readers to buy.
The Reading Notebook
A plain, lay-flat A5 notebook for quotes, margins and half-finished thoughts. The one I use for every essay on this site.
Header
How to add — type /header. Choose a layout (full, wide, split or regular), background colour or image, and an optional button.
A header card opens a new chapter in a long story, or introduces a series on a landing page.
A new chapter begins
Start readingCall to action
How to add — type /cta (Call to action). Write the message, add an optional image and button, and choose a background colour.
Use it to promote something mid-story — a newsletter, an event, or a sponsor.
Enjoying the guide? Members get every new essay, film and photo set by email, plus the full archive.
Signup
How to add — type /signup. Edit the heading, text and button label; choose a layout and background. Visitors subscribe right from the post.
Code block
How to add — type ``` followed by the language name (for example ```css) and press Enter, or choose Code from the / menu.
/* Millie’s accent colour */
:root {
--accent: #FF1A75;
}
.button {
background: var(--accent);
border-radius: 9999px;
}HTML
How to add — type /html and paste your own markup. Use it for things the editor has no card for — like a table.
| Shortcut | What it does |
|---|---|
/ | Open the card menu |
## + space | Section heading |
> + space | Quote |
--- | Divider |
``` | Code block |
Anything you write here is shown as-is, so keep it simple and check it in both light and dark mode.
Need something that is not here? Ask on the contact page and it can be added to this guide.