Design teardown
PostHog
A frosted desktop window on an illustrated meadow, with lifted gold buttons, rounded type, and short plainspoken copy.
posthog.com
Design character
A window on a meadow
The page is a painted landscape with a cream application window in the middle and icon docks on both sides. Inside, the writing is short, casual, and a little dry: a few-word headline, a one- or two-sentence lede, then cards and lists. Personality comes from the scene and the tactile controls, while the type stays plain.
Typography
Almost everything is RoundHog, a rounded sans. Titles are extra bold with tight tracking. Body copy is 18px medium gray, usually one or two sentences. Menu and button labels drop to 13–15px. Code is Source Code Pro at 13px.
Color system
The seen ground is an olive meadow. UI surfaces are warm paper and a sage accent. Actions are gold with a darker gold plate. Blue marks a highlighted phrase, purple frames the demo, and green marks a check.
Spacing and geometry
Spacing follows a 4px step. The window interior is loose, with 56px before each section. Chrome is tight: a 40px menu and small button padding.
Layout
A full-viewport illustrated scene holds a centered window, about 80% of the width and 95% of the height. A slim menu sits on the top edge. Icon docks sit outside the window, left and right. Inside, content is a single 1040px column: a two-part hero, a framed demo, then stacked prose sections with a table and small cartoons.
Motion
Controls feel physical. The button face sits 4px above its plate, rises on hover, and presses down in 100ms. A demo carousel advances on a 5s linear timer and fades panels in over 300ms. A thin flow animation loops every 3.6s. Hand-drawn underlines draw on in about 300ms.
UI fingerprint
- Lifted gold buttons The face is #eb9d2a on a #cd8407 plate with a #b17816 edge, raised about 4px.
- Round custom sans RoundHog carries titles at 36px extra bold and menus at 13px medium.
- Window on a meadow A 20px-radius frosted window sits on an olive illustrated field, with docks outside it.
- Blue highlighter One phrase in a headline is #2f80fa on a pale blue wash with 6px radius.