Standard is built on the belief that design systems should be rooted in centuries of typographic tradition, mathematical precision, and the timeless principles of Swiss International Style.
"Typography is the craft of endowing human language with a durable visual form." — Robert Bringhurst
Every measurement derives from the golden ratio (φ = 1.618)
Classical typography rules that CSS cannot handle. Automatic enhancement of text with smart quotes, proper punctuation, em-dashes, fraction formatting, and widow prevention.
12-column responsive grid inspired by Josef Müller-Brockmann with asymmetric layouts and free column positioning.
Bulletproof spacing system where all elements align to a baseline grid using 1rlh units
Automatic light/dark theming with semantic colors and high-contrast support.
Editorial-quality layouts optimized for long-form content with multiple width variants.
Complete 11ty plugin with Markdown enhancements, backlinks, encryption, and filters.
A fine-art design framework implementing classical typography, Swiss grid systems, and vertical rhythm with mathematical precision.
npm init -y
npm install --save-dev @11ty/eleventy
npm install @zefish/standardCreate eleventy.config.js:
import Standard from "@zefish/standard";
export default function (eleventyConfig) {
eleventyConfig.addPlugin(Standard);
return {
dir: { input: "content", output: "_site" }
};
}Create _includes/layouts/base.njk:
<!DOCTYPE html>
<html lang="en" data-theme="default">
<head>
{% standardMeta %}
<title>{{ title or "My Site" }}</title>
{% standardAssets %}
</head>
<body>
<header>
<h1>My Website</h1>
{% standardMenu 1 %}
</header>
<main class="prose md">
{{ content | safe }}
</main>
<footer>
<p>© {% year %}</p>
</footer>
</body>
</html>Create content/index.md:
---
layout: layouts/base.njk
title: Home
---
# Welcome
Beautiful website. Beautiful typography. No CSS to write.Build and view:
npx @11ty/eleventy --serveDone. Your website is live at http://localhost:8080 🚀
- Professional Typography — Golden ratio proportions, perfect spacing
- Responsive Design — Mobile, tablet, desktop — all handled
- Dark Mode — Automatic system preference detection
- Accessibility — WCAG AA compliant from the start
- No Configuration — Works out of the box
- Small & Fast — 15KB CSS, 2KB JS (gzipped)
- 11ty Integration — Enhanced markdown, backlinks, encryption
Comprehensive guides and API reference:
- CSS Framework - Typography, grid, spacing, colors
- 11ty Plugin - Setup, markdown, filters, backlinks
- Quick Start - Build your first site in 5 minutes
- Getting Started - Complete setup guide
- Markdown Enhancements - Extended markdown syntax
- Filters & Helpers - Data transformation
- Backlinks - Wiki-style linking
- Encryption - Password protection
- Advanced Features - Power user techniques
- Typography System - Font scales and sizing
- Grid System - Responsive layouts
- Color System - Light/dark theming
- Spacing & Rhythm - Vertical rhythm
- Full API Docs - Auto-generated from source code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Hello World</h1>
<p>Beautiful typography, automatically.</p>
</body>
</html><div class="grid">
<div class="col-sm-row col-6 col-lg-4">
Full width on mobile, half on tablet, third on desktop
</div>
<div class="col-sm-row col-6 col-lg-4">...</div>
<div class="col-sm-row col-12 col-lg-4">...</div>
</div>---
layout: layouts/article.njk
title: My Article
---
# {{ title }}
Learn about [[TypeScript]] and [[Web Development]].
Backlinks automatically appear on those pages!---
layout: layouts/article.njk
title: Premium Content
password: members-only
---
# Exclusive Article
Password protected, decrypts in the browser.Override CSS variables:
:root {
--color-accent: #0066cc;
--font-family-serif: "Georgia", serif;
--line-width: 60rem; /* Optimal reading width */
}Inspired by:
- Robert Bringhurst — The Elements of Typographic Style
- Josef Müller-Brockmann — Swiss grid systems
- The web typography community
- Homepage: standard.ffp.com
- GitHub: github.com/ZeFish/Standard
- npm: @zefish/standard
Standard Framework — Stop configuring. Start creating. ✨