Hermes AI

Overview

Hermes AI is a technical documentation and community guide site for the self-improving AI agent built by Nous Research. The design system embodies a "Technical Minimalism" aesthetic—a high-contrast, precision-focused approach that prioritizes clarity and accessibility over decoration. The visual language combines sharp geometric typography (RulesExpanded for headlines, Mondwest for body), a pure black background (#000000), and a single accent color (bright blue #60a5fa) used sparingly on interactive elements and status indicators. The brand personality is authoritative yet approachable: the site speaks to developers and researchers with technical precision, avoiding hype while celebrating capability. The UI evokes a sense of control and transparency—every element has a clear purpose, every interaction is predictable, and the information hierarchy is unambiguous.

The voice is direct, instructional, and confident. Sentences are short and active: "Get Started →", "Read docs →", "20 Locales · 20 Fully Translated." The brand avoids marketing language and instead uses concrete, measurable claims. Example: "The only agent with a built-in learning loop — it creates skills from experience, improves them during use, and builds a deepening model of who you are across sessions." This is a site for people who value substance over style, and the design system reflects that commitment through relentless functional clarity.

Colors

The color palette is a study in high-contrast minimalism, designed for accessibility and focus. The primary surface is pure black (#000000), with a carefully calibrated surface stack that provides depth without sacrificing legibility. On-surface text is a cool off-white (#f8fafc), delivering 15:1 contrast ratio for WCAG AAA compliance. The surface-container family ranges from #060606 (surface-container-lowest) to #2d3449 (surface-container-highest), providing subtle visual separation for cards, modals, and nested components without introducing visual noise. Borders use #444748 (outline-variant) at 1px width, creating a crisp, technical aesthetic. The accent color—tertiary (#60a5fa)—is a vivid, saturated blue reserved exclusively for interactive elements (CTAs, focus states, status badges)

Typography

The type system is built on two primary families: RulesExpanded (a geometric, all-caps display font for headlines and navigation) and Mondwest (a clean, humanist sans-serif for body text and UI labels). This pairing creates a distinctive visual hierarchy: RulesExpanded headlines command attention through their geometric precision and tight letter-spacing (-0.02em on display, -0.015em on headline-lg), while Mondwest body text (16px, 400 weight, 24px line-height) remains highly legible at all sizes. The display level (72px, 700 weight, 80px line-height) is reserved for hero sections and major page titles; headline-lg (48px, 700 weight) anchors section breaks; headline-md (32px, 700 weight) introduces subsections. Body text uses 16px as the baseline (body-md), with 18px (body-lg) for introduc

Layout

The page layout uses a fluid, mobile-first grid system with a maximum container width of 1400px (defined in CSS as max-w-[1400px]). The grid is 12 columns on desktop, collapsing to 4 columns on tablet and 2 columns on mobile. Horizontal padding is 24px (gutter) on desktop, 16px on tablet, and 12px on mobile, ensuring consistent breathing room. Vertical spacing follows a semantic scale: 40px (lg) separates major sections, 24px (md) separates subsections and card groups, and 12px (sm) separates inline elements. The header is fixed at the top with a 56px height (14 * 4px unit), and the main content begins at 92px from the top (accounting for the secondary info bar). Cards and containers use 24px internal padding (md spacing) with 1px borders in #444748. The site supports 20 localized language

Elevation & Depth

Depth in this system is achieved through subtle layering and precise shadow values, not through dramatic visual effects. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.3)) for hover states on small elements, md (0 4px 12px rgba(0, 0, 0, 0.4)) for cards and dropdowns, and lg (0 16px 40px rgba(0, 0, 0, 0.5)) for modals and overlays. The black background (#000000) means shadows are rendered as darker blacks rather than true shadows, creating a "pressed into the surface" effect. Cards use surface-container (#111827) as their base, with a 1px border in outline-variant (#444748

Shapes

The shape philosophy is "Architectural Precision"—a technical, grid-aligned approach that avoids organic curves while maintaining approachability through subtle rounding. Buttons use rounded-DEFAULT (0.5rem / 8px) for a clean, modern appearance that feels neither too sharp nor too soft. Cards and containers use rounded-lg (1rem / 16px) to create visual breathing room and soften the technical aesthetic. Input fields use rounded-DEFAULT (8px) to match buttons and maintain visual consistency. The header and navigation elements use no rounding (sharp corners) to reinforce their structural role as

Components

Action Elements Buttons are the primary interactive element and use a consistent 44px height (12px padding top/bottom + 20px text height) with 28px horizontal padding. The primary button uses a solid background of on-surface (#f8fafc) with on-primary text (#111827), creating a high-contrast, clickable appearance. On hover, the background transitions to #e2e8f0 (primary-fixed-dim) with a 150ms ease transition (cubic-bezier(0.4, 0, 0.2, 1)). Secondary buttons use a transparent background with a 1px border in outline-variant (#444748) and on-surface text, transitioning to rgba(248, 250, 252, 0.1) on hover. All button labels use label-md typography (14px, 600 weight) with 0.12em letter-spacing for visual emphasis. The arrow icon (→) in CTAs uses a transform: translateX(4px) animation on ho

Do's and Don'ts

**Do**

• Do use the tertiary color (#60a5fa) exclusively for interactive elements, focus states, and status indicators—never use it for decorative elements or backgrounds.
• Do maintain the 15:1 contrast ratio between on-surface (#f8fafc) and surface (#000000) for all body text to ensure WCAG AAA compliance.
• Do use RulesExpanded (all-caps) for headlines only, with letter-spacing of -0.02em on display and -0.015em on headline-lg to maintain visual hierarchy.
• Do apply the md shadow (0 4px 12px rgba(0, 0, 0, 0.4)) to cards on hover to create a subtle lift effect that signals interactivity.
• Do use the lg spacing (40px) to separate major sections and md spacing (24px) to separate subsections, creating a clear visual rhythm.

**Don't**

• Don't use colors outside the defined palette—the system is intentionally limited to ensure consistency and accessibility.
• Don't apply rounding smaller than 0.25rem (4px) to any element, as it becomes visually imperceptible and creates visual noise.
• Don't mix RulesExpanded and Mondwest in the same line or paragraph—use RulesExpanded for headlines only.
• Don't use shadows larger than lg (0 16px 40px rgba(0, 0, 0, 0.5)) as they create visual clutter and undermine the minimalist aesthetic.
• Don't apply the tertiary color (#60a5fa) to more than 5% of the visible interface at any given time—overuse dilutes its signal value.