Use this page as a working template when building your site. Remove what you do not need and adapt the structure to your content.

Heading level 1

A short paragraph under an h1. Use one h1 per page for the main page title.

Heading level 2

A short paragraph under an h2.

Heading level 3

A paragraph under an h3 for major sections.

Heading level 4

A paragraph under an h4, often for subsections.

Inline elements: strong text, emphasised text, and a sample link.

Small text for quiet notes or captions.

Always include descriptive alt text for images, and use semantic <figure> and <figcaption> elements for illustrations with captions.

Unordered list

• Content first, design second.
• Use short paragraphs and clear headings.
• Prefer meaningful link text.

Ordered list

1. Copy this reference file.
2. Strip out demo content.
3. Add your own pages and routes.

Lead into a quotation with a normal paragraph.

Good tools are almost invisible; they let you stay with the work instead of the interface.

Someone sensible

Follow-on text shows how spacing behaves after the quote.

Inline code looks like git status or <section>.

Keyboard input can use Tab to move between links, or Ctrl + C / ⌘ + C as examples.

<article>
  <header>
    <h2>Example</h2>
    <p class="meta">Meta information</p>
  </header>
  <p>Body text for the article.</p>
</article>

Below are smaller cards showing how notes or posts might appear on an index page.

A brief note suitable for quick updates, bookmarks, or link posts.

A longer post starts with context, explains why the topic matters, and links out where helpful.

Additional paragraphs keep the rhythm readable rather than dense.