Example Document

This page demonstrates all of the styled elements available for your documents. Use it as a reference when writing new pages.

Typography

Body text uses Inter for readability. Code elements use JetBrains Mono for that dev feel. You can use inline code anywhere within paragraphs.

Third-level heading

Use headings to structure your document. The stylesheet provides clean spacing and subtle bottom borders on <h2> elements to act as section dividers.

Fourth-level heading

Rendered in a slightly muted colour to create visual hierarchy without over-competing with higher headings.

Code Blocks

// Example: a simple function
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('world'));

Lists

Unordered

First item in the list
Second item with some inline code
Third item — lists keep comfortable spacing

Ordered

Clone the repository
Add your HTML file to docs/
Push to main — it's live

Blockquotes

Blockquotes are useful for call-outs, notes, or quoting external sources. They feature a coloured left border tied to the accent colour.

Tables

Property	Light	Dark
Background	`#fafafa`	`#0f0f17`
Text	`#1a1a2e`	`#e4e4ef`
Accent	`#4361ee`	`#7b8cff`

Links

Standard links like back to home use the accent colour with a smooth hover transition.