A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
Posthog, in one page
PostHog's marketing system is built on the visual contradiction at the heart of the brand: a serious open-source product analytics platform rendered as if it were a friendly engineering sketchbook. The chrome runs on a warm cream canvas ({colors.canvas} — #eeefe9) — not white — and every page is dotted with hand-drawn hedgehog mascots in lab coats, lounge chairs, terminals, and reading glasses, scattered across the layout like marginalia in a textbook. Type sits in IBM Plex Sans Variable at olive-gray ({colors.body} — #4d4f46) for body and deep olive-charcoal ({colors.ink} — #23251d) for headlines, with weights stepped tightly between 400, 600, 700, and 800 to create hierarchy without color. The single saturated yellow-orange pill ({colors.primary} — #f7a501) is the brand's only loud chromatic moment; everything else is cream, olive, white card, and the occasional pastel callout band.
The system has a distinctive two-mode body layout: marketing pages (home, workflows, pricing) lean on alternating-pastel callout bands and feature tiles in white cards on cream, while documentation pages add a sticky 240px left sidebar with a rounded outline-icon section list. Code samples are full-width dark blocks on {colors.surface-dark} (the same olive-charcoal that carries body ink, used inverted) inside white doc cards, creating the system's most distinctive visual moment: a dark-on-dark code island floating inside a white card on a cream canvas, with a hedgehog mascot doodled in the margin.
Sections stack at {spacing.section} (80px) rhythm with cream canvas continuing edge-to-edge between them. The only color bands that interrupt the cream are pastel {component.banner-tip-blue} / -green / -red / -purple callout panels inside doc articles — soft tinted boxes that carry "💡 Tip", "✅ Success", "⚠️ Warning", "📘 Info" inline annotations. There are no decorative gradients, no atmospheric mesh backgrounds, and no full-bleed dark hero chapters; the cream canvas runs uninterrupted top to bottom and the hedgehogs are the entire visual identity.
Key Characteristics:
- Warm cream canvas (
{colors.canvas}— #eeefe9) end-to-end with no surface alternation between sections — the page is one continuous sheet - Single yellow-orange CTA pill (
{colors.primary}— #f7a501) with deep olive text ({colors.on-primary}) — the brand's only saturated color - IBM Plex Sans Variable across every text role with weights 400/500/600/700/800 — no other typeface in the system
- Hand-drawn hedgehog mascots scattered across the layout as the entire decorative system — no gradients, no mesh, no atmospheric backgrounds
- 4–8px radius card vocabulary:
{rounded.md}(6px) for most components,{rounded.lg}(8px) for select containers, fully rounded for pill chips - Pastel callout banners (
{colors.accent-blue-soft},{colors.accent-green-soft},{colors.accent-red-soft},{colors.accent-purple-soft}) break up doc article body with soft tinted side rails for tips/warnings/info - Documentation pages add a sticky 240px
{component.doc-sidebar}with rounded outline-icon section nav and an "Ask PostHog AI" CTA at the top
Do's and don'ts
Do
- Use
{colors.canvas}(cream —#eeefe9) as the page body. Never substitute pure white as the canvas. - Reserve
{colors.primary}(yellow-orange) for the primary CTA pill only. The "Get started — free" treatment is the brand's anchor. - Render the brand wordmark with the hedgehog illustration alongside it, not as a stand-alone wordmark. The hedgehog IS the brand identity.
- Use IBM Plex Sans Variable across every text role — body 400, emphasis 600/700, display 800.
- Stack content sections at
{spacing.section}(80px) rhythm with no decorative dividers between them; let the cream canvas continue uninterrupted. - Use
{component.banner-tip-blue}/-green/-red/-purpleonly inside doc article body for tip/warning/note panels — keep marketing chrome out of the four-color callout family. - Pair every code sample with the dark
{component.code-block}surface; inline<code>chips use{component.inline-code}(cream surface-soft chip). - Anchor a hedgehog mascot illustration in feature tile margins on home and workflows pages — the system's signature decoration.
Don't
- Don't introduce drop shadows on cards. Cards sit flat on cream with thin olive borders only.
- Don't add a second saturated chromatic CTA. Yellow-orange is the only loud color in the system.
- Don't replace the cream canvas with pure white or full-bleed dark hero bands. The cream is the brand.
- Don't use the four-color callout banner pastels (
{colors.accent-blue-soft},-green,-red,-purple) as marketing-card backgrounds. They belong to inline doc content only. - Don't substitute the hedgehog illustration with a generic icon set. The character system is the brand.
- Don't use uppercase transform outside of
{typography.heading-sm},{typography.utility-xs}, and{typography.caption-xs}. Uppercase is reserved for eyebrows and footer category headers. - Don't pad cards with 32px+ on all sides except for
{component.pricing-tier-card}. Standard cards sit at 24px internal padding.
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Posthog design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- primary: #f7a501
- primary-pressed: #dd9001
- primary-active: #b17816
- on-primary: #23251d
- ink: #23251d
- body: #4d4f46
- charcoal: #33342d
- mute: #6c6e63
- ash: #9b9c92
- stone: #b6b7af
Type:
- families: IBM Plex Sans Variable, ui-monospace, Source Code Pro, IBM Plex Sans
- scale: 12, 13, 14, 15, 16, 18, 20, 21, 24
- weights: 400, 500, 600, 700, 800
Shape:
- radius: 0, 2, 4, 6, 8
Spacing: 2, 4, 6, 8, 12, 16, 24, 32, 80
Rules:
- Use `{colors.canvas}` (cream — `#eeefe9`) as the page body. Never substitute pure white as the canvas.
- Reserve `{colors.primary}` (yellow-orange) for the primary CTA pill only. The "Get started — free" treatment is the brand's anchor.
- Render the brand wordmark with the hedgehog illustration alongside it, not as a stand-alone wordmark. The hedgehog IS the brand identity.
- Use IBM Plex Sans Variable across every text role — body 400, emphasis 600/700, display 800.
- Stack content sections at `{spacing.section}` (80px) rhythm with no decorative dividers between them; let the cream canvas continue uninterrupted.
- Use `{component.banner-tip-blue}` / `-green` / `-red` / `-purple` only inside doc article body for tip/warning/note panels — keep marketing chrome out of the fo…
Avoid:
- Don't introduce drop shadows on cards. Cards sit flat on cream with thin olive borders only.
- Don't add a second saturated chromatic CTA. Yellow-orange is the only loud color in the system.
- Don't replace the cream canvas with pure white or full-bleed dark hero bands. The cream is the brand.
- Don't use the four-color callout banner pastels (`{colors.accent-blue-soft}`, `-green`, `-red`, `-purple`) as marketing-card backgrounds. They belong to inline…
- Don't substitute the hedgehog illustration with a generic icon set. The character system is the brand.
- Don't use uppercase transform outside of `{typography.heading-sm}`, `{typography.utility-xs}`, and `{typography.caption-xs}`. Uppercase is reserved for eyebrows…
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Source pages:
/(home),/pricing(pricing detail),/docs/product-analytics(docs article),/workflows(product feature page). The chrome palette is identical across all four pages — only doc-specific accents (callout-banner pastels, code-block dark surface) appear exclusively inside the docs experience.
Brand & Accent
- PostHog Yellow (
{colors.primary}—#f7a501): the universal primary CTA. Sticky "Get started — free" pill in the top-right of every nav, hero CTAs, pricing-tier subscribe buttons, footer signup pill. The system's only saturated chromatic moment. - Yellow Pressed (
{colors.primary-pressed}—#dd9001): pressed state for the primary pill. - Yellow Active (
{colors.primary-active}—#b17816): deeply-pressed yellow + the system's gold-toned border accent (rare 1px gold rule on inline form elements).
Surface
- Canvas (
{colors.canvas}—#eeefe9): the warm cream page background. End-to-end on every page; the brand's most distinctive surface choice. - Soft Surface (
{colors.surface-soft}—#e5e7e0): button-secondary fill, sub-nav strip background, inline-code chip background. - Surface Card (
{colors.surface-card}—#ffffff): true white card and tile background sitting on top of the cream canvas. The dominant card surface. - Surface Doc (
{colors.surface-doc}—#fcfcfa): a faintly cream-warm white used inside doc article body cards — slightly softer than pure white to keep the page tonally unified. - Surface Dark (
{colors.surface-dark}—#23251d): the deep olive-charcoal used inverted as code-block background. The same hex as{colors.ink}— the brand uses one olive-near-black for both text and dark code surfaces. - Hairline (
{colors.hairline}—#bfc1b7): 1px card border, table rule, footer column dividers. - Hairline Soft (
{colors.hairline-soft}—#dcdfd2): in-card row divider, soft inset rule. - On Dark (
{colors.on-dark}—#ffffff): primary text on{colors.surface-dark}code blocks.
Text
- Ink (
{colors.ink}—#23251d): headlines, button text on light, primary nav links — deep olive-charcoal that reads near-black against cream. - Body (
{colors.body}—#4d4f46): default paragraph text, doc article body, inline link color before hover. The brand's most-used text color. - Charcoal (
{colors.charcoal}—#33342d): emphasized body text where body is too soft. - Mute (
{colors.mute}—#6c6e63): metadata, footer link text, in-list secondary annotations. - Ash (
{colors.ash}—#9b9c92): disabled-state text and lowest-emphasis utility. - Stone (
{colors.stone}—#b6b7af): least-emphasis caption text and disabled icon color.
Semantic
- Link Blue (
{colors.link-blue}—#1d4ed8): inline anchor link inside body prose. The system's primary informational link color. - Link Teal (
{colors.link-teal}—#1078a3): doc-article inline link variant, paired with body text. - Accent Blue (
{colors.accent-blue}—#2c84e0) + Accent Blue Soft ({colors.accent-blue-soft}—#dceaf6): "💡 Tip / Info" callout banner inside docs. - Accent Red (
{colors.accent-red}—#cd4239) + Accent Red Soft ({colors.accent-red-soft}—#f7d6d3): "⚠️ Warning / Caution" callout banner. - Accent Green (
{colors.accent-green}—#2c8c66) + Accent Green Soft ({colors.accent-green-soft}—#d9eddf): "✅ Success / Positive" callout banner. - Accent Purple (
{colors.accent-purple}—#7c44a6) + Accent Purple Soft ({colors.accent-purple-soft}—#e7d8ee): "📘 Note / Reference" callout banner. - Focus Ring (
{colors.focus-ring}—rgba(59,130,246,0.5)): translucent blue browser-default focus ring around interactive elements.
Type scaleRead the full spec
Font Family
IBM Plex Sans Variable is the system's primary face — used across every text role on every page at weights 400 (regular), 500 (medium), 600 (semibold), 700 (bold), and 800 (extra-bold). Falls back through IBM Plex Sans → -apple-system → system-ui → broad cross-platform sans stack.
ui-monospace + Source Code Pro carry code samples and inline-code chips at 14px / 1.43 line-height. Source Code Pro is the explicit display monospace; ui-monospace handles inline <code> chips.
The brand-distinctive choice is the mixed weight ladder (400 / 500 / 600 / 700 / 800) — most chrome lives in the 400–700 band, with weight 800 reserved exclusively for the larger display headlines on home and pricing. This gives the system its "engineering blog" feel: hierarchy is built from weight contrast much more than from size.
Hierarchy
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
{typography.display-xl} | 36px | 700 | 1.5 | 0 | Hero headline ("The new way to build products") |
{typography.display-lg} | 24px | 800 | 1.33 | -0.6px | Section headline, pricing tier name |
{typography.heading-lg} | 21px | 700 | 1.4 | -0.5px | Sub-section heading, doc-article H2 |
{typography.heading-md} | 20px | 700 | 1.4 | 0 | Card group title, in-grid heading |
{typography.heading-sm} | 18px | 700 | 1.5 | 0 (uppercase) | Section eyebrow ("UNDERSTAND PRODUCT USAGE") |
{typography.heading-sm-mixed} | 18px | 600 | 1.56 | 0 | Card title in mixed-case (no uppercase transform) |
{typography.body-md} | 16px | 400 | 1.5 | 0 | Body copy, default paragraph |
{typography.body-strong} | 16px | 600 | 1.5 | 0 | Inline emphasis, primary nav link, in-card label |
{typography.body-sm} | 15px | 400 | 1.71 | 0 | Doc article body, marketing card description |
{typography.body-sm-strong} | 15px | 600 | 1.71 | 0 | Sub-section emphasis inside doc article |
{typography.body-xs} | 14px | 500 | 1.43 | 0 | Doc sidebar item, metadata, in-list caption |
{typography.caption-md} | 14px | 700 | 1.71 | 0 | Card eyebrow, link cluster header |
{typography.caption-sm} | 13px | 500 | 1.5 | 0 | Compact metadata caption |
{typography.caption-xs} | 12px | 600 | 1.33 | 0 (uppercase) | Inline badge label |
{typography.utility-xs} | 12px | 700 | 1.33 | 0 (uppercase) | Section-eyebrow utility text, footer category header |
{typography.link-md} | 16px | 400 | 1.5 | 0 | Inline body anchor link |
{typography.button-md} | 14px | 700 | 1.5 | 0 | Standard primary/secondary button label |
{typography.button-sm} | 13px | 500 | 1 | 0 | Pill chip / compact CTA |
{typography.code-sm} | 14px | 400 | 1.43 | 0 | Code block content |
{typography.code-xs} | 14px | 500 | 1.43 | 0 | Inline code chip |
Principles
The hierarchy is explicitly built from weight + size + occasional uppercase transform — there is no italic style, no decorative display variant, no proprietary face. The biggest display moments use weight 800 with -0.6px tracking, and the body settles at 400 with 1.5 line-height; everything else fills the band between. Section eyebrows ({typography.heading-sm} and {typography.utility-xs}) consistently render uppercase, which gives the doc layout its textbook-chapter feel.
Note on Font Substitutes
IBM Plex Sans Variable is open-source and Google-Fonts-hosted. There is no need for a substitute — load it directly. If a substitute is genuinely needed, Inter is the closest geometric match at all five weights; pair with Inter's letter-spacing -0.5 to -0.6px on display sizes to approximate Plex's display tracking. For monospace, JetBrains Mono is a near-perfect substitute for Source Code Pro at body sizes.
Components and layoutRead the full spec
No hover states documented per system policy. Each spec covers Default and Active/Pressed only.
Buttons
button-primary — the universal PostHog CTA
- Background
{colors.primary}(yellow-orange), text{colors.on-primary}(deep olive), type{typography.button-md}, padding8px 16px, height40px, rounded{rounded.md}. - Used for "Get started — free" (sticky top-nav CTA), "Sign up", "Try it free", "Subscribe" — every primary action.
- Pressed state lives in
button-primary-pressed— background drops to{colors.primary-pressed}.
button-secondary — soft alternative on cream canvas
- Background
{colors.surface-soft}(#e5e7e0), text{colors.ink}, type{typography.button-md}, padding8px 16px, height40px, rounded{rounded.md}. - "Talk to sales", "Read docs", "Watch demo" — second-tier actions paired with the yellow primary.
button-tertiary — ghost text button
- Background transparent, text
{colors.ink}, type{typography.button-md}, padding8px 12px, rounded{rounded.md}. - Lowest-emphasis action: "See all docs →", "Browse all features".
button-disabled
- Background
{colors.surface-soft}, text{colors.ash}— flat soft cream-gray.
Tabs & Chips
product-tab + product-tab-active — major product section tabs
- Default: transparent background, text
{colors.body}, type{typography.body-strong}, padding8px 12px, rounded{rounded.md}. - Active: background flips to
{colors.surface-card}(white), text{colors.ink}— the tab card lifts off the cream canvas as the visual signal of selection.
pill-tab + pill-tab-active — compact filter pill
- Default: transparent background, text
{colors.body}, type{typography.button-sm}, padding6px 14px, rounded{rounded.full}. - Active: background flips to
{colors.ink}, text{colors.on-dark}— the chip flips fully inverted on selection.
badge-uppercase — text-only utility label
- Background transparent, text
{colors.body}in{typography.utility-xs}(uppercase) — used as in-list category prefix ("FEATURE FLAG", "EXPERIMENT", "HEATMAP").
badge-promo — small inline pill chip
- Background
{colors.accent-blue-soft}, text{colors.link-blue}, type{typography.caption-xs}, padding2px 8px, rounded{rounded.full}. - "New", "Beta", "Coming soon" pill labels overlaid on cards.
Inputs & Forms
text-input + text-input-focused
- Default: background
{colors.surface-card}, text{colors.ink}, 1px solid{colors.hairline}, type{typography.body-md}, padding8px 12px, height36px, rounded{rounded.md}. - Focused: same surface; 2px solid
{colors.accent-blue}border replaces the 1px hairline + a translucent{colors.focus-ring}outline.
search-input — utility search field (doc sidebar, "Ask PostHog AI")
- Same dimensions as
text-inputwith a magnifier glyph at the left edge in{colors.mute}.
Cards & Containers
product-card — marketing tile / feature card
- Container: background
{colors.surface-card}(white), 1px solid{colors.hairline}, padding{spacing.xl}(24px), rounded{rounded.md}. - Layout: small hedgehog illustration at top-left,
{typography.heading-sm-mixed}title,{typography.body-sm}description, optional{component.button-tertiary}"Learn more →" link.
doc-card — doc article body card
- Container: background
{colors.surface-doc}(#fcfcfawarm-white), 1px solid{colors.hairline}, padding{spacing.xl}(24px), rounded{rounded.md}. - Carries article body sections, code blocks, callout banners, and tables inside doc pages.
feature-tile — small marketing feature tile
- Container: background
{colors.surface-card}, 1px solid{colors.hairline}, padding{spacing.lg}(20px), rounded{rounded.md}. - Used in 3-up or 4-up grids on home and workflows pages — paired with a small icon and a 1-line description.
pricing-tier-card — pricing plan card
- Container: background
{colors.surface-card}, 1px solid{colors.hairline}, padding{spacing.xxl}(32px), rounded{rounded.md}. - Layout: tier name in
{typography.display-lg}(24px / 800 / -0.6px), large price + period, feature checklist with check-icon bullets, primary or secondary CTA at bottom.
hedgehog-mascot-card — feature card with margin-anchored hedgehog
- Same chrome as
{component.product-card}but with a hand-drawn hedgehog illustration anchored in the right margin or top-right corner — the brand's signature card variant.
Callout Banners
banner-tip-blue + banner-tip-green + banner-tip-red + banner-tip-purple
Responsive behaviourRead the full spec
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| ultrawide | 1920px+ | Content max-width holds at 1280px; outer gutters grow to ~80px |
| desktop-large | 1440px | Default — 4-up feature tile grid, 240px sticky doc sidebar visible |
| desktop | 1280px | Same layout with narrower outer gutters |
| desktop-small | 1024px | 4-up tiles collapse to 3-up; doc sidebar remains visible |
| tablet | 768px | 3-up tiles collapse to 2-up; doc sidebar collapses into a top accordion; primary nav becomes hamburger |
| mobile | 480px | Single-column everything; hero {typography.display-xl} scales 36px → ~28px |
| mobile-narrow | 320px | Section padding tightens to 32px |
Touch Targets
All interactive elements meet WCAG AA (≥ 40×40px). {component.button-primary} and {component.button-secondary} sit at 40px height with 16px padding. {component.text-input} sits at 36px (just under AAA but above AA at this size). {component.pill-tab} is ~32–36px height with 14px padding extending to ~44px tappable via inline padding. Doc-sidebar items use 14px text with ~32px line-height + 6px vertical padding for ~44px tap rows.
Collapsing Strategy
- Primary nav: desktop horizontal cluster → tablet hamburger drawer at 768px. The yellow "Get started — free" CTA stays visible at every breakpoint.
- Sub-nav strip: desktop horizontal anchor row → tablet horizontal scroll → mobile select dropdown.
- Marketing card grid: 4-up → 3-up → 2-up → 1-up at 1024, 768, and 480px; gutters drop from 16px to 12px on mobile.
- Pricing grid: 3-up → 2+1 → 1-up stacked at tablet and below.
- Doc layout: desktop 240px sidebar + 720px article → tablet sidebar collapses to a top accordion → mobile fully collapsed accordion.
- Footer: 6-up link columns → 3-up at tablet → 2-up at mobile.
- Section padding:
{spacing.section}(80px) desktop → 64px tablet → 48px mobile. - Hero headline:
{typography.display-xl}(36px) at desktop, scaling to ~28px at mobile, line-height holding at 1.5.
Image Behavior
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-posthog {--page-bg: #eeefe9;
--page-bg-gradient: none;
--text-color: #23251d;
--heading-color: #23251d;
--link-color: #936201;
--link-hover-color: #604001;
--border-color: #c9cbc4;
--card-bg: #eeefe9;
--card-shadow: 0 1px 2px rgba(35,37,29,0.06);
--card-hover-shadow: 0 6px 18px rgba(35,37,29,0.12);
--header-bg: #23251d;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #eeefe9;
--footer-text-color: #6a6c64;
--button-bg: #f7a501;
--button-text-color: #23251d;
--button-hover-bg: #c48301;
--button-border: none;
--button-border-radius: 4px;
--button-secondary-bg: #e2e3dd;
--button-secondary-text-color: #23251d;
--button-secondary-hover-bg: #d6d7d1;
--button-secondary-border: 1px solid #c9cbc4;
--prompt-bg: #e4e5df;
--prompt-text-color: #23251d;
--base-font: var(--font-helvetica);
--heading-font: var(--font-mono);
--card-border-radius: 4px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- bandainamco 73.4%
- nintendo 2001 72.9%
- mydealz 72.6%
- notion 72.6%
- ollama 72.3%
Where this came from
- Source document
volt/design-md/posthog/DESIGN.md· 39.2 KB- Repository
- VoltAgent/awesome-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.