Hello World

This is the opening paragraph of a long test article. It should feel like a real piece of writing while exercising every typographic primitive we care about. There is bold text here, italic text rendered in serif for editorial contrast, and a piece of inline code to confirm the inline-code styling works alongside flowing text. There is also strikethrough when needed.

A paragraph can also contain a link to an external page which should pick up the accent color on hover, and another sentence to give the eye some line-length to settle into. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

A second-level heading

Section headings establish rhythm in long-form writing. The thin rule above the heading is intentional — it lets the eye know a new section is starting without shouting about it. Body text under a heading should breathe.

Below this paragraph, three paragraphs in a row to confirm spacing between consecutive <p> elements is consistent and comfortable. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Sunt in culpa qui officia deserunt mollit anim id est laborum. The previous three paragraphs should sit at comfortable line-height with consistent vertical spacing.

A third-level heading

H3 is for sub-sections inside an H2 block. It is smaller and quieter, with less vertical breathing room than H2.

A short paragraph immediately after an H3 to confirm spacing doesn't feel cramped.

Lists

Three different list styles, side by side:

• An unordered list item
• A second item, slightly longer to confirm wrap behaviour and indentation are correct on a wider screen
• A third item that fits on a single line

1. An ordered first item
2. An ordered second item
3. An ordered third item

Task list (GFM):

• A task that is not done
• A task that is done
• Another task to do tomorrow

Blockquote

The fastest software I use every day is also, by a margin, the quietest. It doesn't ping. It doesn't ask permission. It doesn't talk about its own velocity. It just does the work, and then disappears.

— Someone clever, probably

Code

Inline code lives like const answer = 42; inside a sentence, with subtle background tint and a fine border.

A TypeScript code block:

interface User {
  id: string;
  name: string;
  email: string;
}
 
async function loadUser(id: string): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) {
    throw new Error(`Failed to load user ${id}`, { cause: response });
  }
  return response.json();
}

A shell command:

pnpm install && pnpm dev

A TSX snippet, longer:

import { useState } from 'react';
 
interface CounterProps {
  initial?: number;
  step?: number;
}
 
export function Counter({ initial = 0, step = 1 }: CounterProps) {
  const [count, setCount] = useState(initial);
 
  return (
    <button
      type="button"
      onClick={() => setCount((current) => current + step)}
      className="rounded-full border px-4 py-2"
    >
      Clicked {count} times
    </button>
  );
}

A table

Tables should align cleanly and respect the column widths defined by the content.

A horizontal rule

The rule below separates the body from a closing remark:

A final paragraph after the rule. Fin.