skills/creative/popular-web-designs/templates/replicate.md
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">Use
write_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:
#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
#202020)#fcfcfc)White Outlined
#ffffff)#202020)1px solid #202020Transparent Glass
rgba(255, 255, 255, 0.1) (frosted glass)#202020)#bbbbbb) 1px solid1px solid #202020 for prominent containment1px solid #ea2804 for highlighted/featured itemsrgba(255, 255, 255, 0.1) (frosted glass)#202020)Model Gallery Grid
Dotted Underline Links
text-decoration: underline dotted #bbbbbbStatus Badges
#2b9a66) background with white textManifesto Section
| 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.