Skip to content

Welcome to Hermes Prime

Hermes Team · · 3 min read
Hermes Prime theme showcase

This is your first blog post with Hermes Prime — a reference-quality Astro theme built for 2026. We’ve designed it to combine simplicity with exceptional polish, so you can launch a production-ready blog without redesigning everything.

What You Get Out of the Box

Hermes Prime isn’t a barebones starter. It’s a complete theme that demonstrates best practices for modern content websites.

Beautiful Typography

We’ve paired Source Serif 4 for body content with Geist for the interface. Source Serif 4 is an optical size axis font—it adapts its design based on the size you’re using, which means crisp rendering at both 16px and 48px. Geist brings a clean, neutral feel to navigation and UI elements.

The theme includes:

  • Perfect reading line width (around 65 characters)
  • Comfortable vertical rhythm
  • A proper heading scale
  • Great code block styling with Shiki

Light & Dark Mode

Theme switching respects system preference by default. Users can override with a manual toggle. Crucially, there’s no flash—we inject a small inline script that runs before paint to set the correct theme from localStorage or prefers-color-scheme.

Performance First

  • Near-zero JavaScript by default—no framework runtime
  • View Transitions API for smooth, app-like navigation
  • Optimized images via Astro’s Image component
  • Font optimization with font-display: swap and preconnect

Accessibility

  • Semantic HTML throughout
  • Skip to content link
  • Keyboard navigation
  • Focus states on all interactive elements
  • Color contrast that meets WCAG AA

SEO

Every page outputs proper metadata:

  • Sitemap generation
  • Canonical URLs
  • OpenGraph and Twitter cards
  • Article structured data
  • Meta descriptions

Code Blocks

Shiki powers syntax highlighting. You get accurate, themeable code blocks:

function greet(name: string) {
  return `Hello, ${name}!`;
}

// Async/await, generics, all supported
async function fetchData<T>(url: string): Promise<T> {
  const res = await fetch(url);
  return res.json();
}
/* CSS with proper highlighting */
.prose pre {
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
}

Blockquotes and Callouts

Note: You can use blockquotes for callouts. For more structured admonitions (info, warning, tip), add MDX components and use them in your posts.

Lists and Structure

The theme supports:

  • Unordered lists with proper indentation
  • Ordered lists for step-by-step content
  • Nested lists when you need hierarchy
  • Task lists with - [ ] and - [x] syntax

Next Steps

  1. Edit src/lib/site.ts — Add your site name, description, URL, and social links
  2. Update astro.config.mjs — Set the site URL for sitemap and canonical URLs
  3. Add posts — Drop Markdown or MDX files into src/content/blog/
  4. Customize — Tweak colors and typography in src/styles/global.css
  5. Deploy — Push to Vercel, Netlify, or Cloudflare Pages

Getting Help

  • Check the Astro docs for framework details
  • Review the project structure in the README
  • Fork and adapt—Hermes Prime is built to be a starting point, not a constraint

Happy writing!