PostHog homepage, decoded: the homepage as a product screen
The page itself looks like a software workspace sitting on an illustrated green landscape, with navigation arranged as rails around it.
4 min read
In this note
What this is, and what it is not
This is iter0's independent analysis of the PostHog homepage as we captured it on 2 Oct 2026, at a 1440px desktop width and a 390px phone width. It is not affiliated with, endorsed by or written with PostHog. Everything below comes from a design spec we already hold for the page: its measurements, its layout and what the capture did and did not show. There are no screenshots, logos or marketing copy from PostHog here, and a live site can change at any time.
The big idea of the hero
A pale application surface sits centred over a green illustrated landscape. Inside, a 474px text column holds a 36px headline at weight 800, with a blue-highlighted phrase on a pale blue fill, and a 414px setup card sits beside it. Underneath is a three-tab row leading to a large product-demo panel. The product surface is the page, and the landscape is only visible around its edges.
The navigation choice
Navigation is split in two. A shallow global bar carries 13px labels and an orange action, and the destinations are arranged as left and right edge rails over the landscape, with seven entries on the left spaced evenly down the screen. Rail labels are white with a faint text shadow. The spec says menu behaviour and hover states are not shown.
The signature component
The signature is the demo. A three-tab strip, with the selected tab in purple, sits above a large panel with an interface illustration on the left and explanatory text on the right. Nearby, six capability links are arranged in three paired rows, each about 159px by 28px and underlined. The spec is careful to say this is hero content, not a verified separate section below the fold.
Type and colour decisions
A rounded sans-serif. The hero headline is 36px with 40px line height; the paragraph is 17px; card headings are 18px; section headings 24px; interface labels run 11 to 15px. Surfaces are pale neutral with near-black headings. Primary actions are orange (RGB 235,157,42) raised 4px above a darker orange backing, and the selected tab is purple.
What changes on a phone
At 390px a compact control row sits at the top, then a centred product mark, a two-line headline, a three-line paragraph and a centred two-line statement. The setup card begins near y=477 and runs below the screen, with a cookie notice overlapping its lower part. Narrow strips of the green illustration remain at the sides.
What the capture does not tell us
Tab behaviour, any animation in the demo, the menu's open state and any selected-destination styling are not established. The spec notes a text-gradient animation rule elsewhere on the page but does not tie it to anything visible here.
What to steal (the pattern, not the look)
If your product is a tool, show the tool as the page. Give the primary button a physical raised look so it reads as pressable, and keep your colour roles strict: orange for actions, purple for the selected state.
Get the free PostHog design spec
We keep a longer craft spec for this page: hero, navigation and signature component, with the measured sizes, a list of what not to copy and checks you can run. It is free to download as a Markdown file, and you can use it as a pattern guide for your own site. It describes layout and proportion, so use your own name, wording and imagery. If you want a site built around the same pattern, give the spec to iter0 and it will build you an original page from it.
Put the brief into practice
A launch page should make the buyer, promise, proof, and next action obvious. iter0 uses this same standard when it turns a brief or reference site into a builder-ready page.
Start your launch build