Example

Heading Hierarchy

Each heading level maintains precise mathematical relationships based on the golden ratio (φ = 1.618).

Smart Typography

The JavaScript engine automatically enhances your text with proper typographic conventions:

• “Straight quotes” become “curly quotes”
• Double hyphens — become em-dashes—like this
• Three periods… become proper ellipsis…
• Fractions like ½ become ½
• No orphaned words on last lines

“Typography is the craft of endowing human language with a durable visual — Robert Bringhurst

Code & Monospace

Inline code like const standard = new Standard() and code blocks maintain rhythm:

// Initialize Standard
const standard = new Standard({
    locale: 'en',
    enableSmartQuotes: true,
    enableWidowPrevention: true,
    observeDOM: true
});

Lists & Hierarchy

Lists maintain rhythm with proper indentation:

• Unordered lists use centered bullets
• Proper indentation with –rhythm
• Nested lists maintain rhythm
  • Second level nesting
  • Consistent spacing
    • Third level nesting

1. Ordered lists use right-aligned numbers
2. Tabular number formatting
3. Mathematical precision
   1. Nested ordered lists
   2. Maintain alignment

Special Elements

Blockquotes, code blocks, and figures get generous spacing:

Special elements receive —rhythm-block-gap-special (2× rhythm) to create visual breathing room and emphasize their importance.

Color is the Emotion

Automatic light/dark theming with analog-inspired colors. Zero configuration— respects prefers-color-scheme automatically.

Color Palette

Semantic Colors

Text Colors

Normal text color

Muted text (60% opacity)

Subtle text (40% opacity)

Accent color text

Success message

Warning message

Error message

Reading Layout System<

Editorial-quality layouts for long-form content. Inspired by centuries of book design with flexible content areas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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.

Main content continues here in the default area.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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.

Image Galleries

Multiple images in a paragraph create automatic galleries:

Form Elements

Consistent form styling that integrates with the rhythm system and color management.

Markdown Enhancements

Add the .md class for enhanced callouts and formatting: