Design System: PostHog

1. Visual Theme & Atmosphere

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