Standard Framework - Typography, Grid, Rhythm, Color

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).

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 est laborum.

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:

"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
            });
        

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

col-12 (Full width)
col-6 (Half)
col-6 (Half)
col-4 (Third)
col-4 (Third)
col-4 (Third)
col-3
col-3
col-3
col-3

Responsive Grid

Columns adapt at breakpoints (md: #{$small}, lg: #{$large}):

12 → 6 → 4
12 → 6 → 4
12 → 12 → 4

Free Column Positioning

Precise control with CSS variables:

Main content
--start: 1; --span: 7
Sidebar
--start: 9; --span: 4

Gap Variants

Tight gaps
Tight gaps
Tight gaps
Wide gaps
Wide gaps
Wide gaps

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.

Tight Rhythm

Spacing multiplier: 0.75×

Loose Rhythm

Spacing multiplier: 1.5×

Lists & Hierarchy

Lists maintain rhythm with proper indentation:

  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.
[Figure Placeholder]
Figures and captions maintain rhythm spacing

Color is the Emotion

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

Color Palette

Red
Orange
Yellow
Green
Cyan
Blue
Purple
Pink

Semantic Colors

Background
Foreground
Secondary

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

Wide Feature Content

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:

Demo 1 Demo 2 Demo 3

Wide demo

Form Elements

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

Contact Information

Markdown Enhancements

Add the .md class for enhanced callouts and formatting:

Note

Standard callout for general information and notes.

Warning

Warning callout for cautionary information.

Important

Important callout for critical information.

Collapsible Callout

Click the title to expand and collapse this content.