PostHog

retro desktop picnic on the lawn

Developer Tools Light light playful friendly warm illustrated retro Built with Gatsby, Tailwind CSS

PostHog's site is built like a friendly desktop computer. A grassy 3D wallpaper fills the background, labelled desktop icons line both edges, a rounded menu bar runs across the top, and every page opens in a frosted sage window with maximise and close buttons. It feels playful and a little retro, but it stays readable. The things that make it distinctive are chunky honey-orange buttons with a raised bottom edge, marker-style highlights behind key words, a bold purple tab frame and cartoon hedgehog art. All of this sits on top of a calm, warm-grey reading surface.

One rounded grotesk, RoundHog, does almost all the work. Headings are 700–800 weight with slightly tight letter-spacing (-0.025em). Body text is 16–18px at weight 400–500. The neutrals are warm olive greys (#eeefe9, #e5e7e0, #bfc1b7, #23251d, #65675e) rather than cool ones. Colour is kept for small moments: orange #eb9d2a for calls to action, purple #b62ad9 for the showcase tabs, blue #2f80fa for highlighted words, and green #6aa84f for checkmarks. Shapes are small and tight (4–6px radius on controls and cards, about 20px on windows). Spacing is based on 4px, with dense 4–8px gaps inside the interface and 20px padding in cards. Depth comes from solid offset ledges under buttons and tabs, plus one large soft shadow under each window.

https://posthog.com

Colors

Click a swatch to copy

Typography

  • display
    RoundHog
    600 · 700 · 800 · 900 · falls back to Figtree, Inter, system-ui, sans-serif
    A custom, slightly rounded grotesk. Headings use 700–800 with negative tracking of about -0.025em (-0.9px at 36px, -1.5px at 60px).
  • body
    RoundHog
    400 · 500 · 600 · 700 · falls back to Figtree, Inter, system-ui, sans-serif
    The same family is used for all body and interface text. Lead paragraphs use 500, buttons and links use 600–700, and menu items are small 13px/500.
  • mono
    Source Code Pro
    500 · falls back to JetBrains Mono, ui-monospace, monospace
    Used very rarely, for small code or label snippets only.
Display
60px / 1
700 · -1.5px
PostHog
H1
36px / 1.11
800 · -0.9px
Retro desktop picnic on the lawn
H2
30px / 1.33
700 · -0.75px
Retro desktop picnic on the lawn
H2 Section
24px / 1.33
700 · -0.6px
Retro desktop picnic on the lawn
H3
20px / 1.6
600 · -0.5px
The quick brown fox jumps over the lazy dog
Lead
18px / 1.5
500 · normal
The quick brown fox jumps over the lazy dog
Body
16px / 1.5
400 · normal
The quick brown fox jumps over the lazy dog
Button / Small
14px / 1.43
600 · normal
The quick brown fox jumps over the lazy dog
Menu
13px / 1.5
500 · normal
The quick brown fox jumps over the lazy dog

Spacing & Shape

Spacing
Base unit
4px
Density
comfortable
Container
1200px
Section gap
48px
Card padding
20px
2
4
6
8
10
12
16
20
24
32
48
80
Radius
  • Hairline details, highlighter marks 1px
  • Menu bar items, small cards, cream panels 4px
  • Buttons, tabs, white cards 6px
  • Dropdown menus, pricing hero panel 8px
  • App windows, menu bar shell 20px
  • Avatars, pills, circular illustrations 9999px
Shadows
Window Large soft drop shadow under frosted app windows floating over the wallpaper
0 25px 50px -12px rgba(0,0,0,0.25)
Ledge Solid, blur-free bottom edge under tabs and interface chips; a stamped, tactile feel
0 2.31px 0 0 rgb(210,211,204)
Card Raised white cards such as the 'Set up for free' box, and dropdown menus
0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)
Dialog Large modal-style panels such as the 768px pricing estimator card
0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)
Hairline Small inputs and chips
0 1px 2px 0 rgba(0,0,0,0.05)

