# PostHog — Marketing Site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Surfaces (warm paper)
| 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 |

### Text
| 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 |

### Accent
| 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.

## 3. Typography Rules

- Everything: `IBM Plex Sans Variable` (with IBM Plex Sans fallback) — one family across the whole site.
- Mono (code windows): IBM Plex Mono (used in embedded editors; not always captured).
- Weights are moderate — body 400, headings ~500–700; IBM Plex's slightly mechanical letterforms reinforce the "developer OS" feel.

| 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.

## 4. Component Stylings

### Buttons
- **Primary (CTA)**: bg `#cd8407`, text `#23251d` (dark on orange), 1.5px border `#b17816` (darker than fill), radius 6px, h 34px, 16px/400. Boxy, not pill.
- **Secondary / ghost**: transparent or `#e5e7e0` fill, 1px hairline border, dark text, radius 4–6px.
- Buttons are small-radius (4–6px) rectangles, never pills.

### Window chrome (signature)
- Draggable app windows: title bar with a document icon + dropdown chevron, right-aligned minimize / maximize / close controls (classic OS glyphs); 1px border; near-square corners (2–4px); white content area.

### Dock / file icons (signature)
- Left rail of pixel-art file icons with tiny labels below (home.mdx, Products, Pricing, demo.mov, Docs, Sign up ↗). Icons are hand-drawn/pixel, not flat vector.

### Cards / panels
- bg `#eeefe9`/`#e5e7e0` or white, 1px hairline border, radius 2–6px, minimal shadow. Deep drop shadow (`0 25px 50px -12px rgba(0,0,0,.25)`) only on floating windows/modals.

### Nav (menu bar)
- Top OS-style menu bar: logo left, text menus (Products, Pricing, Docs, Community, Company, More), right actions (search, notifications, avatar) + orange "Get started – free" CTA.

## 5. Layout Principles

- Full-viewport "desktop" metaphor: fixed menu bar (top), fixed icon dock (left + right margins), windows floating on the paper canvas.
- Dense, utilitarian spacing; hairline borders separate everything.
- Small radii throughout (2/4/6px) — the site is deliberately boxy.
- Content lives inside app windows rather than centered marketing columns.

## 6. Depth & Elevation

- Radii: `2px` / `4px` / `6px` only — near-square. No large rounding, no pills.
- Control height: buttons `34px`.
- Shadows: mostly none (borders do the work); floating windows use a strong `0 25px 50px -12px rgba(0,0,0,.25)`.
- Focus ring seen as `0 0 0 4px` offset outline.

## 7. Motion

- Windows can be dragged, minimized and maximized (desktop-OS interactions).
- Hover states on dock icons and menu items; playful micro-interactions.
- Restrained transitions otherwise; no smooth-scroll library confirmed. Treat as 100–200ms ease.

## 8. Backgrounds, Effects & WebGL

- **Signature**: grainy warm-paper texture across the whole canvas (`#e1d7c2` + noise), plus hand-drawn illustrations (hedgehogs gardening/hiking) anchored in the margins.
- No gradients-as-hero, no WebGL scene; the richness is illustration + paper grain, not generated effects.
- Occasional translucent panels (`#ffffff99`, `#e6e7e0bf`) for overlays like the cookie banner.

## 9. Do's and Don'ts

### Do
- Dress the UI as a retro desktop OS: menu bar, icon dock, draggable titled windows with min/max/close.
- Use a warm grainy-paper canvas (`#e1d7c2`) and hand-drawn hedgehog illustrations in the margins.
- Keep corners near-square (2–6px) and use hairline borders instead of shadows.
- Use IBM Plex Sans for everything; IBM Plex Mono only inside code windows.
- Reserve sunflower-orange (`#cd8407`) for CTAs and links; dark text ON the orange.
- Write playful, self-aware copy.

### Don't
- Don't use pills or large rounded corners — the site is boxy.
- Don't lean on gradients or glossy shadows for the hero; use illustration + paper grain.
- Don't introduce a second UI accent; greens/blues belong only inside illustrations.
- Don't switch type families — IBM Plex is the whole voice.

## 10. Responsive Behavior

- The desktop metaphor collapses toward a simpler stacked layout on mobile; dock/windows adapt.
- Specific breakpoints not captured (desktop only).

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#e1d7c2` · Text `#000000` · Muted `#65675e` · Panel `#eeefe9` · Accent `#cd8407`
- Font: `IBM Plex Sans` (all) · Body: 16px · Radius: 2–6px (never pill) · Control height: 34px
- Primary button: bg `#cd8407`, dark text `#23251d`, 1.5px `#b17816` border · Window shadow: `0 25px 50px -12px rgba(0,0,0,.25)`

<posthog_design_language>
Use the PostHog design language: a playful skeuomorphic desktop-OS dev tool. The whole page is a retro operating system on a warm grainy-paper canvas (#e1d7c2 + noise): a top menu bar, a left dock of hand-drawn pixel-art file icons with tiny labels (home.mdx, demo.mov, Docs, Sign up), and draggable app windows with classic title-bar chrome (document icon + minimize/maximize/close glyphs, 1px border, near-square 2–4px corners, white content area). Hand-drawn hedgehog illustrations gardening and hiking fill the margins, and copy is cheeky and self-aware. Typography is IBM Plex Sans everywhere (IBM Plex Mono only inside code windows), body 16px/400, headings 600–700, tight tracking. The single accent is sunflower-orange #cd8407 — primary CTAs are boxy orange rectangles (radius 6px, 34px tall) with DARK text #23251d and a darker 1.5px border #b17816; secondaries are hairline-bordered stone panels (#e5e7e0/#eeefe9). Everything is boxy — radii only 2/4/6px, never pills — and structured with hairline borders rather than shadows, except floating windows which get a strong 0 25px 50px -12px rgba(0,0,0,.25) drop shadow. Greens and blues appear only inside illustrations. Motion is desktop-OS interaction: drag, minimize, maximize, hover, 100–200ms. Feels: playful, retro, hand-crafted, irreverent. Avoid: pills or large rounding, gradient/glossy hero effects, a second UI accent color, and switching away from IBM Plex.
</posthog_design_language>