hermes4.nousresearch.com website design: fonts, colors and UI patterns

Design character

Hermes 4 (hermes4.nousresearch.com) is a research-lab model showcase staged as a split-screen observatory: left rail of monospace system-prompt documentation, right stage a deep-space neural constellation with floating chat theater. The mood is black-void, cinematic, and slightly hostile-intellectual — magenta or amber filament graphs, white role chips, and translucent message bubbles that read like intercepted transmissions.

What should survive adaptation:

• True black void canvas with almost no chrome
• Constellation visualization as hero art (magenta/pink or amber/orange filament webs with bright nodes)
• Split composition: editorial prompt docs left, generative graph + chat right
• White rectangular role labels (USER, HERMES 4) against the void
• Dark translucent message bubbles with small corner glyphs
• Monospace / technical UI type at a dominant 14px, wide-tracked section labels
• Prompt samples that feel like operator manuals, not marketing slogans

Foundations

Color

Structured color rows were empty. Palette below is read from four homepage pins spanning two constellation moods.

Relationships that matter:

• One graph hue family per scene (magenta *or* amber), never a rainbow mesh.
• White chips are the only hard UI rectangles floating in the void — they anchor reading order.
• Left rail stays neutral gray type on black so the right stage owns all chroma.
• Bubbles stay darker than the brightest filaments so type remains legible over the graph.

Typography

No family names recorded. Visual + structured read:

• UI/docs: monospaced or mono-adjacent grotesque at small sizes (terminal/lab manual feel)
• Section labels: wide letter-spacing uppercase (e.g. CHAIN OF THOUGHT)
• Chat body: same 14px family as docs for continuity

Structured ladder (aggregated):

Patterns:

• One size does almost everything (14px); hierarchy is weight, tracking, and placement.
• Positive tracking on labels makes the lab/OS aesthetic; body stays neutral.
• Long line-heights (35px) appear where chat or docs need air over the graph.

Spacing and layout

• Ubiquitous 7px padding on compact controls/chips (very high counts)
• 52.5px right padding and vertical section padding on larger blocks
• 10.5px and 14px vertical margins for stack rhythm
• Occasional ~517px left margin — consistent with a fixed left documentation column beside the stage
• Composition is asymmetric split: ~35–40% docs / ~60–65% visualization in the pins
• Graph is full-bleed within its pane; chat bubbles float at uneven depths, not a strict messenger column

Visual language

• No recorded radii or borders — chips and bubbles read as sharp or barely-rounded rectangles; do not impose a 16px card system.
• No CSS shadows recorded; depth comes from graph glow, bubble opacity, and z-layering over the constellation.
• Imagery = generative network art, not photography. Filaments, particles, and bright singularities are the brand illustration language.
• Micro text annotations (cots, evals, hermes) sit *in* the graph like debug overlays.
• Still captures only — no motion tokens; the graph implies slow drift but that is interpretation.

Components and states

1. Left documentation rail — title, short abstract, named scenario (e.g. Sycophancy, Casual DM), SYSTEM PROMPT block in mono.
2. Constellation stage — full-pane graph with colored filaments and labeled nodes.
3. Role chip — solid white rectangle, black uppercase/label text, sits near a bubble cluster.
4. Thinking bubble — dark panel with small brand glyph + long internal monologue.
5. Speech bubble — tighter dark panel for spoken lines; may include numbered lists or stage directions in asterisks.
6. Graph micro-tags — tiny dim labels anchored to regions of the mesh.

States are narrative (user vs model turns), not UI hover states.

Responsive behavior

All four pins are 1712×1314 desktop viewports of /. Only one width is evidenced. Keep the split-rail + stage as the canonical desktop layout; do not invent mobile stacking from this set.

Practical guidance

Preserve

• Black void + single-hue constellation + white role chips
• Split lab-manual / generative-stage composition
• 14px mono-technical type with wide-tracked labels
• Dark translucent chat over the graph, never a solid white messenger
• Scenario pages that pair a named prompt study with a live-looking CoT theater

Avoid

• SaaS marketing gradients, soft gray cards, or friendly blue CTAs
• Multi-color rainbow graphs that dilute the magenta-or-amber scene rule
• Large serif marketing display type
• Heavy drop shadows or neumorphic bubbles
• Crowding the left rail with navigation chrome — docs should feel like a dossier

Evidence scope

Four viewport captures of hermes4.nousresearch.com/ (pins 7872, 7871, 7870, 7869). Structured evidence covers text styles and spacing only; colors, radii, borders, shadows, fonts, and gradients were unsupported/empty and are supplied from pin inspection. Use for research-model marketing and CoT visualization patterns; not for authenticated app chrome or mobile layout.