Hello there this is a line of text to show the line height. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Hello there this is a line of text to show the line height. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Hello there this is a line of text to show the line height. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Hello there this is a line of text to show the line height. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Hello there this is a line of text to show the line height. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Hello there this is a line of text to show the letter spacing.

Hello there this is a line of text to show the letter spacing.

Hello there this is a line of text to show the letter spacing.

Hello there this is a line of text to show the letter spacing.

The Craft of Writing for the Web

Good writing finds its way to readers through clarity and purpose. Whether you're crafting a technical specification or a personal reflection, the fundamentals remain the same. A well-structured paragraph flows naturally, guiding the reader from one idea to the next without friction. This is especially true when writing about complex topics like software development or design systems.

The difference between bold and strong is subtle but meaningful. Bold (<b>) is purely stylistic, while strong (<strong>) conveys semantic importance. Similarly, italic differs from emphasis—one is a visual treatment, the other tells screen readers to stress the word. In 1984, these distinctions didn't matter much. By 2024, they're essential for accessibility.

Consider the office filing cabinet: it organises information efficiently, but finding specific files still requires effort. Digital systems offer the same trade-offs. A good filing system might store 1/2 of your documents in frequently-accessed folders while archiving the remaining 3/4 for occasional reference. The efficacy of any system depends on how well it fits your workflow.

Links: Regular vs SmartLink

In MDX content, markdown links automatically become <SmartLink> components. This paragraph uses regular <a> tags: here's an internal link and an external link. Notice you must manually add target="_blank" and rel for external links.

This paragraph uses the <SmartLink> component instead. Here's an internal link and an external link . SmartLink automatically detects external URLs, adds the arrow indicator, and handles target/rel attributes. It makes authoring content significantly easier.

Keyboard & Interface Patterns

Modern applications rely on keyboard shortcuts for efficient navigation. Press Ctrl + S to save, or ⌘ + Shift + P to open the command palette. On macOS, the Option key often reveals hidden functionality. These conventions emerged from the office software era and persist today.

When documenting changes, use deleted text to show what was removed and highlighted text to draw attention to important updates. The strikethrough element (<s>) indicates content that's no longer accurate but remains for historical context, while deletion (<del>) marks actual removed content.

Scientific & Technical Notation

In scientific writing, superscripts and subscripts are essential. Water is written as H₂O, while Einstein's famous equation is E = mc². The x variable in f(x) = x² + 2x + 1 represents any real number. When the command Build complete appears in your terminal, you know the process finished successfully.

Small print often contains legal disclaimers or supplementary information that doesn't warrant full-size text. The book The Elements of Typographic Style by Robert Bringhurst remains the definitive reference for typography. As he notes, Typography exists to honor content.

Definitions & Abbreviations

A design token is a named entity that stores a visual design attribute. The W3C defines web standards, while CSS (no title attribute) handles styling. Notice how abbreviations with titles show a dotted underline indicating more information is available on hover.

For emphasis beyond italics, use the highlight component to make text pop with a background colour. For formal titles and acronyms in running text, Small Caps provides a distinguished appearance that doesn't disrupt the flow of reading.

Finding Flow in Creative Work H1

The first-level heading establishes the primary topic. It should be used sparingly—typically once per page. In this example, we explore the art of finding flow in creative work, a topic that affects writers, designers, and developers alike.

The Office Environment H2

Second-level headings divide major sections. They're the workhorses of content structure, appearing frequently throughout longer documents. A good heading hierarchy helps readers navigate efficiently and understand the relationships between ideas.

The modern office has evolved significantly since the filing cabinet era. Open floor plans, remote work, and digital-first workflows have transformed how we collaborate. Yet the fundamental need for focused work time remains unchanged.

Efficient Filing Systems H3

Third-level headings break down subsections. They're useful for grouping related content within a major section. Here we might discuss specific strategies for organizing digital files or managing reference materials.

Configuring Default Folders H4

Fourth-level headings are less common but valuable for detailed technical content. In documentation, they might describe specific configuration options or step-by-step instructions within a larger procedure.

Affiliate Programme Details H5

Fifth-level headings rarely appear outside deeply nested documentation. When you find yourself reaching for <h5>, consider whether your content structure might benefit from reorganisation.

