Prose System

Create beautifully styled, readable articles with automatic vertical rhythm, optimal line lengths, and professional typography.

Quick Navigation

Basic Prose Layout

The .prose class transforms any container into a beautifully styled, readable article or content area:

Default prose container:

Article Title

This is how prose content looks when styled with the prose system. All typography, spacing, and layout are automatically applied. The prose container ensures your content is readable with optimal line length and professional appearance.

Paragraphs have consistent spacing based on the vertical rhythm system. Each paragraph is separated by proper spacing that creates visual breathing room without appearing disconnected.

<article class="prose">
  <h1>Article Title</h1>
  <p>Your content here stays within optimal reading width with perfect spacing...</p>
  <p>Multiple paragraphs maintain consistent rhythm throughout the document.</p>
</article>

Heading Hierarchy

The prose system includes six levels of heading hierarchy, each with carefully calculated sizing and spacing:

All heading levels:

H1 – Main Article Heading

This is your primary page heading, largest and most prominent.

H2 – Section Heading

Divides content into major sections within the article.

H3 – Subsection Heading

Creates a third level of organization for detailed content.

H4 – Minor Heading

Breaks up content within subsections.

H5 – Sub-minor Heading

Rarely used but available for deep nesting.

H6 – Small Heading

The smallest heading level, typically used for special sections.

<article class="prose">
  <h1>Main Article Heading</h1>
  <p>Introduction paragraph...</p>
  
  <h2>First Major Section</h2>
  <p>Content for this section...</p>
  
  <h3>Subsection within first section</h3>
  <p>More detailed content...</p>
  
  <h2>Second Major Section</h2>
  <p>More content...</p>
</article>

Paragraph Styling

Paragraphs automatically receive optimal line height, spacing, and typography:

Paragraphs with rhythm spacing:

This paragraph has proper line-height (1.618 for body text) for comfortable reading. The golden ratio ensures each line has optimal spacing. Longer paragraphs are easier to read when line-height is generous but not excessive.

Each paragraph is automatically separated from the next by the rhythm spacing. This creates visual breathing room and helps readers process content in digestible chunks. The spacing is based on your typography’s line-height multiplier.

The prose system applies these styles automatically. You don’t need to add classes to individual paragraphs—just write semantic HTML and the system handles the rest.

<article class="prose">
  <p>First paragraph with automatic spacing and styling.</p>
  <p>Second paragraph appears below with proper vertical rhythm.</p>
  <p>Each paragraph receives consistent treatment throughout the article.</p>
</article>

Lists

Lists are automatically styled with proper indentation and spacing within prose containers:

Unordered list example:

Benefits of the Prose System

Ordered list example:

Steps to Create a Prose Container

  1. Add the .prose class to your container element
  2. Write semantic HTML with proper heading hierarchy
  3. Add paragraphs, lists, and other content elements
  4. All styling is applied automatically
  5. Customize with CSS variables if needed

Description list example:

Typography Terms

Line Height
The vertical distance between lines of text. The prose system uses 1.618 (golden ratio) for comfortable reading.
Vertical Rhythm
Consistent spacing throughout a layout. All elements align to a baseline grid for visual harmony.
Reading Width
The ideal line length (60–75 characters) for comfortable reading. The prose system keeps content within this range.
<article class="prose">
  <!-- Unordered list -->
  <ul>
    <li>First item</li>
    <li>Second item with more details</li>
    <li>Third item concluding the list</li>
  </ul>

  <!-- Ordered list -->
  <ol>
    <li>First step in a process</li>
    <li>Second step continues the process</li>
    <li>Final step completes the process</li>
  </ol>

  <!-- Description list -->
  <dl>
    <dt>Term</dt>
    <dd>Definition of the term goes here with complete explanation.</dd>
  </dl>
</article>

Blockquotes

Blockquotes are styled to stand out while maintaining visual harmony with the rest of your prose:

Blockquote styling:

Here’s a powerful thought from a famous author:

The beautiful thing about learning is that no one can take it away from you. Every investment you make in yourself comes back with dividends throughout your life. It‘s not about money, it’s about growth.

This blockquote is styled to emphasize the quoted content while maintaining visual rhythm with surrounding paragraphs.

<article class="prose">
  <p>Here's a meaningful quote:</p>
  <blockquote>
    <p>Your blockquoted text appears here in italics with a left border accent, creating visual emphasis.</p>
  </blockquote>
  <p>Continue your prose after the blockquote with normal styling.</p>
</article>

Code Blocks

Code examples within prose are styled with syntax highlighting support:

Inline code:

