Example
Heading Hierarchy
Each heading level maintains precise mathematical relationships based on the golden ratio (φ = 1.618).
Heading Level 1
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.
Heading Level 2
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 estlaborum.
Heading Level 3
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.
Heading Level 4
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.
Heading Level 5
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.
Heading Level 6
Body text with bold emphasis and italic stress.
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
});
Grid is the Structure
A Swiss-style 12-column responsive grid with logical properties. Inspired by Josef Müller-Brockmann and the International Typographic Style.
Basic Columns
Responsive Grid
Columns adapt at breakpoints (md: #{$small}, lg: #{$large}):
Free Column Positioning
Precise control with CSS variables:
--start: 1; --span: 7
--start: 9; --span: 4
Gap Variants
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
- Ordered lists use right-aligned numbers
- Tabular number formatting
- Mathematical precision
- Nested ordered lists
- 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.
Small Area
Perfect for supplementary information, footnotes, or sidebar content that doesn't need full width.
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.
Accent Area
Ideal for pullquotes, highlighted content, or important information that deserves extra attention.
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.
Feature Area
Perfect for images, videos, tables, or wide content
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.
Full Width Area
Extends to complete container width for full-bleed backgrounds or spanning content.
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: