A formatting showcase
This is a second sample, and its only job is to show what a plain markdown file becomes here. Everything below is written in ordinary Markdown: the same syntax you’d use in Obsidian, a README, or a note app. No HTML, no special editor, nothing to learn.
Read it on your phone. That’s where most of these pages get opened, so that’s what the type is tuned for. Eighteen-pixel body, a measured line length, and a font drawn so a lowercase l, a 1, and a capital I never blur into one another.
The text itself
Prose is the point, so it gets the most care. You get bold for weight, italic for emphasis, and a highlight when something needs to stop the eye. Inline code sits in its own tint. Links underline themselves, so they’re never colour alone[1].
Small niceties happen on their own: straight quotes become “curly” ones, a double hyphen turns into a dash, and three dots fold into an ellipsis…
Headings hold the shape
This is a second-level heading. Under it sit the smaller ones.
A third level
Still clearly a heading, just quieter.
And a fourth
The steps between sizes are deliberately gentle, so a long document never feels like it’s shouting from one section to the next.
Callouts, for the things that matter
Write > [!info] on its own line and the box builds itself. The colour and the icon follow whatever type you name.
One good callout reads as important. Five in a row read as noise.
This one folds away
Tap the title to open or close it. Good for an aside you don’t want to push on every reader.
Anything personal, legal, or medical stays off this lane. This is the public one.
Tables stay out of their own way
| Feature | You write | You get |
|---|---|---|
| Highlight | ==text== |
a marked span |
| Footnote | [^note] |
a linked note below |
| Task | - [ ] |
a real checkbox |
| Callout | > [!tip] |
a coloured box |
Hairlines only. No heavy grid, no zebra stripes. The alignment does the work a border would.
Lists, plain and checked
A plain list nests where it needs to:
- A first point
- A second, with two underneath
- One sub-point
- And its neighbour
- Back out to the top level
A checklist keeps its boxes, ticked or not:
Code, kept legible
A value like max-width: 680px reads fine inline. Longer things get their own block:
// one markdown file in, one clean page out
const page = render(read(doc.path));
publish(page);
There are no syntax colours, on purpose. They wouldn’t survive a grayscale print, and the page stays calm without them.
A quote, when someone put it better
Typography is the craft of endowing human language with a durable visual form. — Robert Bringhurst
Footnotes that link both ways
Drop a marker in the sentence and the note collects at the bottom[2], with a link back to where you were reading. Useful for a source or a caveat you don’t want breaking the line of thought.
Linking between pages
A wikilink to a published page resolves cleanly: see the welcome page. A link to something you haven’t published shows as plain grey text rather than a dead end, so it never leaks the name of a draft you’re still keeping private.
That’s the whole vocabulary. Write a markdown file, send the link.