Prose Demo

This page demonstrates the full range of markdown-generated HTML elements styled through the --nextexample-* token namespace. Each section exercises a distinct element type so you can verify spacing, typography, and colour tokens at a glance.

---

Headings

Use the hierarchy below to check that vertical spacing and type-scale tokens produce clear section boundaries without excessive gaps.

Second-level sub-section

The h3 heading above should sit closer to the h2 above it than to the content that follows — the heading visually "belongs" to the content below.

Third-level detail heading

The h4 above is the smallest heading level in the prose demo. It shares leading-tight line-height with h2 and h3 but uses a smaller text-h4 font size.

---

Text Formatting

Prose pages rely on inline formatting to convey emphasis and editorial meaning without extra structure.

A sentence can contain bold text to stress an important term, italic text to indicate titles or introduce vocabulary, and ~~strikethrough text~~ to mark deprecated or removed content. Combinations are valid: bold italic or ~~bold strikethrough~~. The styles should not break line-height or disrupt the baseline rhythm.

---

Inline Code

Inline code appears inside sentences to name identifiers, file paths, or short expressions.

Pass the --flow-space custom property on an element to override the container's default vertical gap for that element only. The file lives at src/styles/prose.css and is imported by the page layout.

---

Code Blocks

Fenced code blocks render inside <pre><code> elements. The demo requires no syntax highlighting; raw colouring from code-bg and code-fg tokens is sufficient.

// Wiring the prose token namespace for the nextexample demo
const proseTokens = {
  vspMd:        `var(--nextexample-vsp-md)`,
  textBody:     `var(--nextexample-text-body)`,
  leadingRelaxed: `var(--nextexample-leading-relaxed)`,
  codeBg:       `var(--nextexample-code-bg)`,
  codeFg:       `var(--nextexample-code-fg)`,
  fontMono:     `var(--nextexample-font-mono)`,
} as const;

export default proseTokens;

The block above should display with consistent horizontal padding derived from hsp-sm, a background from code-bg, and text coloured by code-fg.

---

Unordered List

Lists check that vsp-xs (item-to-item) and vsp-md (list-to-surrounding content) tokens produce balanced rhythm.

• Token categories in the prose namespace
  • Vertical spacing: vsp-2xs through vsp-2xl
  • Horizontal spacing: hsp-xs through hsp-xl
  • Type scale: text-h2 through text-micro
• Line-height tokens
  • leading-tight — headings
  • leading-snug — sub-headings and list items
  • leading-relaxed — body paragraphs
• Code surface tokens
  • code-bg, code-fg, font-mono

---

Ordered List

Ordered lists share spacing tokens with unordered lists; the marker style differs but the rhythm should be identical.

1. Define the token set in --nextexample-* namespace.
2. Wire the flow utility into the prose container:
   1. Apply margin-block-start: var(--flow-space, ...) to all children.
   2. Set per-element --flow-space overrides using :where() selectors.
   3. Tighten consecutive headings with a heading + heading adjacent rule.
3. Map the type-scale and line-height tokens to each heading and paragraph.
4. Apply code-surface tokens to <pre> and inline <code> elements.

---

Blockquote

A blockquote uses a left border coloured by --color-accent or --color-muted, with horizontal padding from hsp-md.

The flow utility assigns spacing to one margin direction only. This makes spacing predictable in block flow, flex, and grid containers without relying on margin collapse.

A multi-paragraph blockquote checks that internal spacing between paragraphs is governed by the same --flow-space mechanism rather than ad-hoc margins.

First paragraph of a multi-paragraph quote. It introduces the main idea and ends here.

Second paragraph continues the thought. Both paragraphs should have consistent internal rhythm.

---

Tables

A comparison table exercises text-small, hsp-sm cell padding, and border tokens.

| Demo | Framework | MDX component overrides | |---|---|---| | astro | Astro + Preact | Yes — components prop on <Content /> | | next | Next.js App Router | Yes — useMDXComponents / MDXRemote | | vite | Vite + React | Optional — depends on remark/rehype setup | | zfb | Zudo Framework Base | Container CSS with :where() selectors | | zfb-tailwind | Zudo Framework Base + Tailwind | Container CSS inside @layer components |

---

Horizontal Rule

A <hr> element marks a thematic break. It should have visible contrast against the page background and carry top and bottom spacing derived from vsp-lg.

---

Links

Links check --color-accent and underline treatment.

Visit the project repository on GitHub to browse the source for all demo pages. Return to home to see the component gallery.

The home link above uses the configured basePath for this Next.js demo. Each Wave-2 sub-task substitutes the correct value:

• Astro — import.meta.env.BASE_URL
• Next.js — /pj/zudo-design-token-panel/examples/next/ (the configured basePath)
• Vite + React — relative index.html or import.meta.env.BASE_URL
• zfb / zfb-tailwind — full base-prefixed path from the build config

---

Token reference

The visual appearance of this page is driven entirely by the --nextexample-* token namespace. Vertical rhythm comes from vsp-2xs through vsp-2xl. Horizontal padding and indent come from hsp-xs through hsp-xl. Type sizes are set by text-h2, text-h3, text-h4, text-body, text-small, and text-micro. Line-heights use leading-tight, leading-snug, and leading-relaxed. Code blocks are styled with code-bg, code-fg, and font-mono. Heading borders and blockquote accents reuse the shared --nextexample-color-primary, --nextexample-color-muted, and --nextexample-color-accent tokens — no additional colour tokens are required.