These are the standard Markdown and MDX elements styled through zudo-doc's design token system. No imports are needed.

## Headings

Headings from `h2` to `h4` appear in the table of contents sidebar.

### Heading 3

#### Heading 4

```mdx
## Heading 2
### Heading 3
#### Heading 4
```

### Overriding Content Typography

The page-title, content-heading, prose, and link typography above is driven by **component tokens** — `--zdc-*` CSS custom properties the `@takazudo/zudo-doc` package exposes as override seams. Because the components ship from the package (you cannot edit them directly), these tokens are your scope: redefine any of them in your own `:root` to rebrand the content area across every page, with no `!important` and no eject.

```css title="src/styles/global.css"
:root {
  --zdc-doc-title-font: "Georgia", serif;
  --zdc-doc-title-weight: 800;
}
```

| Token | Component | Default | What it controls |
| --- | --- | --- | --- |
| `--zdc-doc-title-font` | `doc-title` | `inherit` | Font family of the page-title `<h1>`. |
| `--zdc-doc-title-weight` | `doc-title` | `var(--font-weight-bold)` | Font weight of the page-title `<h1>`. |
| `--zdc-doc-title-tracking` | `doc-title` | `var(--tracking-normal)` | Letter spacing of the page-title `<h1>`. |
| `--zdc-doc-h2-font` | `heading-h2` | `inherit` | Font family of content `<h2>` headings. |
| `--zdc-doc-h2-weight` | `heading-h2` | `var(--font-weight-bold)` | Font weight of content `<h2>` headings. |
| `--zdc-doc-h2-tracking` | `heading-h2` | `var(--tracking-normal)` | Letter spacing of content `<h2>` headings. |
| `--zdc-doc-h3-weight` | `heading-h3` | `var(--font-weight-bold)` | Font weight of content `<h3>` headings. |
| `--zdc-doc-h4-weight` | `heading-h4` | `var(--font-weight-semibold)` | Font weight of content `<h4>` headings. |
| `--zdc-doc-prose-font` | `doc-prose` | `var(--font-sans)` | Font family of the `.zd-content` prose area. Headings with `--zdc-doc-*-font: inherit` inherit this value. |
| `--zdc-doc-link-decoration` | `content-link` | `underline` | Text decoration of prose links only (`ContentLink`, `a.text-accent.underline`); chrome links are unaffected. Set to `none` to remove underlines. |
| `--zdc-admonition-radius` | `admonition` | `0 var(--radius-DEFAULT) var(--radius-DEFAULT) 0` | Border radius of admonition/callout blocks. |
| `--zdc-admonition-border-width` | `admonition` | `4px` | Width of the admonition left accent border. |

For the full rundown — the ownership-inversion rationale, how these fit the three-tier token story, chrome tokens (card radius, TOC width, nav active styles), and why they are not editable in the Design Token Panel — see [Component Tokens](https://zudo-doc.takazudomodular.com/docs/reference/component-tokens).

## Text Formatting

**Bold text**, *italic text*, and ~~strikethrough~~. Combine them: ***bold and italic***.

```mdx
**Bold text**, *italic text*, and ~~strikethrough~~.
Combine them: ***bold and italic***.
```

## Inline Code

Use backticks to mark `inline code` within a sentence.

```mdx
Use backticks to mark `inline code` within a sentence.
```

## Code Blocks

Fenced code blocks use zfb's build-time semantic class-mode highlighter. Specify the language after the opening backticks. See the [Code Blocks](https://zudo-doc.takazudomodular.com/docs/components/code-blocks) page for the full rundown.

```ts
function greet(name: string): string {
  return `Hello, ${name}!`;
}
```

````mdx
```ts

function greet(name: string): string {
  return `Hello, ${name}!`;
}

```
````

### Supported Languages

zfb's class-mode highlighter supports a wide range of languages. Common ones include:

| Language | Identifier |
| -------- | ---------- |
| TypeScript | `ts`, `typescript` |
| JavaScript | `js`, `javascript` |
| HTML | `html` |
| CSS | `css` |
| JSON | `json` |
| Bash / Shell | `bash`, `sh`, `shell`, `zsh` |
| Markdown | `md`, `markdown` |
| MDX | `mdx` |
| YAML | `yaml`, `yml` |
| Python | `python`, `py` |
| Rust | `rust`, `rs` |
| Go | `go` |
| SQL | `sql` |
| GraphQL | `graphql` |
| Diff | `diff` |
| TOML | `toml` |
| JSX / TSX | `jsx`, `tsx` |

If a language identifier isn't recognised, the block falls back to a plain unhighlighted render.

## Unordered Lists

- First item
- Second item
  - Nested item
  - Another nested item
    - Deeply nested
- Third item

```mdx
- First item
- Second item
  - Nested item
  - Another nested item
    - Deeply nested
- Third item
```

## Ordered Lists

1. First step
2. Second step
1. Sub-step one
2. Sub-step two
3. Third step

```mdx
1. First step
2. Second step
   1. Sub-step one
   2. Sub-step two
3. Third step
```

## Blockquotes

> This is a blockquote. It can span multiple lines
> and supports **formatting** within it.

```mdx
> This is a blockquote. It can span multiple lines
> and supports **formatting** within it.
```

## Tables

| Feature    | Status      | Notes              |
| ---------- | ----------- | ------------------ |
| MDX        | Supported   | Built into zfb     |
| zfb class mode | Built-in | Code highlighting |
| zudo-wind | spec 1          | Token-based design |

```mdx
| Feature    | Status      | Notes              |
| ---------- | ----------- | ------------------ |
| MDX        | Supported   | Built into zfb     |
| zfb class mode | Built-in | Code highlighting |
| zudo-wind | spec 1          | Token-based design |
```

## Links

Internal link: [Getting Started](https://zudo-doc.takazudomodular.com/docs/getting-started)

External link: [Example external site](https://example.com)

```mdx
Internal link: [Getting Started](../getting-started/index.mdx)

External link: [Example external site](https://example.com)
```

## Horizontal Rules

Use three dashes to create a horizontal rule:

---

```mdx
---
```