Sufficiently Deep Nesting H6

Sixth-level headings exist for completeness but suggest your document structure may be overly complex. Most content works well with three or four heading levels at most.

Words Worth Quoting

Sometimes the best way to make a point is to let someone else make it for you. Blockquotes set quoted material apart from your own words, giving proper weight to borrowed wisdom.

The details are not the details. They make the design. This principle guides everything from typography to interface design—the small decisions accumulate into the overall experience.

In 1958, when we first began working on the Eames Lounge Chair, we understood that every joint, every angle, every material choice would compound. By 1972, we had produced over 150,000 units. Each one a testament to the idea that craft lies in the accumulation of countless small decisions.

The plain HTML <blockquote> above is what markdown produces. For attributed quotes with citations, use the <BlockQuoteCitation> component.

You can add a source title and URL for proper attribution:

For less prominent quotes, use the small prop:

Tabular Data

Tables organize data into rows and columns. In running text, numerals typically use old-style figures (like 1984 or 2024), but tables benefit from lining numerals that align vertically for easy scanning.

Tables can contain rows with <th> and <td> elements.

Mixed Content Tables

Tables can contain various content types including code, formatted text, and components:

Articles often benefit from a distinctive opening that draws readers in. The <IntroParagraph> component provides this by styling the first letter as a drop cap and rendering the first line in small caps.

The component automatically normalises whitespace from indented MDX content and works best with a substantial opening paragraph of 3–5 sentences.

The bleed prop extends images beyond the content column. Options are left, right, or full. These work best in layouts with defined grid columns.

Full-bleed images span the entire viewport width, creating dramatic visual breaks in long-form content.

The <Notion> component creates inline links to Notion pages with automatic title fetching and icon display. These links appear inline with surrounding text, like this reference to Notion Page which fetches its title automatically.

You can include multiple Notion links naturally: see Notion Page for checkout practices, or Notion Page for video documentation tips.

Provide a manual title to skip the fetch or override the page title: My Custom Title

Primary & Secondary Variants

The primary variant uses the accent colour fill, while secondary has a subtle border that highlights on hover.

Inline Variant

Use inline when you want multiple buttons on the same line rather than stacked and centered.

Read Articles Browse Notes About Me

Standard HTML Buttons

Standard HTML buttons and button-like inputs.

Submit Button Reset Button Disabled Button

Buttons with SVG icons automatically size the icon to match the text:

Icon First Continue

The <Center> component horizontally centers its children using flexbox. Useful for icons, logos, or anything that should sit in the middle:

The button above is wrapped in <Center>.

Each swatch shows the colour and optionally a name. Hover to see the CSS variable name; click to copy the computed hex value.

The swatch text colour automatically adjusts for contrast using OKLCH colour math. Swatches work at any size—the text scales responsively.

Code blocks without a title show just the syntax-highlighted code:

const colors = ['coral', 'blue', 'green'];
colors.forEach(c => console.log(c));

Add title="filename.js" to display a file name in the frame header, mimicking an editor tab:

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

console.log(greet('World'));

Use frame="terminal" for shell commands. Terminal frames get a different visual treatment:

npm create astro@latest my-project
cd my-project
npm install
npm run dev

Use {2,4-5} to highlight specific lines with a neutral marker. Line numbers and ranges work:

export const config = {
  siteName: 'My Site',        // highlighted
  baseUrl: 'https://example.com',
  theme: 'dark',              // highlighted
  language: 'en',             // highlighted
  version: '1.0.0',
};

Use ins={3-4} for additions (green) and del={2} for removals (red). Great for showing code changes:

async function fetchData(url) {
  const response = await fetch(url);
  const response = await fetch(url, {
    headers: { 'Accept': 'application/json' }
  });
  return response.json();
}

Use the diff language with + and - prefixes for a familiar diff view:

const API_VERSION = 'v1';
const API_VERSION = 'v2';

function getEndpoint(path) {
  return `/api/${API_VERSION}/${path}`;
  return `/api/${API_VERSION}/${path}?format=json`;
}

Default pill uses the secondary background colour:

Default

Custom colours via the color prop:

Coral Blue Green Purple Orange

Override text colour with textColor if needed:

Custom Text