Hermes Agent — Implementation Notes
The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes: - Primary:
Inter| Mono:JetBrains Mono- Font stack (CSS):font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;- Mono stack (CSS):font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;html <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">Usewrite_fileto create HTML, serve viagenerative-widgetsskill (cloudflared tunnel). Verify visual accuracy withbrowser_visionafter generating.
Claude's interface is a literary salon reimagined as a product page — warm, unhurried, and quietly intellectual. The entire experience is built on a parchment-toned canvas (#f5f4ed) that deliberately evokes the feeling of high-quality paper rather than a digital surface. Where most AI product pages lean into cold, futuristic aesthetics, Claude's design radiates human warmth, as if the AI itself has good taste in interior design.
The signature move is the custom Anthropic Serif typeface — a medium-weight serif with generous proportions that gives every headline the gravitas of a book title. Combined with organic, hand-drawn-feeling illustrations in terracotta (#c96442), black, and muted green, the visual language says "thoughtful companion" rather than "powerful tool." The serif headlines breathe at tight-but-comfortable line-heights (1.10–1.30), creating a cadence that feels more like reading an essay than scanning a product page.
What makes Claude's design truly distinctive is its warm neutral palette. Every gray has a yellow-brown undertone (#5e5d59, #87867f, #4d4c48) — there are no cool blue-grays anywhere. Borders are cream-tinted (#f0eee6, #e8e6dc), shadows use warm transparent blacks, and even the darkest surfaces (#141413, #30302e) carry a barely perceptible olive warmth. This chromatic consistency creates a space that feels lived-in and trustworthy.
Key Characteristics:
- Warm parchment canvas (#f5f4ed) evoking premium paper, not screens
- Custom Anthropic type family: Serif for headlines, Sans for UI, Mono for code
- Terracotta brand accent (#c96442) — warm, earthy, deliberately un-tech
- Exclusively warm-toned neutrals — every gray has a yellow-brown undertone
- Organic, editorial illustrations replacing typical tech iconography
- Ring-based shadow system (0px 0px 0px 1px) creating border-like depth without visible borders
- Magazine-like pacing with generous section spacing and serif-driven hierarchy
#141413): The primary text color and dark-theme surface — not pure black but a warm, almost olive-tinted dark that's gentler on the eyes. The warmest "black" in any major tech brand.#c96442): The core brand color — a burnt orange-brown used for primary CTA buttons, brand moments, and the signature accent. Deliberately earthy and un-tech.#d97757): A lighter, warmer variant of the brand color used for text accents, links on dark surfaces, and secondary emphasis.#b53333): A deep, warm red for error states — serious without being alarming.#3898ec): Standard blue for input focus rings — the only cool color in the entire system, used purely for accessibility.#f5f4ed): The primary page background — a warm cream with a yellow-green tint that feels like aged paper. The emotional foundation of the entire design.#faf9f5): The lightest surface — used for cards and elevated containers on the Parchment background. Barely distinguishable but creates subtle layering.#ffffff): Reserved for specific button surfaces and maximum-contrast elements.#e8e6dc): Button backgrounds and prominent interactive surfaces — a noticeably warm light gray.#30302e): Dark-theme containers, nav borders, and elevated dark elements — warm charcoal.#141413): Dark-theme page background and primary dark surface.#4d4c48): Button text on light warm surfaces — the go-to dark-on-light text.#5e5d59): Secondary body text — a distinctly warm medium-dark gray.#87867f): Tertiary text, footnotes, and de-emphasized metadata.#3d3d3a): Dark text links and emphasized secondary text.#b0aea5): Text on dark surfaces — a warm, parchment-tinted light gray.#f0eee6): Standard light-theme border — barely visible warm cream, creating the gentlest possible containment.#e8e6dc): Prominent borders, section dividers, and emphasized containment on light surfaces.#30302e): Standard border on dark surfaces — maintains the warm tone.#d1cfc5): Shadow ring color for button hover/focus states.#dedc01): Secondary ring variant for lighter interactive surfaces.#c2c0b6): Deeper ring for active/pressed states.Anthropic Serif, with fallback: GeorgiaAnthropic Sans, with fallback: ArialAnthropic Mono, with fallback: ArialNote: These are custom typefaces. For external implementations, Georgia serves as the serif substitute and system-ui/Inter as the sans substitute.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Hero | Anthropic Serif | 64px (4rem) | 500 | 1.10 (tight) | normal | Maximum impact, book-title presence |
| Section Heading | Anthropic Serif | 52px (3.25rem) | 500 | 1.20 (tight) | normal | Feature section anchors |
| Sub-heading Large | Anthropic Serif | 36–36.8px (~2.3rem) | 500 | 1.30 | normal | Secondary section markers |
| Sub-heading | Anthropic Serif | 32px (2rem) | 500 | 1.10 (tight) | normal | Card titles, feature names |
| Sub-heading Small | Anthropic Serif | 25–25.6px (~1.6rem) | 500 | 1.20 | normal | Smaller section titles |
| Feature Title | Anthropic Serif | 20.8px (1.3rem) | 500 | 1.20 | normal | Small feature headings |
| Body Serif | Anthropic Serif | 17px (1.06rem) | 400 | 1.60 (relaxed) | normal | Serif body text (editorial passages) |
| Body Large | Anthropic Sans | 20px (1.25rem) | 400 | 1.60 (relaxed) | normal | Intro paragraphs |
| Body / Nav | Anthropic Sans | 17px (1.06rem) | 400–500 | 1.00–1.60 | normal | Navigation links, UI text |
| Body Standard | Anthropic Sans | 16px (1rem) | 400–500 | 1.25–1.60 | normal | Standard body, button text |
| Body Small | Anthropic Sans | 15px (0.94rem) | 400–500 | 1.00–1.60 | normal | Compact body text |
| Caption | Anthropic Sans | 14px (0.88rem) | 400 | 1.43 | normal | Metadata, descriptions |
| Label | Anthropic Sans | 12px (0.75rem) | 400–500 | 1.25–1.60 | 0.12px | Badges, small labels |
| Overline | Anthropic Sans | 10px (0.63rem) | 400 | 1.60 | 0.5px | Uppercase overline labels |
| Micro | Anthropic Sans | 9.6px (0.6rem) | 400 | 1.60 | 0.096px | Smallest text |
| Code | Anthropic Mono | 15px (0.94rem) | 400 | 1.60 | -0.32px | Inline code, terminal |
Warm Sand (Secondary)
- Background: Warm Sand (#e8e6dc)
- Text: Charcoal Warm (#4d4c48)
- Padding: 0px 12px 0px 8px (asymmetric — icon-first layout)
- Radius: comfortably rounded (8px)
- Shadow: ring-based (#e8e6dc 0px 0px 0px 0px, #d1cfc5 0px 0px 0px 1px)
- The workhorse button — warm, unassuming, clearly interactive
White Surface
- Background: Pure White (#ffffff)
- Text: Anthropic Near Black (#141413)
- Padding: 8px 16px 8px 12px
- Radius: generously rounded (12px)
- Hover: shifts to secondary background color
- Clean, elevated button for light surfaces
Dark Charcoal
- Background: Dark Surface (#30302e)
- Text: Ivory (#faf9f5)
- Padding: 0px 12px 0px 8px
- Radius: comfortably rounded (8px)
- Shadow: ring-based (#30302e 0px 0px 0px 0px, ring 0px 0px 0px 1px)
- The inverted variant for dark-on-light emphasis
Brand Terracotta
- Background: Terracotta Brand (#c96442)
- Text: Ivory (#faf9f5)
- Radius: 8–12px
- Shadow: ring-based (#c96442 0px 0px 0px 0px, #c96442 0px 0px 0px 1px)
- The primary CTA — the only button with chromatic color
Dark Primary
- Background: Anthropic Near Black (#141413)
- Text: Warm Silver (#b0aea5)
- Padding: 9.6px 16.8px
- Radius: generously rounded (12px)
- Border: thin solid Dark Surface (1px solid #30302e)
- Used on dark theme surfaces
#faf9f5) or Pure White (#ffffff) on light surfaces; Dark Surface (#30302e) on dark1px solid #f0eee6) on light; 1px solid #30302e on darkrgba(0,0,0,0.05) 0px 4px 24px) for elevated content0px 0px 0px 1px patterns for interactive card states1px 0px 0px (top-only) for list item separators#141413)#3898ec) border-color — the only cool color moment#141413), Olive Gray (#5e5d59), and Dark Warm (#3d3d3a)1px solid #30302e (dark) or 1px solid #f0eee6 (light)Model Comparison Cards
- Opus 4.5, Sonnet 4.5, Haiku 4.5 presented in a clean card grid
- Each model gets a bordered card with name, description, and capability badges
- Border Warm (#e8e6dc) separation between items
Organic Illustrations - Hand-drawn-feeling vector illustrations in terracotta, black, and muted green - Abstract, conceptual rather than literal product diagrams - The primary visual personality — no other AI company uses this style
Dark/Light Section Alternation - The page alternates between Parchment light and Near Black dark sections - Creates a reading rhythm like chapters in a book - Each section feels like a distinct environment
| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Parchment background, inline text |
| Contained (Level 1) | 1px solid #f0eee6 (light) or 1px solid #30302e (dark) |
Standard cards, sections |
| Ring (Level 2) | 0px 0px 0px 1px ring shadows using warm grays |
Interactive cards, buttons, hover states |
| Whisper (Level 3) | rgba(0,0,0,0.05) 0px 4px 24px |
Elevated feature cards, product screenshots |
| Inset (Level 4) | inset 0px 0px 0px 1px at 15% opacity |
Active/pressed button states |
Shadow Philosophy: Claude communicates depth through warm-toned ring shadows rather than traditional drop shadows. The signature 0px 0px 0px 1px pattern creates a border-like halo that's softer than an actual border — it's a shadow pretending to be a border, or a border that's technically a shadow. When drop shadows do appear, they're extremely soft (0.05 opacity, 24px blur) — barely visible lifts that suggest floating rather than casting.
#f5f4ed) and Near Black (#141413) sections — entire sections shift elevation by changing the ambient light level.#f5f4ed) as the primary light background — the warm cream tone IS the Claude personality#c96442) only for primary CTAs and the highest-signal brand moments0px 0px 0px 1px) for interactive element states instead of drop shadows#ffffff) as a page background — Parchment (#f5f4ed) or Ivory (#faf9f5) are always warmer| Name | Width | Key Changes |
|---|---|---|
| Small Mobile | <479px | Minimum layout, stacked everything, compact typography |
| Mobile | 479–640px | Single column, hamburger nav, reduced heading sizes |
| Large Mobile | 640–767px | Slightly wider content area |
| Tablet | 768–991px | 2-column grids begin, condensed nav |
| Desktop | 992px+ | Full multi-column layout, expanded nav, maximum hero typography (64px) |