PostHog · Full Page
PostHog
A brand that decided the B2B SaaS marketing rulebook was written by people it never wanted as customers — orange-red signature, multi-colour brand system, Squeak font. Anti-corporate product analytics.

Editorial disclaimer
Editorial noteThis entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm — do not reproduce brand identity, logo, product copy, or proprietary features.
Curator verdict
Why we catalogued it?
PostHog is what happens when a company decides the rulebook for B2B SaaS marketing was written by people it never wanted as customers. We catalogued it because it proves the most disarming way to sell serious infrastructure is to refuse to act serious about it — a cream-paper canvas, a cartoon hedgehog, and a palette that behaves like a child's marker set, all wrapped around a genuinely deep product analytics platform. If your audience is engineers who roll their eyes at gradient-mesh hero sections and 'enterprise-grade synergy' copy, this is the reference that gives you permission to have a personality.
Design decisions observed
- Anti-corporate by construction — the page leads with a warm off-white paper canvas and a hand-drawn hedgehog mascot, not a dark gradient or a product screenshot. The brand signals 'we are not like the others' before you read a single word.
- A loud, deliberately un-coordinated accent palette — a signature orange-red carries the calls-to-action while yellow, blue, teal, purple, and green get tossed in like a highlighter set. Most brands pick one accent; PostHog picks all of them on purpose, and the chaos reads as confidence.
- Rounded, friendly typography doing the personality work — a soft display face plus a rounded body family round off every edge. The letterforms themselves carry the playful tone before any illustration does.
- Warm grays instead of cold ones — body text descends through olive-tinted near-blacks rather than the clinical blue-grays everyone else uses. It's a tiny choice that keeps the whole page feeling hand-made rather than templated.
- Density that respects developers — short scannable copy, generous border-delimited cards, and motion that floats rather than slides. It reads fast because the audience reads fast, but it never feels austere the way a pure-minimalist landing would.
- Light-first, unapologetically — where the rest of the dev-tool category sprinted to dark mode, PostHog committed to a bright paper aesthetic. That contrarian choice is itself a brand statement.
What to study
- How a brand gets away with a cartoon mascot in a category obsessed with looking 'serious' — steal the nerve, not the hedgehog. The lesson is that personality and credibility are not a trade-off when your product genuinely delivers.
- The multi-accent strategy — most design systems would call a six-color accent palette a failure of discipline. Study how PostHog makes it cohere: a single dominant action color does the structural work while the rest appear as small, joyful punctuation.
- Warm-neutral grounding — the off-white paper background and olive-leaning gray ramp are what keep the loud accents from feeling like a clown car. Learn how a warm neutral base buys you license to be playful on top.
- Restrained, atmospheric motion — slow floating ambient loops and a single fast interactive curve. The page feels alive without a single attention-grabbing animation; copy the discipline of keeping interactive motion to one quick curve and reserving the long durations for background life.
What to avoid
- Don't import PostHog's six-accent free-for-all onto a brand that hasn't earned a personality first — without the warm-neutral grounding and a genuinely strong product underneath, a loud palette just reads as amateur. The chaos works because everything else is disciplined.
- Don't mistake 'playful' for 'unstructured' — PostHog's whimsy sits on a strict border-and-radius system. Copy the hedgehog energy without the underlying grid and you get noise, not charm.
- Don't deploy the mascot-and-marker aesthetic at a consumer brand expecting warmth from a stranger — this voice is calibrated for developers who are in on the joke. A different audience reads the same cues as unprofessional.
Taste notes
The page feels like a beloved open-source README that someone lovingly turned into a website — warm paper underfoot, a mascot peeking from the margins, and a color box spilled across the calls-to-action. Nothing here is trying to impress an enterprise procurement committee; it's trying to make an engineer smile and then trust you. The genius is that the playfulness is structurally rigorous: every rounded corner, every olive-gray, every floating illustration sits on a tight observable grid. You're being charmed, not sold to, and the charm is engineered.
Lineage & references
- The patron saint of the anti-corporate developer-tool wave — PostHog sits alongside Supabase and Railway in the open-source-first cohort that markets to builders by being unmistakably built by builders, mascot and all.
- Shares DNA with the playful-illustration B2B generation (Mailchimp's Freddie, GitHub's Octocat, DigitalOcean's whimsy) — brands that proved a cartoon character can carry serious infrastructure if the personality is consistent and the product is real.
- Part of the warm-light contrarian movement against 2024+ dark-first dev tooling (Linear, Vercel, Raycast) — where peers went near-black and minimal, PostHog doubled down on bright paper, loud color, and human warmth as the differentiator.
Design language brief
Paste-ready for your agent.
A typed design system transfer brief — philosophy, tokens, rules, techniques, and fitness checks. Your agent reads the whole language, not just the pixels.
Philosophy
Light-first warm-paper playfulness with engineering rigor underneath. The canvas is an off-white cream (#ffffff body, #fdfdf8 / #e1d7c2 warm sections); olive-tinted near-blacks (#1a1a1a → #4d4f46 → #65675e) carry text instead of clinical blue-grays. A signature orange-red (#f54e00) owns every primary action, while a deliberately loud secondary set — yellow #f7a501, blue #2f80fa, teal #30abc6, purple #b62ad9, green #36c46f — appears as small joyful punctuation, never as fills. Rounded display + rounded body typography softens every edge. Motion is split: one fast interactive curve (cubic-bezier(0.4, 0, 0.2, 1) at 0.15s) plus slow ambient floats (4–7.6s ease-in-out) for background life. Personality over polish, warmth over authority, but every whimsical choice sits on a strict 1px-border, 2px-base-spacing grid.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (light-first warm-paper backgrounds #ffffff / #fdfdf8 / #e1d7c2 + olive-tinted near-black text ramp #1a1a1a / #4d4f46 / #65675e + a single dominant orange-red action color #f54e00 + a loud-but-rationed secondary accent set of yellow / blue / teal / purple / green used as punctuation), rounded typographic voice (Squeak-style display + Open Runde-style rounded body, weight range 400–800), 2px-base spacing scale, border-first delimitation (1px solid hairlines, soft 2–6px radii), the primary cubic-bezier(0.4, 0, 0.2, 1) 0.15s interactive motion curve plus slow ambient float loops for atmosphere, and a light-first / playful-but-structured posture across every page and component I ship. Treat this as my project's constitution — any new component I author should pass as if crafted in the same studio: friendly, warm, developer-first, structurally disciplined. Apply the language, not the source brand's specific copy, mascot, or identity. When I ask you to build a page or component, enforce these rules by default, and call out any decision that deviates.
Overview
- Layout
- Modular
- Content width
- Bounded
- Framing
- Textured
- Grid strength
- Strong
Color philosophy
Light-first warm-paper canvas — #ffffff body paired with cream #fdfdf8 / #fffefe and warm tan #e1d7c2 section panels doing the surface work. Text descends through an olive-tinted ramp #1a1a1a → #4d4f46 → #65675e → #374151 rather than cold blue-grays, keeping the page hand-made rather than templated. A single signature orange-red #f54e00 owns every primary action; a deliberately loud secondary set — yellow #f7a501, blue #2f80fa, teal #30abc6, purple #b62ad9, green #36c46f — appears as small joyful punctuation, never as flat fills. Borders are warm gray #9ea096 / #bfc1b7 hairlines.
- Olive-tinted near-black #1a1a1a / #4d4f46 (warm gray primary, ~1101 measured surface occurrences) for body and headings — the dominant reading layer, never a cold blue-black
- Warm-paper background ramp #ffffff (body) → #fdfdf8 / #fffefe (cream cards) → #e1d7c2 (warm tan feature panels) for gentle section separation without shadow
- Olive gray descender #65675e / #374151 / #9ea096 for captions, metadata, de-emphasized labels — warm, never clinical
- Signature orange-red #f54e00 reserved for primary CTAs and key interactive accents (the --squeak-button-color / swiper-pagination brand token) — one dominant action color
- Loud secondary accents #f7a501 (yellow) / #2f80fa (blue) / #30abc6 (teal) / #b62ad9 (purple) / #36c46f (green) used as small punctuation — illustration highlights, tags, decorative marks — never as large flat fills, total accent surface kept well under ~10%
- Warm gray hairline borders #9ea096 / #bfc1b7 (1px solid) do the structural delimiting on the light canvas
Gradients (paste-ready)
linear-gradient(90deg, rgb(1, 67, 203), rgb(43, 111, 244) 24.04%, rgb(210, 52, 1) 46.63%, rgb(255, 101, 31) 65.87%, rgb(251, 160, 0) 83.17%, rgb(1, 67, 203))
Typography rules
- Display family: Squeak (PostHog's custom rounded display face, self-hosted + preloaded from /fonts/squeak-bold-webfont.woff2). Use a friendly rounded display fallback (e.g. a rounded grotesque) if Squeak is unavailable — the rounded character is the signature, not the specific file.
- Body / heading family: Open Runde (soft rounded geometric sans). UI labels lean on IBM Plex Sans Variable. The rounded letterforms carry the playful tone before any illustration does — never substitute a sharp grotesque.
- Monospace: Source Code Pro (self-hosted, display: swap) with ui-monospace fallback for code, kbd, and tabular numerics.
- Weight range is full and expressive: 400 (reading) / 500 (UI labels) / 600 (emphasis) / 700 (subheads) / 800 (hero display). Unlike a stepped-ladder system, PostHog uses the standard weight ramp end-to-end — heavy 800 display is part of the loud, confident voice.
- Body type: 15px / line-height 25.71px (Open Runde) and 16px / 24px (IBM Plex). Generous line-height (~1.5–1.7) keeps the warm, breathable feel — do not tighten body leading.
- Headings: heading-1 24px / line-height 32px / letter-spacing -0.6px (Open Runde 600); heading-2 21.43px / 30px / -0.5357px (Open Runde 700). Negative tracking only at heading sizes, in px; body stays at letter-spacing: normal.
- Small / caption sizes: 12 / 13 / 14px at line-heights 16–21px for metadata, labels, and dense UI. Paragraph measure ~50–65 ch at body 15–16px.
Spacing rules
- 2px base unit. Scale: 2 / 4 / 6 / 8 / 10 / 12 / 14 / 17 / 20 / 24 / 32 / 34 px — note the 17px step (a measured optical value), not a clean 16. Pick from scale values; no magic numbers.
- Dominant rhythm sits on 4 / 8 / 17 px (the highest-frequency measured paddings); the 2px floor handles micro-corrections inside dense controls.
- Gutter values for flex/grid: 1 / 2 / 4 / 6 / 8 / 16 px — tight clusters at 2–6px, looser column gaps at 16px.
- Card padding: 12–24px on desktop, 8–17px on mobile. Feature panels lean to the 17 / 24 / 32 range for generous warm breathing room.
- Section vertical rhythm: 32–34px base steps scale up through generous multiples; the page breathes, it is not dense for density's sake.
Design tokens
Palette, type, and space — all agent-readable.
20 colors · hex / rgb / hsl / oklch
- foreground37%
- HEX
#4D4F46 - RGB
rgb(77, 79, 70) - HSL
hsl(73, 6%, 29%) - OKLCH
oklch(42.28% 0.0148 117.21)
- HEX
- foregroundswiper-pagination-bullet-inactive-color24%
- HEX
#000000 - RGB
rgb(0, 0, 0) - HSL
hsl(0, 0%, 0%) - OKLCH
oklch(0.00% 0.0000 0.00)
- HEX
- foreground16%
- HEX
#374151 - RGB
rgb(55, 65, 81) - HSL
hsl(217, 19%, 27%) - OKLCH
oklch(37.29% 0.0306 259.73)
- HEX
- neutral4%
- HEX
#9EA096 - RGB
rgb(158, 160, 150) - HSL
hsl(72, 5%, 61%) - OKLCH
oklch(70.12% 0.0145 115.96)
- HEX
- foreground4%
- HEX
#111827 - RGB
rgb(17, 24, 39) - HSL
hsl(221, 39%, 11%) - OKLCH
oklch(21.01% 0.0318 264.66)
- HEX
- foreground3%
- HEX
#65675E - RGB
rgb(101, 103, 94) - HSL
hsl(73, 5%, 39%) - OKLCH
oklch(50.92% 0.0141 117.08)
- HEX
- accent2%
- HEX
#F7A501 - RGB
rgb(247, 165, 1) - HSL
hsl(40, 99%, 49%) - OKLCH
oklch(78.33% 0.1663 73.49)
- HEX
- neutral2%
- HEX
#BFC1B7 - RGB
rgb(191, 193, 183) - HSL
hsl(72, 7%, 74%) - OKLCH
oklch(80.65% 0.0140 115.90)
- HEX
- accent2%
- HEX
#2F80FA - RGB
rgb(47, 128, 250) - HSL
hsl(216, 95%, 58%) - OKLCH
oklch(61.82% 0.1984 258.96)
- HEX
Inspector
Tab through the captured artifacts.
Six observable layers — page structure, fonts, breakpoints, z-index, gradients, motion — kept paste-ready alongside the tokens above.
Page structure
Semantic hierarchy at a glance.
Depth-first walk of meaningful sections — header, navigation, main regions, articles, footer. 7 nodes captured; depth capped at 6 for readability.
- body
- └─ div (×3)
- └─ div
- └─ div
- └─ div
- └─ div
- └─ Aside
Accessibility
WCAG contrast matrix.
292 combinations · 116 pass AA · 68 pass AAA · APCA Lc shown alongside WCAG 2.1 ratio for draft WCAG 3 awareness.
| Preview | fg | bg | Ratio | Normal | Large | APCA Lc | Context |
|---|---|---|---|---|---|---|---|
Aa | #000000 | #FFFFFF | 21.00 | AAA | AAA | +106 | foreground on background |
Aa | #FFFFFF | #000000 | 21.00 | AAA | AAA | -108 | background on foreground |
Aa | #000000 | #FFFEFE | 20.86 | AAA | AAA | +106 | foreground on background |
Aa | #FFFEFE | #000000 | 20.86 | AAA | AAA | -107 | background on foreground |
Aa | #000000 | #FDFDF8 | 20.58 | AAA | AAA | +105 | foreground on background |
Aa | #FDFDF8 | #000000 | 20.58 | AAA | AAA | -106 | background on foreground |
Aa | #111827 | #FFFFFF | 17.74 | AAA | AAA | +105 | foreground on background |
Aa | #FFFFFF | #111827 | 17.74 | AAA | AAA | -107 | background on foreground |
Aa | #111827 | #FFFEFE | 17.62 | AAA | AAA | +104 | foreground on background |
Aa | #FFFEFE | #111827 | 17.62 | AAA | AAA | -106 | background on foreground |
Image strategy
Asset loading & format policy.
Observable image posture — total count, lazy-loading ratio, and format mix. Hero image is measured above the fold.
Hero image
https://res.cloudinary.com/dmukukwp6/image/upload/c_scale,w_1401/keyboard_garden_light_opt_compressed_5094746caf- Format
- UNKNOWN
- Dimensions
- 1401×1400
- Loading
- auto
- srcset
- no
- Full Page
- developer-tools
- saas
- light
- 2026-06-23
Editorial credit
Featured Sponsor slot — your brand here
Dedicated logo placement — no rotation, on every export.
COMPARE THIS WITH
Side-by-side reads sharing this design signal.
See also


