Playful skeuomorphic dev tool dressed as a retro desktop OS: grainy warm-paper canvas, a file-icon dock, titled draggable windows, IBM Plex Sans, boxy square corners, hand-drawn hedgehogs, and a sunflower-orange #cd8407 accent.
Browse PostHog in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: posthog.com (live DOM, computed styles), 2026-07-10 (desktop 1512px). Coverage: marketing home (desktop-OS shell + hero window). Dashboard: pending login (needs-dashboard). Responsive: behavior only; mobile not verified.
Playful skeuomorphic dev-tool design — the entire marketing site is dressed as a retro desktop operating system. A warm grainy-paper canvas holds a top menu bar, a left dock of pixel-art "file" icons (home.mdx, demo.mov, customers.mdx…), and draggable windows with classic title-bar chrome (minimize / maximize / close). Hand-drawn illustrations of hedgehog mascots gardening, hiking and hacking fill the margins, and copy is cheeky and self-aware ("Legally-required cookie banner"). It deliberately rejects the sleek gradient-SaaS look for something hand-crafted, dense and fun: square corners, hairline borders, IBM Plex everywhere, and a warm sunflower-orange accent. Feels: playful, retro, hand-crafted, irreverent.
| Token | Hex | Role / usage |
|---|---|---|
| tan-canvas | #e1d7c2 | Page background (grainy warm paper) |
| tan-200 | #d0d1c9 | Secondary surface, dock hover |
| stone-100 | #eeefe9 | Light panel / window body tint |
| stone-50 | #e5e7e0 | Card / inset fill |
| white | #ffffff | Window content area, editor surface |
| Token | Hex | Role / usage |
|---|---|---|
| ink | #000000 | Primary text, headings |
| ink-800 | #23251d | Button text, strong labels |
| gray-600 | #4d4f46 | Body text |
| gray-500 | #65675e | Secondary text |
| gray-400 | #73756b | Muted / captions |
| Token | Hex | Role / usage |
|---|---|---|
| orange-600 | #cd8407 | Primary accent: CTA fill, links, brand |
| orange-500 | #eb9d2a | Lighter orange, hover/highlight |
| orange-700 | #b17816 | CTA border (darker than fill) |
| green | #6aa84f | Rare secondary (illustration / success) |
Rule: single sunflower-orange accent for CTAs and links; greens/blues live only inside illustrations.
IBM Plex Sans Variable (with IBM Plex Sans fallback) — one family across the whole site.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero display | 40–56 | 600–700 | tight (~-1%) |
| Section head | 28–32 | 600 | ~0 |
| Body | 16 / 24 | 400 | 0 |
| UI / buttons | 15–16 | 400–500 | 0 |
| Dock label / caption | 12–13 | 400 | 0 |
Patterns: one type family (IBM Plex Sans) everywhere; mono only inside code windows. Sentence case, moderate weights.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.