A monochrome, brutalist Medium-inspired Hugo blog theme that prioritizes smolweb compliance, accessibility, and IndieWeb principles.
Indiepaper embodies the brutalist web design movement with a focus on:
- Smolweb compliant: Minimal, semantic HTML with efficient CSS
- Accessibility first: WCAG 2.1 AA compliance from foundation
- IndieWeb native: Full support for decentralized web protocols
- Typography focused: Strong, beautiful type hierarchy despite minimalism
- Performance optimized: Fast loading, minimal compute, works everywhere
- Monochrome Design: Pure black and white aesthetic with no embedded fonts
- Responsive: Single column naturally adapts to all screen sizes
- Accessible: WCAG 2.1 AA compliant with proper ARIA landmarks
- IndieWeb Ready: Complete microformats2 support (h-card, h-entry, h-feed)
- Webmentions: Built-in support for webmention.io integration
- Multiple Feeds: RSS, JSON, and Atom feed support
- Print Optimized: Clean print styles with proper page breaks
- Fast: Single CSS file, no JavaScript required for core functionality
# In your Hugo site directory
hugo mod init github.com/yourusername/yoursite
hugo mod get github.com/brennanbrown/indiepaperAdd to your hugo.toml:
[module]
[[module.imports]]
path = "github.com/brennanbrown/indiepaper"cd themes
git submodule add https://github.com/brennanbrown/indiepaper.git indiepapercd themes
git clone https://github.com/brennanbrown/indiepaper.gitAdd to your hugo.toml:
theme = "indiepaper"
[params]
description = "Your site description"
motto = "Your site motto"
mainSections = ["post"]
[params.author]
name = "Your Name"
email = "your@email.com"
url = "https://yourwebsite.com"
bio = "Your bio"
photo = "/your-photo.jpg"
[params.indieweb]
webmention_endpoint = "https://webmention.io/yourdomain/webmention"
webmention_api = "https://webmention.io/api/mentions.jf2"
token_endpoint = "https://tokens.indieauth.com/token"
authorization_endpoint = "https://indieauth.com/auth"
micropub_endpoint = "https://yourdomain.com/micropub"
microsub_endpoint = "https://aperture.p3k.io/microsub/123"hugo server -D- Complete Specification Sheet - Detailed design requirements
- Demo Site - See the theme in action
- Configuration Guide - Full customization options
[params]
description = "Your site description"
author = "Your Name"
email = "your.email@example.com"
motto = "Your site motto"
# IndieWeb endpoints
[params.indieweb]
token_endpoint = "https://tokens.indieauth.com/token"
authorization_endpoint = "https://indieauth.com/auth"
micropub_endpoint = "https://your-micropub-endpoint.com/micropub"
webmention_endpoint = "https://webmention.io/yourusername/webmention"
webmention_api = "https://webmention.io/api/mentions.jf2"
# Social links (rel-me)
[[params.social]]
name = "Mastodon"
url = "https://mastodon.social/@username"
[[params.social]]
name = "GitHub"
url = "https://github.com/username"Create posts in content/post/ with front matter:
---
title: "Your Post Title"
date: 2024-01-01T12:00:00Z
draft: false
summary: "Brief summary of the post"
tags: ["tag1", "tag2"]
categories: ["category1"]
image: "/images/post-image.webp"
syndication:
- https://bsky.app/profile/username/post/123456789
---Create short notes in content/notes/ for microblog-style content.
Use the provided shortcode for smolweb-compliant images:
{{< img src="/images/photo.webp"
alt="A beautiful sunset over mountains"
caption="Sunset in the Rockies"
link="/images/photo-full.webp" >}}- h-card: Author/site identity in header
- h-entry: Blog posts and articles
- h-feed: Post listings and archives
- h-cite: Webmentions and responses
Configure webmention.io to receive responses from across the web. The theme automatically displays webmentions on individual posts.
Add syndication links to your front matter to publish on multiple platforms while owning your content.
- Headers: Geometric humanist sans-serif (Avenir, Montserrat, Corbel)
- Body: Old-style serif (Iowan Old Style, Palatino Linotype)
- Code: Monospace (ui-monospace, Cascadia Code, Source Code Pro)
Pure monochrome palette:
- Black:
#000000 - Dark Grey:
#333333 - Medium Grey:
#666666 - Light Grey:
#999999 - Off-White:
#f5f5f5 - White:
#ffffff
- Single column centered layout
- Maximum width: 65ch (optimal reading measure)
- Generous line height for readability
- No responsive CSS needed (natural mobile adaptation)
- WCAG 2.1 AA compliant
- Semantic HTML5 structure
- Proper heading hierarchy
- Skip links for keyboard navigation
- Focus indicators on interactive elements
- Screen reader friendly
- 4.5:1 contrast ratios for text
indiepaper/
├── layouts/
│ ├── _default/
│ │ ├── baseof.html # Base template
│ │ ├── single.html # Single post
│ │ └── list.html # List pages
│ ├── partials/
│ │ ├── header.html
│ │ ├── footer.html
│ │ ├── nav.html
│ │ └── webmentions.html
│ ├── index.html # Homepage
│ ├── index.json # JSON feed
│ └── shortcodes/
│ └── img.html # Image shortcode
├── static/
│ ├── style.css # Single CSS file
│ ├── robots.txt
│ └── favicon.ico
└── exampleSite/ # Demo content
The theme includes npm-based testing:
cd exampleSite
npm install
npm testTests include:
- HTML validation
- CSS linting
- IndieWeb microformats validation
- Feed validation
- Accessibility testing
MIT License - see LICENSE for details.
Contributions are welcome! Please read the specification for design principles and requirements.
- Specification Sheet - Complete design requirements
- IndieWeb - Decentralized web protocols
- Smolweb - Minimal web principles
- WCAG 2.1 - Accessibility guidelines
Indiepaper - Write. Publish. Own your content.
🍓 Berry House
Indiepaper was created by Berry House. We build fast, accessible JAMstack websites and help independent creators, non-profits, and small teams communicate clearly and own their platform.
Whether you're looking to amplify your writing or build an independent website, we're here to help you create and share meaningful work with the world.
