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;700&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.
Replicate's interface is a developer playground crackling with creative energy — a bold, high-contrast design that feels more like a music festival poster than a typical API platform. The hero section explodes with a vibrant orange-red-magenta gradient that immediately signals "this is where AI models come alive," while the body of the page grounds itself in a clean white canvas where code snippets and model galleries take center stage.
The design personality is defined by two extreme choices: massive display typography (up to 128px) using the custom rb-freigeist-neue face, and exclusively pill-shaped geometry (9999px radius on everything). The display font is thick, bold, and confident — its heavy weight at enormous sizes creates text that feels like it's shouting with joy rather than whispering authority. Combined with basier-square for body text (a clean geometric sans) and JetBrains Mono for code, the system serves developers who want power and playfulness in equal measure.
What makes Replicate distinctive is its community-powered energy. The model gallery with AI-generated images, the dotted-underline links, the green status badges, and the "Imagine what you can build" closing manifesto all create a space that feels alive and participatory — not a corporate product page but a launchpad for creative developers.
Key Characteristics: - Explosive orange-red-magenta gradient hero (#ea2804 brand anchor) - Massive display typography (128px) in heavy rb-freigeist-neue - Exclusively pill-shaped geometry: 9999px radius on EVERYTHING - High-contrast black (#202020) and white palette with red brand accent - Developer-community energy: model galleries, code examples, dotted-underline links - Green status badges (#2b9a66) for live/operational indicators - Bold/heavy font weights (600-700) creating maximum typographic impact - Playful closing manifesto: "Imagine what you can build."
#202020): The primary text color and dark surface — a near-black that's the anchor of all text and borders. Slightly warmer than pure #000.#ea2804): The core brand color — a vivid, saturated orange-red used in the hero gradient, accent borders, and high-signal moments.#dd4425): A slightly warmer variant for button borders and link hover states.#2b9a66): Badge/pill background for "running" or operational status indicators.#24292e): A blue-tinted dark used for code block backgrounds and developer contexts.#ffffff): The primary page body background.#fcfcfc): Button text on dark surfaces and the lightest content.#646464): Secondary body text and de-emphasized content.#4e4e4e): Emphasized secondary text.#8d8d8d): Tertiary text, footnotes.#bbbbbb): Dotted-underline link decoration color, muted metadata.#000000): Maximum-emphasis borders and occasional text.#ea2804) → red → magenta → hot pink. This gradient occupies the full hero section and is the most visually dominant element on the page.rb-freigeist-neue, with fallbacks: ui-sans-serif, system-uibasier-square, with fallbacks: ui-sans-serif, system-uijetbrains-mono, with fallbacks: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Mega | rb-freigeist-neue | 128px (8rem) | 700 | 1.00 (tight) | normal | The maximum: closing manifesto |
| Display / Hero | rb-freigeist-neue | 72px (4.5rem) | 700 | 1.00 (tight) | -1.8px | Hero section headline |
| Section Heading | rb-freigeist-neue | 48px (3rem) | 400–700 | 1.00 (tight) | normal | Feature section titles |
| Sub-heading | rb-freigeist-neue | 30px (1.88rem) | 600 | 1.20 (tight) | normal | Card headings |
| Sub-heading Sans | basier-square | 38.4px (2.4rem) | 400 | 0.83 (ultra-tight) | normal | Large body headings |
| Feature Title | basier-square / rb-freigeist-neue | 18px (1.13rem) | 600 | 1.56 | normal | Small section titles, labels |
| Body Large | basier-square | 20px (1.25rem) | 400 | 1.40 | normal | Intro paragraphs |
| Body / Button | basier-square | 16–18px (1–1.13rem) | 400–600 | 1.50–1.56 | normal | Standard text, buttons |
| Caption | basier-square | 14px (0.88rem) | 400–600 | 1.43 | -0.35px to normal | Metadata, descriptions |
| Small / Tag | basier-square | 12px (0.75rem) | 400 | 1.33 | normal | Tags (lowercase transform) |
| Code | jetbrains-mono | 14px (0.88rem) | 400 | 1.43 | normal | Code snippets, API examples |
| Code Small | jetbrains-mono | 11px (0.69rem) | 400 | 1.50 | normal | Tiny code references |
text-transform: lowercase — an unusual choice that creates a casual, developer-friendly vibe.Dark Solid
- Background: Replicate Dark (#202020)
- Text: Near White (#fcfcfc)
- Padding: 0px 4px (extremely compact)
- Outline: Replicate Dark 4px solid
- Radius: pill-shaped (implied by system)
- Maximum emphasis — dark pill on light surface
White Outlined
- Background: Pure White (#ffffff)
- Text: Replicate Dark (#202020)
- Border: 1px solid #202020
- Radius: pill-shaped
- Clean outlined pill for secondary actions
Transparent Glass
- Background: rgba(255, 255, 255, 0.1) (frosted glass)
- Text: Replicate Dark (#202020)
- Padding: 6px 56px 6px 28px (asymmetric — icon/search layout)
- Border: transparent
- Outline: Light Silver (#bbbbbb) 1px solid
- Used for search/input-like buttons
1px solid #202020 for prominent containment1px solid #ea2804 for highlighted/featured itemsrgba(255, 255, 255, 0.1) (frosted glass)#202020)Model Gallery Grid - Horizontal scrolling or grid of AI-generated images - Each image in a pill-shaped container - Model names and run counts displayed - The visual heart of the community platform
Dotted Underline Links
- Links use text-decoration: underline dotted #bbbbbb
- A distinctive, developer-notebook aesthetic
- Lighter and more casual than solid underlines
Status Badges
- Status Green (#2b9a66) background with white text
- Pill-shaped (9999px)
- 14px font size
- Indicates model availability/operational status
Manifesto Section - "Imagine what you can build." at 128px - Dark background with white text - Images embedded between words - The emotional climax of the page
| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | White body, text blocks |
| Bordered (Level 1) | 1px solid #202020 |
Cards, buttons, containers |
| Accent Border (Level 2) | 1px solid #ea2804 |
Featured/highlighted items |
| Gradient Hero (Level 3) | Full-width blaze gradient | Hero section, maximum visual impact |
| Dark Section (Level 4) | Dark bg (#202020) with light text | Manifesto, footer, feature sections |
Shadow Philosophy: Replicate relies on borders and background color for depth rather than shadows. The 1px solid #202020 border is the primary containment mechanism. The dramatic gradient hero and dark/light section alternation provide all the depth the design needs.
No explicit breakpoints detected — likely using fluid/container-query responsive system.