Hermes Agent

Overview

Hermes Agent embodies a 'Digital Maximalism' aesthetic—a deliberate rejection of soft, rounded interfaces in favor of sharp, high-contrast geometry that mirrors the precision of autonomous systems. The brand serves developers and AI researchers who demand clarity, control, and transparency from their tools. The UI employs an electric blue (#0000f2) background paired with off-white foreground (#f5f5f5), creating a stark, almost monochromatic canvas punctuated by a neon-yellow accent (#edff45) that signals actionable moments. The emotional response is one of technical confidence: this is not a consumer app, but a power tool. Voice: direct, technical, unapologetic. Example: 'Hermes runs on your infrastructure. No cloud lock-in. No surveillance.'

Colors

The color system is built on extreme contrast and functional clarity. Primary surface is electric blue (#0000f2), chosen for its association with digital systems and its high accessibility contrast ratio (21:1) against the off-white on-surface color (#f5f5f5). This pairing is non-negotiable and appears on every page—it is the brand's signature. Secondary accent is neon yellow (#edff45), used exclusively for CTAs, highlights, and interactive affordances; it appears sparingly (3–5% of interface) to maintain visual hierarchy and prevent fatigue. Tertiary is pure white (#ffffff), reserved for elevated surfaces, modals, and code blocks. The surface stack uses subtle blue variations (surface-dim #0000d9, surface-bright #1a1aff) for depth without abandoning the core blue identity. Outline colors

Typography

The type system uses three distinct font families to create a hierarchy of information density. Sigurd (serif, 300–400 weight) is reserved for display and headline scales (76px down to 36px), conveying editorial authority and timelessness—appropriate for a tool claiming longevity and reliability. Rules (sans-serif, 600 weight) handles navigation, labels, and UI chrome, providing crisp, technical clarity at small sizes (14px–20px) with aggressive letter-spacing (0.03em–0.05em) that reinforces the 'technical' voice. Courier Prime (monospace, 400 weight) is used for body text and code samples (14px–18px), grounding the interface in developer culture. All text is uppercase by default, reinforcing the maximalist aesthetic and reducing visual softness. Apply text-shadow: 0 2px 4px rgba(0, 0, 0,

Layout

The layout uses a fluid, container-query-based scaling system (--u: max(calc(100cqw / 2360), 0.58px)) that maintains proportional relationships across all screen sizes without media-query breakpoints. The container max-width is 1600px, but the design scales fluidly within that constraint. Horizontal gutter is 121.8px on desktop (calc(210 * var(--u))), reducing to 48px on mobile, creating a breathing room that prevents the high-contrast interface from feeling claustrophobic. Grid is 12 columns on desktop, 1 column on mobile. Vertical rhythm uses calc(30 * var(--u)) as the primary gap between sections, creating a consistent cadence. The hero section occupies 88–100dvh (device viewport height), anchoring the user's attention on the primary CTA and headline. Spacing scale is semantic: xs (4px)

Elevation & Depth

Depth is achieved through layered opacity and subtle shadows rather than blur or glassmorphism. Level 1 (Base): solid electric blue background (#0000f2) with no shadow. Level 2 (Cards/Panels): rgba(255, 255, 255, 0.05) background with 1px border at rgba(255, 255, 255, 0.1) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a subtle lift. Level 3 (Modals/Elevated): rgba(255, 255, 255, 0.08) background with 1px border at rgba(255, 255, 255, 0.15) and box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), signaling maximum prominence. Interactive elements (buttons, inputs) use no shadow by default but g

Shapes

The shape philosophy is 'Technical Minimalism'—sharp corners and minimal rounding that evoke precision instruments and code editors. Border-radius is 4px (DEFAULT) for most interactive elements (buttons, inputs, cards), creating a subtle softness without compromising the austere aesthetic. Larger containers use 16px (lg) or 24px (xl) for visual breathing room. Full rounding (9999px) is reserved exclusively for badges and status indicators, where the circular form signals 'complete' or 'active' states. No element uses 0px radius; even the most technical components receive a 4px treatment to pre

Components

Action Elements Buttons use a two-tier system: primary (white background, blue text, 44px height, 11.6px vertical padding, 39.44px horizontal padding) for main CTAs like 'Install via Terminal,' and secondary (transparent background, white border, white text) for navigation links like 'Docs.' Accent buttons use the neon-yellow secondary color (#edff45) for destructive or high-priority actions. All buttons use label-md typography (14px, 600 weight, 0.03em letter-spacing, uppercase) and transition on hover in 150ms with cubic-bezier(0.4, 0, 0.2, 1). Hover states shift the background color one step in the color stack (primary → primary-fixed-dim, secondary → secondary-fixed-dim) without changing text color, maintaining contrast. Focus states add a 2px inset ring at the on-primary color, vi

Do's and Don'ts

**Do**

• Do use the electric blue (#0000f2) and off-white (#f5f5f5) pairing as the foundational color relationship—never invert or soften this contrast.
• Do reserve neon yellow (#edff45) exclusively for CTAs, highlights, and interactive affordances; use it sparingly (3–5% of interface) to maintain visual hierarchy.
• Do apply uppercase text-transform globally and use Sigurd serif for headlines, Rules sans-serif for labels, and Courier Prime monospace for body text to reinforce the technical voice.
• Do use 4px border-radius as the minimum rounding; avoid 0px (too harsh) and avoid rounding above 24px (too soft for the brand).
• Do transition all interactive states in 150ms cubic-bezier(0.4, 0, 0.2, 1) to provide kinetic feedback without animation excess.
• Do maintain WCAG AAA contrast ratios (21:1 for blue/white, 8:1 for secondary accents) across all text and interactive elements.

**Don't**

• Don't use rounded corners above 24px or introduce blur/glassmorphism effects—the brand rejects softness in favor of technical clarity.
• Don't introduce new accent colors beyond blue, white, yellow, and red; the palette is intentionally constrained to reinforce brand identity.
• Don't use system fonts or generic sans-serif; always load Sigurd, Rules, and Courier Prime to maintain the distinctive typographic voice.
• Don't apply shadows or depth effects to the base surface (#0000f2)—only use elevation on cards, modals, and interactive elements.
• Don't animate text or use decorative motion; reserve animation for state transitions (hover, focus, loading) only.
• Don't lowercase text or use sentence case; maintain uppercase globally to preserve the maximalist, technical aesthetic.