Prose Demo

This page demonstrates the full range of markdown-generated HTML elements styled through the --zfb-* 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 zfb demo
const proseTokens = {
  vspMd:        `var(--zfb-vsp-md)`,
  textBody:     `var(--zfb-text-body)`,
  leadingRelaxed: `var(--zfb-leading-relaxed)`,
  codeBg:       `var(--zfb-code-bg)`,
  codeFg:       `var(--zfb-code-fg)`,
  fontMono:     `var(--zfb-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 --zfb-* 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.

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 / to see the component gallery.

The home link above resolves from the repo root (base: "/").

Token reference

The visual appearance of this page is driven entirely by the --zfb-* 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 --zfb-color-fg, --color-muted, and --color-accent tokens — no additional colour tokens are required.