The quick brown fox jumps over the lazy dog

This is a lead paragraph — the kind that sits below an h1 and sets the tone for the article. It contains strong emphasis, italic emphasis, and a link to somewhere.

A standard paragraph follows. Body copy sits at --nice-base (default 1rem), with line-height driven by --nice-line-height. Inline code picks up a tinted background that adapts to whichever colour context the block is rendered in.

A second paragraph — because one is rarely enough to establish rhythm. Notice the space before the next heading: .flow's heading exception adds --flow-heading-extra of air on top of the base gap for any heading that follows another element.

A secondary heading

Secondary headings introduce major shifts in topic. They carry about the weight of a chapter subsection. Visit another link to exercise the focus ring — which uses --nice-color-link so it stays on-brand regardless of background.

A second paragraph under h2 gives the section room to breathe. At this level the heading is doing a lot of visual work, so generous space afterwards lets the eye adjust before settling into the body copy.

A tertiary heading

Tertiary headings handle subsections within a longer piece. At this depth, the heading announces a shift without demanding attention.

A second paragraph at this depth demonstrates body rhythm — adjacent paragraphs sit --flow-spacing apart (the base gap), notably tighter than the space before a heading.

A quaternary heading

Quaternary headings sit at --text-xl. Still distinct from body copy, but part of the article rather than crowning it.

A follow-up paragraph gives the h4 some content to anchor. At this depth the heading is mostly structural — a navigation aid for long-form writing rather than a display moment.

A fifth-level heading

h5 sits at --text-lg — close to body size, distinguished mostly by weight and font-family.

The second paragraph under h5 reads almost identically in size to the heading itself, so the visual hierarchy leans hard on the bold weight and heading font to do the distinguishing.

A sixth-level heading

h6 is body-sized — weight alone does the distinguishing at the deepest heading tier.

A closing paragraph at h6 depth. With body text and h6 at the same size, the only visual cue separating them is the heading's bolder weight and slightly tightened tracking.

Inline semantics

The module renders strong emphasis with extra weight and the heading colour, plus italic emphasis, small print at --text-sm, and superscript / subscript: E = mc², H₂O. Abbreviations like CSS get a dotted underline on hover, and highlighted passages use a tinted background that adapts to the surrounding colour context rather than falling back to browser-default yellow.

Keyboard input: press ⌘ K to open the command palette. Sample output uses the monospace face: → 200 OK.

Lists

Unordered and ordered lists, with nested children. Inter-item spacing uses flex + gap for clean margin-free stacking.

• First item in an unordered list
• Second item, slightly longer to show how multi-line list items wrap and breathe
• Third item with nested children:
  • A nested item — disc becomes circle
  • Another nested item
    • And one level deeper — circle becomes square
• Fourth item back at the top level

1. First step in a process
2. Second step, with more detail to show how numbered items handle wrapping
3. Third and final step

Definition lists

Measure

The length of a line of type, typically between 45 and 75 characters for comfortable reading.

Leading

The vertical space between lines of type, usually expressed as a multiple of the font size.

Tracking

The horizontal space applied uniformly across a run of characters — distinct from kerning.

Blockquote

A paragraph leads into the quote. Block quotes sit between paragraphs with their own visual weight — a left border and muted italic body distinguishes them from the surrounding copy without demanding attention.

Typography is the craft of endowing human language with a durable visual form. It is the most important part of graphic design — because it is the one part that readers actually read. — Robert Bringhurst

And a paragraph follows the quote, returning to the body rhythm. Notice that --flow-block-extra pushes the quote away from both adjacent elements so it reads as a distinct beat.

Code block

Code blocks carry a tinted background and tighter line-height, sitting as visual objects within the flowing text. They should feel solid without overwhelming the surrounding prose.

// A code block for longer snippets
function greet(name) {
    return `Hello, ${name}`;
}

greet("World");

A paragraph afterwards demonstrates how the rhythm picks up on the other side of the code block. Inline code references within body text keep the tinted-background treatment at a smaller scale.

Disclosure

The details and summary elements give you a native disclosure widget — no JavaScript, keyboard-accessible by default. The summary reads as a clickable heading; expanding reveals the wrapped content.

What's inside a modular scale?

A modular scale is a sequence of sizes derived from a single ratio. Here the ratio is --nice-ratio (default 1.2, a Minor Third). Each heading level multiplies body size by a power of the ratio, so the whole typographic system rescales coherently when you change one number.

A second disclosure, pre-expanded

When details is open, --nice-summary-open-spacing puts a small gap between the summary and its content so the expansion reads as intentional rather than crowded. Focus the summary with the keyboard to see the outline ring, which matches the anchor focus treatment.

Horizontal rule

A hairline rule marks a stronger break than a heading would — useful for separating distinct sections within a long article or marking the end of a thought.

---

And life continues after the rule. The generous margin above and below gives the break genuine visual weight without a heavy line doing the work.

Table

Tables render full-width, sized slightly smaller than body copy so dense data fits the measure without wrapping prematurely. The header row is anchored with a thicker bottom border; body rows separated by hairline rules.

Column one	Column two	Column three
Cell content	More cell content	Even more
Second row	Second row data	Final cell
Third row	More data	Last value

Tables benefit from the same breathing room that blockquotes and code blocks get — the extra space prevents the dense grid from colliding with the surrounding paragraphs.

Figure

Figures bundle an image, diagram, or embed together with a caption. The caption sits tightly under its figure and reads as a secondary voice — smaller, muted, centred.

A closing paragraph returns to the body rhythm after the figure, completing the visual pattern: block element bracketed by text on either side, with extra air contributed by --flow-block-extra on top of the base gap.