Use the .prose class on any container to enable prose styling. You can also use the class="prose" attribute directly in your HTML.

Code block:

JavaScript Example

// Apply prose styling to content
const article = document.querySelector('article');
article.classList.add('prose');

// Now all typography and spacing is automatically applied

console.log('Prose styling activated!');



<article class="prose">
  <p>Inline code example: use <code>variable_name</code> in your code.</p>
  
  <pre><code>
// Code block with multiple lines
function exampleFunction() {
  return "This code appears in a styled block";
}
  </code></pre>
</article>

Tables

Tables within prose are responsive and automatically styled:

Table example:

Feature Comparison

Feature Description Availability
Vertical Rhythm Automatic spacing based on line-height All elements
Reading Width Optimal line length for readability Prose containers
Heading Hierarchy Six levels with scaled sizing H1 through H6
Typography System Golden ratio based proportions All text elements 
<article class="prose">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
    </tbody>
  </table>
</article>

Text Emphasis

Within prose, emphasis elements are styled appropriately:

Text emphasis examples:

Use strong tags for bold text to emphasize important points. The em tag creates italic text for gentle emphasis. You can also use b tags for bold and i tags for italic.

For marked or highlighted text, use the mark element. Deleted or removed text looks like this deleted text. New or inserted text appears as this inserted text.

Special formatting: Subscript like H2O or superscript like E=mc2 are automatically styled.

<article class="prose">
  <p>This is <strong>bold text</strong> and <em>italic text</em>.</p>
  <p><mark>Highlighted text</mark>, <del>deleted text</del>, <ins>inserted text</ins>.</p>
  <p>H<sub>2</sub>O and E=mc<sup>2</sup> subscript and superscript.</p>
</article>

Links

Links within prose maintain visual hierarchy while remaining accessible:

Link styling:

This paragraph contains a standard link to another page. The link is styled distinctly so readers can identify it. Visited links appear in a different color to show where you’ve already been.

Links are underlined and color-coded for accessibility. Hover over a link to see the hover state. Active links show their current state with different styling.

<article class="prose">
  <p>Read more in the <a href="/docs/typography/">typography documentation</a>.</p>
  <p>Visit the <a href="/css/grid/">grid system guide</a> for layout examples.</p>
</article>

Prose with Sidebars

Combine prose with sidebar layouts for more complex article structures:

Main content with sidebar:

Article with Sidebar

This is the main article content using the prose system for optimal readability. The prose class ensures all typography and spacing is perfectly proportioned.

Main Content Section

Articles often benefit from having a sidebar for supplementary information, advertisements, or related links. The prose system maintains perfect spacing even with adjacent sidebars.

Sidebar

<div class="display-grid gap-base" style="grid-template-columns: 1fr 250px;">
  <article class="prose">
    <h1>Article Title</h1>
    <p>Main article content with optimal reading width...</p>
  </article>
  
  <aside>
    <h3>Related Content</h3>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
    </ul>
  </aside>
</div>

Heading Spacing

The prose system carefully manages spacing before and after headings for visual hierarchy:

Heading spacing in context:

This paragraph comes before a heading. Notice the spacing below it.

This is an H2 Heading

The paragraph after a heading has consistent spacing. H2 headings have larger top margin (spacing above) than bottom margin (spacing below) to maintain rhythm.

This is an H3 Heading

Smaller headings like H3 have proportionally smaller spacing. The rhythm system maintains perfect alignment throughout the entire document.

Multiple paragraphs between headings maintain the same consistent spacing.

<article class="prose">
  <h1>Main Heading</h1>
  <p>Paragraph after main heading...</p>
  
  <h2>Section Heading</h2>
  <p>Content under this section...</p>
  <p>Another paragraph...</p>
  
  <h3>Subsection Heading</h3>
  <p>More detailed content...</p>
</article>

Callouts and Highlighted Sections

Special content can be highlighted using callout styling:

Callout block:

Here’s some regular prose content.

Pro Tip

This is a highlighted callout section. Use it for important notes, warnings, or tips. The callout styling draws attention while maintaining visual harmony with surrounding prose.

Content continues after the callout.

<article class="prose">
  <p>Regular prose content...</p>
  
  <div class="callout">
    <div class="callout-title">Important Note</div>
    <p>Content inside the callout gets highlighted styling.</p>
  </div>
  
  <p>More prose continues below...</p>
</article>

Images and Figures

Images within prose maintain visual harmony:

Image with caption:

Here’s an image embedded in prose:

[Placeholder Image]
A sample figure with caption text. Captions provide context for images in your article.

The image maintains proper spacing before and after in the prose flow.

<article class="prose">
  <p>Introduction before the image...</p>
  
  <figure>
    <img src="/images/example.jpg" alt="Description of image">
    <figcaption>Caption text appears below the image</figcaption>
  </figure>
  
  <p>Content continues after the image...</p>
</article>

Reading Width Variants

The prose system supports different reading widths for different content types:

Standard prose (default width):

Medium Width (Default)

This is the default prose width – optimal for most article content. At approximately 42rem (672px), this width provides excellent readability with approximately 60–75 characters per line depending on font size and spacing.

Narrow prose (for sidebars):

Small Width

Narrower prose width for sidebar content or supplementary information. Still maintains perfect readability at a reduced width.

Wide prose (for special content):

Large Width

Wider prose width for feature articles or special content that benefits from more horizontal space while maintaining readability principles.

<!-- Standard prose width (42rem / 672px) -->
<article class="prose">
  <h1>Article Title</h1>
  <p>Content here uses optimal reading width...</p>
</article>

<!-- Narrow prose for sidebars -->
<aside class="prose" style="width: 32rem;">
  <h3>Sidebar Content</h3>
  <p>Narrower content area...</p>
</aside>

<!-- Wide prose for feature content -->
<article class="prose" style="width: 50rem;">
  <h1>Featured Article</h1>
  <p>Wider layout for special content...</p>
</article>

Full-Width Content Within Prose

Sometimes you need full-width elements inside prose containers:

Full-width element inside prose:

Here’s regular prose content at the optimal reading width.

Full-Width Section (breakout element)

Content returns to normal prose width after the full-width section. This allows for impactful visuals while maintaining reading flow.

<article class="prose">
  <p>Regular prose content...</p>
  
  <div class="full">
    <!-- Full-width element breaks out of prose constraints -->
    <section style="background: var(--color-accent);">
      Full-width impactful content
    </section>
  </div>
  
  <p>Prose continues at normal width after the full-width section...</p>
</article>

Nested Prose

You can nest prose containers for different contexts:

Nested prose example:

Main Article Section

This is the main prose content. You can have different prose containers for different sections of content.

Nested Prose Container

This nested section has its own prose styling applied. It might represent a sidebar, special section, or supplementary content with different styling context.

<article class="prose">
  <h1>Main Article</h1>
  <p>Main content...</p>
  
  <section class="prose">
    <h2>Special Section</h2>
    <p>This section has its own prose styling context...</p>
  </section>
</article>

Customization with CSS Variables

Override prose defaults with CSS variables:

:root {
  /* Heading spacing multiplier */
  --rhythm-multiplier: 1;
  
  /* Line height for body text */
  --line-height-base: 1.618;
  
  /* Line height for headings */
  --line-height-headings: 1.2;
  
  /* Font sizes (automatically scaled) */
  --font-size-base: 16px;
  
  /* Reading width (prose container max-width) */
  --line-width: 42rem;
}

Best Practices

✓ Do

✗ Don’t

Advanced Patterns

Blog Post with Multiple Sections

<article class="prose">
  <h1>Complete Guide to Prose Styling</h1>
  <p>Introduction paragraph setting up the article topic...</p>
  
  <h2>Getting Started</h2>
  <p>Section content here...</p>
  
  <h3>First Concept</h3>
  <p>Details about the first concept...</p>
  
  <h3>Second Concept</h3>
  <p>Details about the second concept...</p>
  
  <h2>Advanced Topics</h2>
  <p>Moving into more complex territory...</p>
  
  <h3>Deep Dive</h3>
  <p>In-depth exploration of advanced topics...</p>
</article>

Long-Form Article with Sidebars

<div class="display-grid gap-base" style="grid-template-columns: 1fr 300px;">
  <article class="prose">
    <h1>In-Depth Article</h1>
    <p>Long-form content with perfect readability...</p>
  </article>
  
  <aside class="prose" style="width: 100%;">
    <h3>Quick Reference</h3>
    <ul>
      <li>Key point 1</li>
      <li>Key point 2</li>
    </ul>
  </aside>
</div>

Documentation with Code Examples

<article class="prose">
  <h1>API Documentation</h1>
  
  <h2>Installation</h2>
  <pre><code>npm install @example/package</code></pre>
  
  <h2>Basic Usage</h2>
  <p>Here's how to use the package:</p>
  <pre><code class="language-javascript">
import { example } from '@example/package';
example();
  </code></pre>
  
  <h2>Advanced Configuration</h2>
  <p>For advanced use cases...</p>
</article>

See Also

Master readable, beautiful content. Learn spacing and rhythm