Standard Framework

Typography is the voice · Grid is the structure · Rhythm is the flow · Color is the emotion

A fine-art design framework implementing classical typography, Swiss grid systems, and vertical rhythm with mathematical precision inspired by centuries of print mastery.

Contents

1. Typography System
2. Grid System
3. Vertical Rhythm
4. Color Management
5. Reading Layout
6. Form Elements

Typography is the Voice

Standard implements fine-art typography with smart quotes, proper punctuation, widow prevention, and multi-locale support. The golden ratio governs all typographic relationships.

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 1/2 become ½
• No orphaned words on last lines

"Typography is the craft of endowing human language with a durable visual form." — 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
            });
        

Rhythm is the Flow

Mathematical vertical spacing based on 1rlh (root line-height) creates visual harmony and guides the eye naturally through content.

Consistent Spacing

All elements automatically align to the baseline grid. Headings, paragraphs, lists, blockquotes, forms, and media all follow the same rhythmic system.

Lists & Hierarchy

Lists maintain rhythm with proper indentation:

• Unordered lists use centered bullets
• Proper indentation with --space
• 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 --space-block-special (2× rhythm) to create visual breathing room and emphasize their importance.

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: