Hermes Agent — Implementation Notes
The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes: - Primary:
Inter| Mono:Geist Mono- Font stack (CSS):font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;- Mono stack (CSS):font-family: 'Geist 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=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">Usewrite_fileto create HTML, serve viagenerative-widgetsskill (cloudflared tunnel). Verify visual accuracy withbrowser_visionafter generating.
Mintlify's website is a study in documentation-as-product design — a white, airy, information-rich surface that treats clarity as its highest aesthetic value. The page opens with a luminous white (#ffffff) background, near-black (#0d0d0d) text, and a signature green brand accent (#18E299) that signals freshness and intelligence without dominating the palette. The overall mood is calm, confident, and engineered for legibility — a design system that whispers "we care about your developer experience" in every pixel.
The Inter font family carries the entire typographic load. At display sizes (40–64px), it uses tight negative letter-spacing (-0.8px to -1.28px) and semibold weight (600), creating headlines that feel focused and compressed like well-written documentation headers. Body text at 16–18px with 150% line-height provides generous reading comfort. Geist Mono appears exclusively for code and technical labels — uppercase, tracked-out, small — the voice of the terminal inside the marketing page.
What distinguishes Mintlify from other documentation platforms is its atmospheric gradient hero. A soft, cloud-like green-to-white gradient wash behind the hero content creates a sense of ethereal intelligence — documentation that floats above the noise. Below the hero, the page settles into a disciplined alternation of white sections separated by subtle 5% opacity borders. Cards use generous padding (24px+) with large radii (16px–24px) and whisper-thin borders, creating containers that feel open rather than boxed.
Key Characteristics:
- Inter with tight negative tracking at display sizes (-0.8px to -1.28px) — compressed yet readable
- Geist Mono for code labels: uppercase, 12px, tracked-out, the terminal voice
- Brand green (#18E299) used sparingly — CTAs, hover states, focus rings, and accent touches
- Atmospheric gradient hero with cloud-like green-white wash
- Ultra-round corners: 16px for containers, 24px for featured cards, full-round (9999px) for buttons and pills
- Subtle 5% opacity borders (rgba(0,0,0,0.05)) creating barely-there separation
- 8px base spacing system with generous section padding (48px–96px)
- Clean white canvas — no gray backgrounds, no color sections, depth through borders and whitespace alone
#0d0d0d): Primary text, headings, dark surfaces. Not pure black — the micro-softness improves reading comfort.#ffffff): Page background, card surfaces, input backgrounds.#18E299): The signature accent — CTAs, links on hover, focus rings, brand identity.#d4fae8): Tinted green surface for badges, hover states, subtle backgrounds.#0fa76e): Darker green for text on light-green badges, hover states on brand elements.#c37d0d): Warning states, caution badges — --twoslash-warn-bg.#3772cf): Tag backgrounds, informational annotations — --twoslash-tag-bg.#d45656): Error states, destructive actions — --twoslash-error-bg.#0d0d0d): Primary heading text, nav links.#333333): Secondary text, descriptions, body copy.#666666): Tertiary text, muted labels.#888888): Placeholder text, disabled states, code annotations.#e5e5e5): Borders, dividers, card outlines.#f5f5f5): Subtle surface backgrounds, hover states.#fafafa): Near-white surface tint.#0d0d0d): Links match text color, relying on underline/context.#18E299): Brand green on hover — var(--color-brand).#18E299): Brand green focus outline for inputs and interactive elements.#ffffff): White cards on white background, separated by borders.rgba(0,0,0,0.05)): 5% black opacity borders — the primary separation mechanism.rgba(0,0,0,0.08)): Slightly stronger borders for interactive elements.var(--color-brand)): Green ring on focused inputs.rgba(0,0,0,0.03) 0px 2px 4px): Barely-there ambient shadow for subtle lift.rgba(0,0,0,0.06) 0px 1px 2px): Micro-shadow for button depth.Inter, with fallback: Inter Fallback, system-ui, -apple-system, sans-serifGeist Mono, with fallback: Geist Mono Fallback, ui-monospace, SFMono-Regular, monospace| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Hero | Inter | 64px (4.00rem) | 600 | 1.15 (tight) | -1.28px | Maximum impact, hero headlines |
| Section Heading | Inter | 40px (2.50rem) | 600 | 1.10 (tight) | -0.8px | Feature section titles |
| Sub-heading | Inter | 24px (1.50rem) | 500 | 1.30 (tight) | -0.24px | Card headings, sub-sections |
| Card Title | Inter | 20px (1.25rem) | 600 | 1.30 (tight) | -0.2px | Feature card titles |
| Card Title Light | Inter | 20px (1.25rem) | 500 | 1.30 (tight) | -0.2px | Secondary card headings |
| Body Large | Inter | 18px (1.13rem) | 400 | 1.50 | normal | Hero descriptions, introductions |
| Body | Inter | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |
| Body Medium | Inter | 16px (1.00rem) | 500 | 1.50 | normal | Navigation, emphasized text |
| Button | Inter | 15px (0.94rem) | 500 | 1.50 | normal | Button labels |
| Link | Inter | 14px (0.88rem) | 500 | 1.50 | normal | Navigation links, small CTAs |
| Caption | Inter | 14px (0.88rem) | 400–500 | 1.50–1.71 | normal | Metadata, descriptions |
| Label Uppercase | Inter | 13px (0.81rem) | 500 | 1.50 | 0.65px | text-transform: uppercase, section labels |
| Small | Inter | 13px (0.81rem) | 400–500 | 1.50 | -0.26px | Small body text |
| Mono Code | Geist Mono | 12px (0.75rem) | 500 | 1.50 | 0.6px | text-transform: uppercase, technical labels |
| Mono Badge | Geist Mono | 12px (0.75rem) | 600 | 1.50 | 0.6px | text-transform: uppercase, status badges |
| Mono Micro | Geist Mono | 10px (0.63rem) | 500 | 1.50 | normal | text-transform: uppercase, tiny labels |
Primary Brand (Full-round)
- Background: #0d0d0d (near-black)
- Text: #ffffff
- Padding: 8px 24px
- Radius: 9999px (full pill)
- Font: Inter 15px weight 500
- Shadow: rgba(0,0,0,0.06) 0px 1px 2px
- Hover: opacity 0.9
- Use: Primary CTA ("Get Started", "Start Building")
Secondary / Ghost (Full-round)
- Background: #ffffff
- Text: #0d0d0d
- Padding: 4.5px 12px
- Radius: 9999px (full pill)
- Border: 1px solid rgba(0,0,0,0.08)
- Font: Inter 15px weight 500
- Hover: opacity 0.9
- Use: Secondary actions ("Request Demo", "View Docs")
Transparent / Nav Button
- Background: transparent
- Text: #0d0d0d
- Padding: 5px 6px
- Radius: 8px
- Border: none or 1px solid rgba(0,0,0,0.05)
- Use: Navigation items, icon buttons
Brand Accent Button
- Background: #18E299
- Text: #0d0d0d
- Padding: 8px 24px
- Radius: 9999px
- Use: Special promotional CTAs
Standard Card
- Background: #ffffff
- Border: 1px solid rgba(0,0,0,0.05)
- Radius: 16px
- Padding: 24px
- Shadow: rgba(0,0,0,0.03) 0px 2px 4px
- Hover: subtle border darkening to rgba(0,0,0,0.08)
Featured Card
- Background: #ffffff
- Border: 1px solid rgba(0,0,0,0.05)
- Radius: 24px
- Padding: 32px
- Inner content areas may have their own 16px radius containers
Logo/Trust Card
- Background: #fafafa or #ffffff
- Border: 1px solid rgba(0,0,0,0.05)
- Radius: 16px
- Centered logo/icon with consistent sizing
Email Input
- Background: transparent or #ffffff
- Text: #0d0d0d
- Padding: 0px 12px (height controlled by line-height)
- Border: 1px solid rgba(0,0,0,0.08)
- Radius: 9999px (full pill, matching buttons)
- Focus: 1px solid var(--color-brand) + outline: 1px solid var(--color-brand)
- Placeholder: #888888
#0d0d0d textvar(--color-brand)Atmospheric Hero - Full-width gradient wash: soft green-to-white cloud-like gradient - Centered headline with tight tracking - Subtitle in muted gray - Dual CTA buttons (dark primary + ghost secondary) - The gradient creates a sense of elevation and intelligence
Trust Bar / Logo Grid - "Loved by your favorite companies" section - Company logos in muted grayscale - Grid or horizontal layout with consistent sizing - Subtle border separation between logos
Feature Cards with Icons - Icon or illustration at top - Title at 20px weight 600 - Description at 14–16px in gray - Consistent padding and border treatment - Grid layout: 2–3 columns on desktop
CTA Footer Section - Dark or gradient background - Large headline: "Make documentation your winning advantage" - Email input with pill styling - Brand green accent on CTAs
| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page background, text blocks |
| Subtle Border (Level 1) | 1px solid rgba(0,0,0,0.05) |
Standard card borders, dividers |
| Medium Border (Level 1b) | 1px solid rgba(0,0,0,0.08) |
Interactive elements, input borders |
| Ambient Shadow (Level 2) | rgba(0,0,0,0.03) 0px 2px 4px |
Cards with subtle lift |
| Button Shadow (Level 2b) | rgba(0,0,0,0.06) 0px 1px 2px |
Button micro-depth |
| Focus Ring (Accessibility) | 1px solid #18E299 outline |
Focused inputs, active interactive elements |
Shadow Philosophy: Mintlify barely uses shadows. The depth system is almost entirely border-driven — ultra-subtle 5% opacity borders create separation without visual weight. When shadows appear, they're atmospheric whispers (0.03 opacity, 2px blur, 4px spread) that add the barest sense of lift. This restraint keeps the page feeling flat and paper-like — appropriate for a documentation company whose product is about clarity and readability.
#0d0d0d (near-black)#ededed (near-white)#a0a0a0 (muted gray)#18E299 (unchanged — the green works on both backgrounds)rgba(255,255,255,0.08) (white at 8% opacity)#141414 (slightly lighter than page)rgba(0,0,0,0.4) 0px 2px 4px (stronger shadow for contrast)| Name | Width | Key Changes |
|---|---|---|
| Mobile | <768px | Single column, stacked layout, hamburger nav |
| Tablet | 768–1024px | Two-column grids begin, expanded padding |
| Desktop | >1024px | Full layout, 3-column grids, maximum content width |
#0d0d0d)#ffffff)#0d0d0d)#333333)rgba(0,0,0,0.05) (5% opacity)#18E299)#18E299)#18E299)rgba(0,0,0,0.05)) — stronger borders break the airy feeling#18E299) is used sparingly — CTAs and hover states only, never for decorative fills