Typography

Headings

Heading 1: page title

Heading 2: major section

Heading 3: subsection

Heading 4: detail level

Heading 5

Heading 6

Body text

Regular paragraph text rendered in Outfit at 16.5px / line-height 1.7. Long-form prose is comfortable at full width across both Void (dark) and Slate (light) themes.

Bold text uses font-weight: 600, readable without being heavy. Italic for emphasis. Strikethrough for deprecated or removed content.

Inline code

Use inline code for commands, file paths, and short snippets. Styled with IBM Plex Mono, a subtle background, and a border.

`file path`, `variable`, `command --flag`

Keyboard keys <kbd>

Keyboard shortcuts rendered as chip-style keys with a subtle 3D border:

Press Ctrl + K to open the search bar.

Press Cmd + Shift + P to open the command palette.

Press <kbd>Ctrl</kbd> + <kbd>K</kbd> to open the search bar.

Blockquote

Use blockquotes for pull quotes, context notes, and referenced content. The left-border accent ties to the brand color.

Note: Blockquotes inherit the brand-color left border and a subtle tint background in both modes.

> This is a blockquote with a **bold** element inside.

Horizontal rule

---

Rules are thin, low-contrast, and non-distracting.

Abbreviations <abbr> with tooltip

Hover any abbreviation to see a styled tooltip:

The HTML document uses CSS for visual styling, and PromQL for metric expressions.

<abbr title="Prometheus Query Language">PromQL</abbr>

Inline HTML elements

Element	Render
<mark>	highlighted text
<sup>	E = mc2
<sub>	H2O
<del>	deprecated method
<ins>	replacement text