# PostHog homepage design spec (free) - Site: posthog.com - Captured: 2 Oct 2026, at 1440x900 desktop and 390x844 phone widths - Independent analysis by iter0. Not affiliated with, endorsed by or sponsored by PostHog. - Licence: free to use as a pattern guide for your own site. It describes layout, proportion, type scale and colour roles. Do not copy PostHog's name, logo, wording, imagery or artwork. - Contents: 1. Hero, 2. Navigation, 3. Signature component. - Build your own site from this spec: https://iter0.com/build --- # Product workspace framed by an illustrated landscape Evidence is from the supplied desktop, below-fold, and 390px screenshots and the computed-style extraction. The desktop screenshot shows a pale application surface over a green illustrated background, not a blank or challenge page. CRAFT ARCHETYPE: product-UI-led ## The big idea Place a software workspace against a distinctive illustrated backdrop. Keep the product surface and its interface prominent, with the landscape visible around its edges. Use original copy, visual assets, and product details rather than source branding or wording. ## Layers At 1440px, the measured article is 1139px wide, and the main application surface is visibly centered over the landscape. The opening content sits in two columns: the text column is 474px wide, and the setup card is 414px wide. The measured headline begins at x=230, y=201 and is 36px/40px, weight 800; the card heading begins at x=766, y=218. Below, a three-tab row leads into a large product-demo panel. A cookie notice overlays the lower-right portion of the desktop screenshot. On mobile, the surface fills most of the 390px width, with narrow strips of landscape at its sides. ## Type Use a rounded sans-serif. Set the desktop headline to 36px/40px, weight 800, with approximately -0.9px tracking; use a blue-highlighted phrase on a pale-blue background. The measured supporting paragraph is 17px/25.5px at weight 500. The setup-card heading is 18px/28px, and explanatory section headings are 24px/32px. Keep interface labels smaller, in the measured 11–15px range. ## Colour Use a pale neutral application surface, near-black headings, and muted gray-green supporting text. The headline highlight is blue on a translucent pale-blue fill. Orange primary actions have a measured face color of RGB 235,157,42 and a darker backing of RGB 205,132,7. The demo’s selected tab is purple, measured as RGB 182,42,217. Keep the green illustration visible around the main surface. ## States and motion The primary action face is visibly raised above its backing; the measured desktop transform offsets it upward 4px. The demo shows three tabs, with one purple selected tab. The screenshots do not establish tab behavior or animation, so describe only the visible selected state. ## Do NOT copy or add Do not reuse the source brand, logo, exact copy, customer names, numerical claims, or demo prompt. Do not invent product functionality or claim unobserved interaction or animation. ## Checks you can run At 1440px, check the 1139px article, 474px text column, 414px setup card, and three-tab demo. Verify the headline is 36px/40px and supporting copy is 17px/25.5px. Check the orange face color RGB 235,157,42 and darker backing RGB 205,132,7. ## Phone at 390px The phone screenshot shows a compact top control row, then a centered product mark, centered headline and copy, and a setup card below. The headline wraps across two lines; the descriptive paragraph spans three lines, followed by a centered two-line team-count statement. The setup card begins at approximately y=477 and extends below the visible area; the cookie notice overlays its lower portion. Narrow green illustrated strips remain at the sides of the pale central surface. Do not infer unseen phone content beyond the screenshot. --- # Global controls and contextual edge navigation Evidence is from the supplied desktop and 390px screenshots, checked against the measured navigation boxes and computed styles. CRAFT ARCHETYPE: product-UI-led ## The big idea Separate a shallow global navigation bar from contextual destinations arranged over the illustrated background. On desktop, the contextual links form left and right edge rails framing the central product surface. On the supplied phone screenshot, those links reflow into rows beneath the compact top controls. ## Layers At 1440px, global navigation labels begin at x=53 and the text cluster extends to x=434. The link boxes are 28px tall; the orange action at x=1189 is 125×32px. Utility controls sit to its right. The left contextual rail starts around y=66, with measured destinations at y=66, 150, 234, 318, 402, 486, and 570; the right rail begins near x=1324 and uses similarly spaced entries. Contextual hit regions measure 60–77px high. At 390px, the top menu control is 72×36px at x=16, the orange action is 125×32px at x=139, and utility controls continue to the right. Contextual links appear in rows rather than desktop edge rails. ## Type Use a rounded sans-serif. Global navigation labels are 13px, weight 500, with 13px line-height and a 2px gap. Contextual labels are 13px/16.25px, weight 500; longer labels wrap across lines. The desktop contextual labels are white with a subtle dark text shadow over the illustrated ground. Do not copy the source labels or mark. ## Colour Global navigation text is dark olive-black, RGB 35,37,29. Contextual labels are white over the green illustration. The primary action face is RGB 235,157,42, with a darker RGB 205,132,7 backing and a 6px radius. Keep utility controls visually separate from the text links. ## States and motion The screenshots do not show an open menu or a hover state. Menu behavior, transitions, and selected-destination styling are not established; do not invent them. ## Do NOT copy or add Do not reproduce the source mark, labels, or source-specific destinations. Do not claim the menu opens in a particular way or add unsupported hover effects. ## Checks you can run At 1440px, check 13px global labels, 28px link boxes, the 125×32px action, and contextual hit regions 60–77px high. Confirm that the edge rails do not collide with the central surface. At 390px, check the 72×36px menu control at x=16 and the 125×32px action at x=139; preserve the evidenced row arrangement of contextual links without claiming unshown behavior. --- # Product-demo panel and capability links Evidence is from the desktop screenshot and measured product-demo elements. The supplied below-fold screenshot has scrollY 0 and repeats the hero view; it does not establish a separate below-fold feature section. CRAFT ARCHETYPE: product-UI-led ## The big idea Use the visible product demo as a structured interface: a three-tab strip above a large framed panel, with an interface illustration on the left and explanatory content on the right. Nearby, arrange capability links as a compact paired grid. This describes the visible hero content, not a verified separate below-fold section. ## Layers The desktop demo has three tabs; the selected tab is purple. The demo panel begins around x=163, y=358 in the screenshot. Within the measured context illustration, six capability links occupy three paired rows. Each measured link box is about 159×28px, at x=266–425 and x=579–738, with row y positions 593, 720, and 847. Use original labels and a distinct diagram rather than copying source content. The measured example response also contains four compact source rows with 21×21px icons and two lines of text each. ## Type Measured capability-link text is approximately 14.37px with an 18px line-height and medium weight. Underline link labels. The explanatory panel heading is 24px/32px, bold; its supporting text is 18px/27px. Small demo details are approximately 11–12px. Keep the page’s 36px headline visually dominant. ## Colour Use pale neutral surfaces, thin gray borders, near-black primary text, and muted gray-green supporting text. The selected tab is purple, measured as RGB 182,42,217. Keep orange for primary actions rather than using it on every capability link. ## States and motion The captured demo shows one selected purple tab and two quieter alternatives. Although the computed-style extraction includes a three-second animated text-gradient rule elsewhere, the screenshots do not establish its visible behavior in this panel. Treat animation and tab interaction as unknown. ## Do NOT copy or add Do not reuse the source’s product names, link labels, logos, demo prompt, customer names, or numerical claims. Do not describe this hero demo as a verified below-fold section. ## Checks you can run Check the three-tab strip, six capability links in three paired rows, and 21×21px demo icons. Verify approximately 14.37px link text, a 24px/32px explanatory heading, and one visibly selected purple tab. Confirm the interface and explanation remain distinct within the demo panel.