# Hermes Agent design system

> Hermes Agent design system measured from hermes-agent.nousresearch.com: Rules Gothic Condensed font, 8 color hex codes, type scale and spacing.

Canonical page: https://sitepeel.dev/design-md/hermes-agent.nousresearch.com/

Hermes Agent’s website (hermes-agent.nousresearch.com) uses the Rules Gothic Condensed font and #0000C2 as its main color on a #0000F2 background. Measured by Sitepeel on November 5, 2026.

## What font does Hermes Agent use?

Hermes Agent uses Rules Gothic Condensed (weights 200 and 400) and Rules Gothic Compressed (weights 400 and 500) on hermes-agent.nousresearch.com. Page titles are 108px at weight 200 (66px on phones) and body text is 14px. Measured on November 5, 2026.

- Rules Gothic Condensed (weights 200, 400)
- Rules Gothic Compressed (weights 400, 500)
- Rules Regular (weights 400)
- Rules Variable (weights 400)

## Hermes Agent colors: palette and hex codes

Hermes Agent’s main colors are #0000F2 (vivid indigo) for the background, #F2F2F2 (mist) for text and #0000C2 (indigo) as the main accent, with #000091 (dark indigo) and #2828E9 (vivid indigo) as other accents. Measured on November 5, 2026.

- #0000F2: vivid indigo
- #F2F2F2: mist
- #0000C2: indigo
- #FFFFFF: white
- #000091: dark indigo
- #2828E9: vivid indigo

## What is Hermes Agent built with?

Hermes Agent’s website (hermes-agent.nousresearch.com) is built with Next.js, React, Radix UI, Tailwind CSS and Vercel. Measured on November 5, 2026.

- JavaScript framework: Next.js 16.4.3, React 19.3.0-canary-278794d7-2
- Hosting & CDN: Vercel
- Animation & 3D: Lenis 1.3.26, Three.js r185
- Analytics: Vercel Web Analytics, Google Ads, LinkedIn Insight Tag
- UI & CSS: Radix UI, Tailwind CSS 4.x

## Questions and answers

### What font does Hermes Agent use?

Hermes Agent’s website uses Rules Gothic Condensed (weights 200 and 400) and Rules Gothic Compressed (weights 400 and 500). Page titles are 108px at weight 200 (66px on phones) and body text is 14px. Measured on November 5, 2026.

### What are the Hermes Agent colors and hex codes?

On hermes-agent.nousresearch.com: #0000F2 (vivid indigo) for the background, #F2F2F2 (mist) for text and #0000C2 (indigo) as the main accent, with #000091 (dark indigo) and #2828E9 (vivid indigo) as other accents. The color palette above lists all 8 colors with their hex codes and where each one is used.

### What is the Hermes Agent design system?

The design system on this page is hermes-agent.nousresearch.com’s, as measured on November 5, 2026: Rules Gothic Condensed type, #0000C2 as the main color and 3px corners, written down as a DESIGN.md. It is not Hermes Agent’s own documentation.

### What is Hermes Agent built with?

Hermes Agent’s website (hermes-agent.nousresearch.com) is built with Next.js, React, Radix UI, Tailwind CSS and Vercel. The full tech stack Sitepeel found: Next.js, Vercel, React, Lenis, Three.js, Vercel Web Analytics, Radix UI, Tailwind CSS, Google Ads and LinkedIn Insight Tag. Measured on November 5, 2026.

### What is the Hermes Agent DESIGN.md?

A plain-text file with Hermes Agent’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this Hermes Agent’s official design system?

No. Sitepeel measured it from hermes-agent.nousresearch.com’s public page on November 5, 2026. It is an independent analysis, not made or approved by Hermes Agent.

### Can I use Hermes Agent’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Hermes Agent’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/hermes-agent.nousresearch.com/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with Hermes Agent.

## The DESIGN.md file