Components

Live previews rendered from recipes
PostHog Get started
Buttons
Tags
New Developer Tools light
Showcase tabs
Showcase tabs
Card
Everything in one ledger

Reconcile every account overnight and close the month in an afternoon instead of a fortnight.

Get started
  • Primary ledge button — The signature call to action. It sits on a solid darker-amber ledge, like a physical key. On the menu bar it is compact ('Get started – free', about 13–14px). In hero cards it stretches to fill its column.
  • Secondary ledge button — Used for 'Install with AI', 'Explore product suite' and 'Search the docs' (with a leading search icon). Always shares the orange ledge so it reads as part of the same button family.
  • Menu bar item — 28px tall text items in the top system menu bar (Products, Tools, Pricing, Docs, Community, Company, More). Behaves like OS menus: each opens a dropdown.
  • System menu bar — A full-width translucent strip inset a few pixels from the viewport edge. From left to right: logo glyph, menu items, a flexible gap, the compact orange CTA, then 20px stroked icons for search, help and account.
  • App window — Every page lives inside one of these windows. Small grey maximise and close glyphs sit in the top-right corner. Content inside is capped at about 1200px, and the wallpaper and desktop icons stay visible around it.
  • Content card — Docs index panels start with a 14px/600 uppercase label and a muted subline. There is a cream variant (#fdfdf8, 4px radius). Guide cards add a 4px solid left stripe in orange #eb9d2a, purple #b62ad9 or blue #2f80fa, with a small tracked-caps meta line ('VOL. 1 · 6 GUIDES').
  • Showcase tabs — The active tab joins an 8px purple frame that surrounds a white demo pane. A thin white progress bar under the active label shows auto-rotation, and a pause button sits top-right in the pane.
  • Highlighter mark — A hand-drawn marker swipe behind key phrases ('analytics, errors', 'for free'). Headline variants: blue text #2f80fa on a #d9e8f2 block, and green #4d7533 text on a pale green block. Also pairs with hand-drawn squiggle underlines on words like 'agents'.

Do / Don't

  • Frame every page as an OS window (rounded about 20px, frosted #e5e7e0, soft 0 25px 50px -12px shadow) floating over an illustrated backdrop.
  • Give every call to action a solid, blur-free ledge in #cd8407 under a #eb9d2a or white face, with 6px radius and dark #000/#23251d text.
  • Keep all neutrals warm and olive (#eeefe9, #e5e7e0, #bfc1b7, #65675e, #23251d); use #bfc1b7 1px borders to separate cards.
  • Emphasise one or two phrases per block with hand-drawn highlighter swipes or squiggle underlines, not bold colour text alone.
  • Set all headings in RoundHog 700–800 with about -0.025em tracking; use 500 weight for lead copy at 17–18px.
  • Use saturated accents in small doses: a purple #b62ad9 frame for the one showcase module, and coloured 4px left stripes on guide cards.
  • Keep interface controls small and dense (13px menu items, 2px 8px padding, 4px gaps) to reinforce the desktop feel.
  • Don't use cool greys, pure #f5f5f5 surfaces or blue-tinted borders; they break the warm paper tone.
  • Don't give buttons blurred drop shadows or gradients; depth comes from the flat offset ledge only.
  • Don't make the brand orange a background wash or use it for large surfaces; it belongs to calls to action and tiny highlights.
  • Don't use large radii (12–24px) on buttons or cards; reserve rounding above 8px for windows and avatars.
  • Don't replace the illustrations with stock photography or glossy 3D abstract blobs; imagery should be cartoonish, retro and self-aware.
  • Don't set headings in a geometric display face or at light weights; the voice is chunky and rounded.
  • Don't use more than one saturated accent frame per view; purple, blue and green are highlights, not themes.

Screens

PostHog – We make your product self-driving /
PostHog pricing – Start free, scale when you need /pricing
PostHog Docs /docs
About PostHog /about
Changelog - PostHog /changelog
Mobile 390×844
Mobile navigation menu open