Standard Framework

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

Mathematical Precision

Every measurement derives from the golden ratio (φ = 1.618)

Fine-Art Typography Engine

Classical typography rules that CSS cannot handle. Automatic enhancement of text with smart quotes, proper punctuation, em-dashes, fraction formatting, and widow prevention.

Swiss Grid System

12-column responsive grid inspired by Josef Müller-Brockmann with asymmetric layouts and free column positioning.

Vertical Rhythm

Bulletproof spacing system where all elements align to a baseline grid using 1rlh units

Color System

Automatic light/dark theming with semantic colors and high-contrast support.

Reading Layout

Editorial-quality layouts optimized for long-form content with multiple width variants.

11ty Ready

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.

Getting Started

npm init -y
npm install --save-dev @11ty/eleventy
npm install @zefish/standard

Create 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>
  
  <title></title>
  
</head>
<body>
  <header>
    <h1>My Website</h1>
    {% standardMenu 1 %}
  </header>

  <main class=“prose md“>
    
  </main>

  <footer>
    <p>&copy; </p>
  </footer>
</body>
</html>

Create content/index.md:


title: Home

# Welcome

Beautiful website. Beautiful typography. No CSS to write.

Build and view:

npx @11ty/eleventy –serve

Done. Your website is live at §§URL§§0§§ 🚀

What You Get

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

Documentation

Comprehensive guides and API reference:

User Guides

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

11ty Features

Markdown Enhancements – Extended markdown syntax
Filters & Helpers – Data transformation
Backlinks – Wiki-style linking
Encryption – Password protection
Advanced Features – Power user techniques

CSS Features

Typography System – Font scales and sizing
Grid System – Responsive layouts
Color System – Light/dark theming
Spacing & Rhythm – Vertical rhythm

API Reference

Full API Docs – Auto-generated from source code

Examples

Basic HTML

<!DOCTYPE html>
<html>
<head>

</head>
<body>
  <h1>Hello World</h1>
  <p>Beautiful typography, automatically.</p>
</body>
</html>

Responsive Grid

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

11ty with Backlinks


title: My Article

# 

Learn about [[TypeScript]] and [[Web Development]].

Backlinks automatically appear on those pages!

Protected Content


title: Premium Content
password: members-only

# Exclusive Article

Password protected, decrypts in the browser.

Customization

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

Team Members

Invite your team members to collaborate.

Sofia Davis

[email protected]

box
Jackson Lee

[email protected]

box
Isabella Nguyen

[email protected]

box

Cookie Settings

Manage your cookie settings here.

Strictly Necessary

These cookies are essential in order to use the website and use its features.

Functional Cookies

These cookies allow the website to provide personalized functionality.

Performance Cookies

These cookies help to improve the performance of the website.

Payment Method

Add a new payment method to your account.

Sofia Davis

[email protected]

Hi, how can I help you today?

Hey, I'm having trouble with my account.

What seems to be the problem?

I can't log in.

Create an account

Enter your email below to create your account

Or continue with

Report an issue

What area are you having problems with?