```markdown
---
version: alpha
name: Hermes Agent
description: "Dark interface measured from hermes-agent.nousresearch.com: Rules Gothic Condensed type with Rules Gothic Compressed, indigo accents, flat surfaces and 3px corners."
colors:
  background: "#0000F2"
  surface: "#0000F2"
  on-surface: "#F2F2F2"
  on-background: "#F2F2F2"
  overlay: "#FFFFFF1A"
  overlay-strong: "#F2F2F233"
  primary: "#0000C2"
  on-primary: "#FFFFFF"
  secondary: "#000091"
  tertiary: "#2828E9"
typography:
  headline-display:
    fontFamily: Rules Gothic Condensed
    fontSize: 108px
    fontWeight: 200
    lineHeight: 1
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Rules Gothic Condensed
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Rules Gothic Compressed
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.1
  headline-sm:
    fontFamily: Rules Gothic Compressed
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.4
  body-md:
    fontFamily: Rules Regular
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
  body-lg:
    fontFamily: Rules Variable
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: Aeonik Fono Pro TRIAL
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
  label-lg:
    fontFamily: Rules Condensed
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  label-md:
    fontFamily: Rules Condensed
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1
  label-sm:
    fontFamily: Rules Condensed
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1
  headline-display-mobile:
    fontFamily: Rules Gothic Condensed
    fontSize: 66px
    fontWeight: 200
    lineHeight: 1
    letterSpacing: -0.02em
  headline-md-mobile:
    fontFamily: Rules Gothic Compressed
    fontSize: 41px
    fontWeight: 500
    lineHeight: 1.1
rounded:
  sm: 1.77px
  md: 3px
spacing:
  xs: 4px
  sm: 5px
  md: 12px
  lg: 30px
  xl: 60px
  gutter: 30px
  section: 80px
components:
  button-primary:
    backgroundColor: "#F2F2F2E6"
    textColor: "{colors.background}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.md}"
    padding: 7px 12px
    height: 36px
  button-secondary:
    backgroundColor: "#FFFFFFFA"
    textColor: "{colors.background}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 0px 10px
    height: 36px
  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    rounded: 0px
    padding: 6px 12px
    height: 29px
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: 10px 12px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: 0px
    padding: 60px 10px
  link:
    textColor: "{colors.on-surface}"
---

# Hermes Agent Design System

## Overview

Hermes Agent describes itself as: “The official Hermes Agent from Nous Research. A free, open-source AI agent with memory and skills. Download for Mac, Windows or Linux.” The interface is dark, built on **Vivid Indigo (#0000F2)** with **Mist (#F2F2F2)** text, and **Indigo (#0000C2)** as the main accent.

Type is set in **Rules Gothic Condensed** and **Rules Gothic Compressed**. Headlines run large with tight negative tracking; body text is 14px. Depth comes from hairline borders and inset highlights rather than drop shadows. Corners are mostly 3px.

Measured from [hermes-agent.nousresearch.com](https://hermes-agent.nousresearch.com/) on November 5, 2026 at 1440×900 and 390×844 from 287 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 8 roles.

- **Vivid Indigo (#0000F2):** Page background, seen 10 times. Token `background`, CSS `--background-base`.
- **Mist (#F2F2F2):** Primary text and headings, seen 34 times. Token `on-surface`, CSS `--midground`.
- **White 10% (#FFFFFF1A):** Translucent fill for cards and controls, seen 2 times. Token `overlay`.
- **Mist 20% (#F2F2F233):** Stronger translucent fill, seen 1 time. Token `overlay-strong`.
- **Indigo (#0000C2):** Brand color on large areas, seen 2 times. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Dark Indigo (#000091):** Accent in text, fills and borders, seen 37 times. Token `secondary`.
- **Vivid Indigo (#2828E9):** Accent in logos and imagery. Token `tertiary`.

## Typography

**Rules Gothic Condensed**, **Rules Gothic Compressed**, **Rules Regular**, **Rules Variable**, **Aeonik Fono Pro TRIAL** and **Rules Condensed** share the interface. Fallback stack: `Rules Gothic Condensed, Rules Variable, sans-serif`.

- **headline-display:** Rules Gothic Condensed 108px at weight 200, line height 1, tracking -0.02em (66px on mobile). Page title (h1).
- **headline-lg:** Rules Gothic Condensed 80px at weight 400, line height 1, tracking -0.02em. Section headings (h2).
- **headline-md:** Rules Gothic Compressed 48px at weight 500, line height 1.1 (41px on mobile). Sub-section headings.
- **headline-sm:** Rules Gothic Compressed 32px at weight 400, line height 1.4. Card and feature titles.
- **body-md:** Rules Regular 14px at weight 400, line height 1.43. Body text.
- **body-lg:** Rules Variable 16px at weight 400, line height 1.6. Lead paragraphs.
- **body-sm:** Aeonik Fono Pro TRIAL 10px at weight 400, line height 1.5. Secondary and small text.
- **label-lg:** Rules Condensed 15px at weight 500, line height 1.4, tracking 0.02em. Large buttons and tabs.
- **label-md:** Rules Condensed 14px at weight 500, line height 1. Buttons, navigation and labels.
- **label-sm:** Rules Condensed 12px at weight 400, line height 1, uppercase. Small labels and badges.

## Layout

Spacing does not follow a strict grid: 26% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 4px, sm 5px, md 12px, lg 30px, xl 60px.
- **Sections:** 80px vertical padding between major sections.
- **Gaps:** 30px is the most common gap in flex and grid layouts.

## Elevation & Depth

The design avoids drop shadows. Layers are separated by tonal surface steps and hairline rings:

- `color(srgb 0.380392 0.380392 0.568627 / 0.2) 0px 0px 0px 1px inset`

## Shapes

Most elements use 3px corners. Measured radii, most used first:

- **md (3px):** 60 elements.
- **sm (1.77px):** 26 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“INSTALL HERMES”):** #F2F2F2E6 fill, #0000F2 text, 15px/500, 3px radius, padding 7px 12px.
- **button-secondary (“INSTALL VIA TERMINAL”):** #FFFFFFFA fill, #0000F2 text, 14px/500, 3px radius, padding 0px 10px.
- **button-outline (“: Linux :”):** #0000F2 fill, #F2F2F2 text, 11px/400, padding 6px 12px.
- **button-ghost (“NOUS”):** transparent fill, #F2F2F2 text, 14px/500, 1.775px radius, padding 10px 12px.
- **card:** #0000F2 fill, #F2F2F2 text, 14.2px/400, padding 60px 10px.
- **link:** transparent fill, #F2F2F2 text, padding 0px.

## Do's and Don'ts

- Do use #0000F2 for the page.
- Do use #0000C2 as the brand accent: header, logo and key highlights.
- Do set headlines in Rules Gothic Condensed with tight tracking (-0.02em).
- Do reuse the measured spacing steps (5px, 12px, 30px).
- Do use 3px corners on most elements; larger surfaces also use 1.77px.
- Don't add drop shadows for depth; use hairline rings and borders and contrast.
- Don't introduce new font families beyond Rules Gothic Condensed, Rules Gothic Compressed, Rules Regular, Rules Variable, Aeonik Fono Pro TRIAL and Rules Condensed.
- Don't use #0000C2 for large backgrounds or body text.
- Don't make interface transitions slower than 0.2s.

## Motion

Interface transitions are quick: 0.15s, 0.2s.

- **Easing:** `cubic-bezier(0, 0, 0.2, 1)`, `cubic-bezier(0.4, 0, 0.2, 1)`, `ease`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/hermes-agent.nousresearch.com/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

```