Halftone

Halftone is a free, MIT-licensed newsmagazine theme for Astro that builds page hierarchy from a photograph instead of from type. The home page is a cover plate — one large picture holding the wordmark, the lead headline and the cover lines — and the article page opens the same way.

What is Halftone?

Halftone is a magazine-style front-end template for the Astro framework, authored by ondelva. It takes Markdown and MDX content from type-safe content collections and outputs a static site: a home cover, four desk fronts with pagination, article pages, a colophon, a 404 page, a feed and a sitemap, plus robots.txt and JSON-LD. The distinguishing visual device is the cover line, a labelled teaser comprising a kicker box, a headline and a short deck set directly on the photograph.

Key Features

• Astro 7 + Tailwind CSS v4 — static output with zero client-side JavaScript on a default build; package.json pins an exact pnpm version.
• Cover plates and cover lines — the signature layout, repeated on the home cover and on every desk front.
• Four desks with desk fronts — desks are the publishing axis rather than issues, so the magazine publishes continuously; each front paginates.
• Three article formats — a report with an article rail beside it, a brief, and a photo essay.
• Article rail — figures blocks and a "more from the desk" list running alongside the piece.
• Share cards from the article photograph — feed, sitemap, robots.txt, JSON-LD and social cards all generated at build time.
• Analytics slot — Plausible, GA4 or Umami, switched off until you name a provider.
• Accessibility and performance checks in CI — Lighthouse 95+ across all four categories and WCAG AA on every colour pair, with responsiveness from 360px and dark mode included.
• Styleguide at /styleguide — every colour token and type size on one page during pnpm dev.

Who is it for?

• Independent publishers and magazine editors: launch a photo-forward editorial site where the lead image carries the hierarchy, without a CMS backend.
• Photographers and photo editors: use the photo essay format and cover plates to put images first rather than treating them as decoration.
• Astro and Tailwind developers: start from typed content collections (Markdown and MDX) with an AGENTS.md file prepared for Claude Code or Cursor, and override colour tokens in src/styles/theme.css plus fonts in astro.config.mjs.

How does Halftone work?

Scaffold with pnpm create astro@latest my-magazine -- --template ondelva/astro-theme-halftone, install, and run pnpm dev. Site-specific settings — name, URL, navigation, social links, cover lines and the analytics slot — live in src/config.ts; deployment is a static build that works on Cloudflare, Vercel, Netlify and GitHub Pages, with SITE_URL set afterwards.

Pricing

The free repository is MIT-licensed with a single removable footer credit line. Halftone Pro is a commercially licensed edition at $49 for one person or $129 for a team of up to ten, adding series, tag and contributor pages, an archive, Pagefind search, MDX components (callout, pull quote, table of figures, code-block copy), multi-language routing, and newsletter, giscus and contact-form integrations.