Back to themes

Mono

monochrome portfolio + blog + docs with a quiet animated starfield


Cost

Paid


Created by
M!l!nd

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