How to Customize Your Documentation Theme

One of the first things teams want to do with HermesDocs is make it match their brand. Here’s how to customize colors, typography, and layout.

1. Update Site Configuration

Edit src/config.ts to change the site name, title, and description. These values appear in the header, footer, and meta tags.

export const siteConfig = {
  name: 'YourProduct',
  title: 'Your Product Documentation',
  description: 'Official docs for Your Product',
  // ...
};

2. Replace the Logo

Drop your logo SVG into public/ and update the header and footer. The header uses hermes.svg by default—swap it for your own asset and adjust the alt text.

3. Adjust Colors

HermesDocs uses Tailwind CSS. Override colors in tailwind.config.mjs or src/styles/global.css. The accent purple (#854BF3) is used for links, badges, and highlights—change it to your brand color.

4. Typography

The default font is Signika, loaded from Google Fonts. Change the font in BaseLayout.astro and global.css to match your brand guidelines.

5. Footer and Header

Customize src/components/Header.astro and src/components/Footer.astro for navigation links, social icons, and footer copy. The footer supports multiple columns for documentation, resources, and company links.

With these adjustments, you can have a fully branded docs site in under an hour.