Type Scale & Components

A living typography page for quick visual checks. Tweak sizes in tailwind.config.cjs or override via utilities.

Fonts Used

This template uses the system UI font stack by default for speed and readability, and a system monospace stack for code.

Body/UI: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
Monospace: the browser's default monospace stack via Tailwind's font-mono utility

Defined in src/assets/css/tailwind.css:

/* src/assets/css/tailwind.css */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.system-fonts {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

To change fonts, you can:

Swap the body { font-family: ... } in src/assets/css/tailwind.css.
Optionally add fontFamily under theme.extend in tailwind.config.cjs and use Tailwind utilities (e.g., font-sans, font-mono).

Heading 1

Heading 2

Heading 3

Heading 4

Body copy with bold and emphasis. Links look like this inline link. Small text appears as supporting detail.

Lists

Unordered list item
With sufficient spacing

Ordered list item
Use lists for steps

Blockquote

Ship small improvements often. The garden grows one commit at a time.

Code

// Syntax highlighting is provided client-side via Highlight.js
function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet('world'));