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.
PostHog's website feels like a startup's internal wiki that escaped into the wild — warm, irreverent, and deliberately anti-corporate. The background isn't the expected crisp white or dark void of developer tools; it's a warm, sage-tinted cream (#fdfdf8) that gives every surface a handmade, paper-like quality. Colors lean into earthy olive greens and muted sage rather than the conventional blues and purples of the SaaS world. It's as if someone designed a developer analytics platform inside a cozy garden shed.
The personality is the star: hand-drawn hedgehog illustrations, quirky action figures, and playful imagery replace the stock photography and abstract gradients typical of B2B SaaS. IBM Plex Sans Variable serves as the typographic foundation — a font with genuine technical credibility (created by IBM, widely used in developer contexts) deployed here with bold weights (700, 800) on headings and generous line-heights on body text. The typography says "we're serious engineers" while everything around it says "but we don't take ourselves too seriously."
The interaction design carries the same spirit: hover states flash PostHog Orange (#F54E00) text — a hidden brand color that doesn't appear at rest but surprises on interaction. Dark near-black buttons (#1e1f23) use opacity reduction on hover rather than color shifts, and active states scale slightly. The border system uses sage-tinted grays (#bfc1b7) that harmonize with the olive text palette. Built on Tailwind CSS with Radix UI and shadcn/ui primitives, the technical foundation is modern and component-driven, but the visual output is stubbornly unique.
Key Characteristics:
- Warm sage/olive color palette instead of conventional blues — earthy and approachable
- IBM Plex Sans Variable font at bold weights (700/800) for headings with generous 1.50+ line-heights
- Hidden brand orange (#F54E00) that only appears on hover interactions — a delightful surprise
- Hand-drawn hedgehog illustrations and playful imagery — deliberately anti-corporate
- Sage-tinted borders (#bfc1b7) and backgrounds (#eeefe9) creating a unified warm-green system
- Dark near-black CTAs (#1e1f23) with opacity-based hover states
- Content-heavy editorial layout — the site reads like a magazine, not a typical landing page
- Tailwind CSS + Radix UI + shadcn/ui component architecture
#4d4f46): Primary text color — a distinctive olive-gray that gives all text a warm, earthy tone#23251d): Link text and high-emphasis headings — near-black with green undertone#F54E00): Hidden brand accent — appears only on hover states, a vibrant orange that surprises#F7A501): Secondary hover accent on dark buttons — warm gold that pairs with the orange#b17816): Special button borders — an amber-gold for featured CTAs#3b82f6): Focus ring color (Tailwind default) — the only blue in the system, reserved for accessibility#fdfdf8): Primary page background — warm near-white with yellow-green undertone#eeefe9): Input backgrounds, secondary surfaces — light sage tint#e5e7e0): Button backgrounds, tertiary surfaces — muted sage-green#d4c9b8): Featured button backgrounds — warm tan/khaki for emphasis#f4f4f4): Universal hover background state#4d4f46): Primary body and UI text#65675e): Secondary text, button labels on light backgrounds#9ea096): Placeholder text, disabled states — warm sage-green#bfc1b7): Primary border color — olive-tinted gray for all borders#b6b7af): Secondary border, toolbar borders — slightly darker sage#F54E00): Hover text accent — signals interactivity and brand personality#F7A501): Dark button hover accent — warmth signal#3b82f6 at 50% opacity): Keyboard focus rings — accessibility-only color#111827): High-contrast link text — near-black for important linksIBM Plex Sans Variable — variable font (100–700+ weight range). Fallbacks: IBM Plex Sans, -apple-system, system-ui, Avenir Next, Avenir, Segoe UI, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Arialui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New — system monospace stackSource Code Pro — with fallbacks: Menlo, Consolas, Monaco| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Hero | IBM Plex Sans Variable | 30px | 800 | 1.20 | -0.75px | Extra-bold, tight, maximum impact |
| Section Heading | IBM Plex Sans Variable | 36px | 700 | 1.50 | 0px | Large but generous line-height |
| Feature Heading | IBM Plex Sans Variable | 24px | 700 | 1.33 | 0px | Feature section titles |
| Card Heading | IBM Plex Sans Variable | 21.4px | 700 | 1.40 | -0.54px | Slightly unusual size (scaled) |
| Sub-heading | IBM Plex Sans Variable | 20px | 700 | 1.40 | -0.5px | Content sub-sections |
| Sub-heading Uppercase | IBM Plex Sans Variable | 20px | 700 | 1.40 | 0px | Uppercase transform for labels |
| Body Emphasis | IBM Plex Sans Variable | 19.3px | 600 | 1.56 | -0.48px | Semi-bold callout text |
| Label Uppercase | IBM Plex Sans Variable | 18px | 700 | 1.50 | 0px | Uppercase category labels |
| Body Semi | IBM Plex Sans Variable | 18px | 600 | 1.56 | 0px | Semi-bold body text |
| Body | IBM Plex Sans Variable | 16px | 400 | 1.50 | 0px | Standard reading text |
| Body Medium | IBM Plex Sans Variable | 16px | 500 | 1.50 | 0px | Medium-weight body |
| Body Relaxed | IBM Plex Sans Variable | 15px | 400 | 1.71 | 0px | Relaxed line-height for long reads |
| Nav / UI | IBM Plex Sans Variable | 15px | 600 | 1.50 | 0px | Navigation and UI labels |
| Caption | IBM Plex Sans Variable | 14px | 400–700 | 1.43 | 0px | Small text, various weights |
| Small Label | IBM Plex Sans Variable | 13px | 500–700 | 1.00–1.50 | 0px | Tags, badges, micro labels |
| Micro | IBM Plex Sans Variable | 12px | 400–700 | 1.33 | 0px | Smallest text, some uppercase |
| Code | Source Code Pro | 14px | 500 | 1.43 | 0px | Code snippets and terminal |
#1e1f23 background, white text, 6px radius, 10px 12px padding. Hover: opacity 0.7 with Amber Gold text. Active: opacity 0.8 with slight scale transform. The main CTA — dark and confident#e5e7e0 background, Olive Ink (#4d4f46) text, 4px radius, 4px padding. Hover: #f4f4f4 bg with PostHog Orange text. Compact utility button#d4c9b8 background, black text, no visible radius. Hover: same orange text flash. Featured/premium actions#eeefe9 background, Sage Placeholder (#9ea096) text, 4px radius, 1px #b6b7af border. Looks like a search/filter control#fdfdf8 background, Olive Ink text, 4px radius, transparent 1px border. Minimal presence#F54E00) or Amber Gold (#F7A501) text on hover — the brand's signature interaction surprise#fdfdf8) or white background, 1px #bfc1b7 border, 4px–6px radius — clean and minimal#eeefe9 background for secondary content containers0px 25px 50px -12px rgba(0, 0, 0, 0.25) — a single deep shadow for elevated content (modals, dropdowns)#eeefe9 background, #9ea096 placeholder text, 1px #b6b7af border, 4px radius, 2px 0px 2px 8px padding#3b82f6 ring at 50% opacity (Tailwind blue focus ring)#374151 for input values — darker than primary text for readability#23251d) for nav links, underline on hoverspan)button, div, combobox)button, div, li)span, div)| Level | Treatment | Use |
|---|---|---|
| Level 0 (Flat) | No shadow, warm parchment background | Page canvas, most surfaces |
| Level 1 (Border) | 1px solid #bfc1b7 (Sage Border) |
Card containment, input borders, section dividers |
| Level 2 (Compound Border) | Multiple 1px borders on different sides | Input groupings, toolbar elements |
| Level 3 (Deep Shadow) | 0px 25px 50px -12px rgba(0, 0, 0, 0.25) |
Modals, floating elements, mega-menu dropdowns |
PostHog's elevation system is remarkably minimal — only one shadow definition exists in the entire system. Depth is communicated through:
- Border containment: Sage-tinted borders (#bfc1b7) at 1px create gentle warm separation
- Surface color shifts: Moving from #fdfdf8 to #eeefe9 to #e5e7e0 creates layered depth without shadows
- The single shadow: The one defined shadow (0 25px 50px -12px) is reserved for floating elements — modals, dropdowns, popovers. It's a deep, dramatic shadow that creates clear separation when needed
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <425px | Single column, compact padding, stacked cards |
| Mobile | 425px–640px | Slight layout adjustments, larger touch targets |
| Tablet | 640px–768px | 2-column grids begin, nav partially visible |
| Tablet Large | 768px–1024px | Multi-column layouts, expanded navigation |
| Desktop | 1024px–1280px | Full layout, 3-column feature grids, expanded mega-menu |
| Large Desktop | 1280px–1536px | Max-width container, generous margins |
| Extra Large | >1536px | Centered container at max-width |
4px–12px padding — compact but usable#4d4f46)#23251d)#F54E00)#1e1f23)#e5e7e0)#fdfdf8)#bfc1b7)#9ea096)When refining existing screens generated with this design system: 1. Verify the background is warm parchment (#fdfdf8) not pure white — the sage-cream warmth is essential 2. Check that all text uses the olive family (#4d4f46, #23251d) not pure black or neutral gray 3. Ensure hover states flash PostHog Orange (#F54E00) — if hovering feels bland, you're missing this 4. Confirm borders use sage-tinted gray (#bfc1b7) not neutral gray — warmth runs through every element 5. The overall tone should feel like a fun, scrappy startup wiki — never corporate-polished or sterile