What it is
A monochrome, typography-first theme for personal and portfolio sites.
Black, white, and the greys in between. Everything else is done with type, spacing, and borders.
Three sections, each one optional:
- Posts: Markdown or MDX, tags, series navigation, a table of contents that follows you as you scroll, prev/next, reading time, RSS.
- Projects: a bordered card grid with a client-side skill filter. A project gets its own page only when you write one.
- Docs: grouped sidebar, on-this-page navigation, prev/next.
Drop about.md into src/content/pages/ and it is live at /about.
Who it's for
- Designers, photographers, and writers: a black-and-white portfolio, project cards with a skill filter, series posts, and a table of contents that keeps the focus on the work and the words.
- Developers, indie makers, and open-source maintainers: a personal site with a blog, project showcase, and docs section, typed Markdown/MDX content, code snippets, and one site.ts config file.
- Freelancers, consultants, researchers, and students: an about page, portfolio, résumé-style project grid, and blog on a fast static site with SEO, RSS, and dark/light mode built in.
Features
- Weight: Under 5 KB of JavaScript per page. Fonts are self-hosted and subset. Lighthouse 100 is the starting point, not a special build.
- One config file: Name, navigation, socials, homepage sections, analytics, feature flags - all of it lives in src/config/site.ts. You should not have to open a component to change your site.
- Dark and light: Both included. A toggle in the header, a configurable default, no flash on load.
- Accessibility: Semantic HTML, keyboard navigation, visible focus states, reduced-motion support, AAA contrast. Monochrome makes this easier, not harder.
- SEO: Canonical URLs, Open Graph, Twitter cards, JSON-LD (WebSite, Person, Article, Breadcrumb), sitemap, robots.txt, RSS. Set your URL and forget about it.
The stack
Astro 7 → Tailwind CSS 4 → MDX + Expressive Code
TypeScript throughout, typed content collections, Node 22.12+.
No backend, no environment variables. It builds to static files and deploys anywhere - a GitHub Pages workflow is included.
If you want a site that is black and white and gets out of the way of your writing, this is for you.
Live demo → https://astro-mono-theme.vercel.app
Documentation → https://astro-mono-theme.vercel.app/docs










