01 — Color

Color Palette

Cream canvas, olive ink, single yellow-orange CTA, plus a four-color pastel callout family for inline doc tips/warnings/info.

Brand & Accent

PostHog Yellow (primary)

#f7a501

Universal primary CTA pill — only saturated color

Yellow Pressed

#dd9001

Pressed primary state

Yellow Active

#b17816

Deeply-pressed yellow + gold border accent

Surface

Canvas

#eeefe9

Warm cream page background — most distinctive surface

Soft Surface

#e5e7e0

button-secondary fill, sub-nav strip, inline-code chip

Surface Card

#ffffff

True white card and tile background

Surface Doc

#fcfcfa

Faintly cream-warm white inside doc article body

Surface Dark

#23251d

Code-block background — same hex as ink

Hairline

#bfc1b7

1px card border, table rule, footer divider

Text

Ink

#23251d

Headlines, button text on light, primary nav links

Body

#4d4f46

Default paragraph text, doc article body

Charcoal

#33342d

Emphasized body text where body is too soft

Mute

#6c6e63

Metadata, footer link text

Ash

#9b9c92

Disabled-state text, lowest-emphasis utility

Stone

#b6b7af

Least-emphasis caption, disabled icons

Semantic — Callout Banners (doc-only)

Accent Blue Soft

#dceaf6

💡 Tip / Info callout banner background

Accent Green Soft

#d9eddf

✅ Success / Positive callout banner

Accent Red Soft

#f7d6d3

⚠️ Warning / Caution callout banner

Accent Purple Soft

#e7d8ee

📘 Note / Reference callout banner

Link Teal

#1078a3

Inline anchor link in body prose

Link Blue

#1d4ed8

Alt informational link color

02 — Typography

Typography Scale

IBM Plex Sans Variable across every text role with weights 400/500/600/700/800. Weight 800 is reserved for the largest display moments.

display-xlIBM Plex Sans
36px / 700 / lh 1.5
The new way to build products
display-lgIBM Plex Sans
24px / 800 / lh 1.33 / -0.6px
Section headline
heading-lgIBM Plex Sans
21px / 700 / lh 1.4 / -0.5px
Sub-section heading
heading-mdIBM Plex Sans
20px / 700 / lh 1.4
Card group title
heading-smIBM Plex Sans
18px / 700 / lh 1.5 / uppercase
UNDERSTAND PRODUCT USAGE
heading-sm-mixedIBM Plex Sans
18px / 600 / lh 1.56
Card title in mixed case
body-mdIBM Plex Sans
16px / 400 / lh 1.5
Default body copy at 16px regular weight with 1.5 line-height for comfortable reading.
body-strongIBM Plex Sans
16px / 600 / lh 1.5
Inline emphasis or primary nav link
body-smIBM Plex Sans
15px / 400 / lh 1.71
Doc article body text and marketing card description.
body-sm-strongIBM Plex Sans
15px / 600 / lh 1.71
Sub-section emphasis inside doc article
body-xsIBM Plex Sans
14px / 500 / lh 1.43
Doc sidebar item, metadata, in-list caption
caption-mdIBM Plex Sans
14px / 700 / lh 1.71
Card eyebrow, link cluster header
caption-xsIBM Plex Sans
12px / 600 / lh 1.33 / uppercase
Inline badge label
utility-xsIBM Plex Sans
12px / 700 / lh 1.33 / uppercase
Section eyebrow utility text
code-smIBM Plex Mono
14px / 400 / lh 1.43
posthog.capture('event_name')
code-xsSource Code Pro
14px / 500 / lh 1.43
inline code chip
button-mdIBM Plex Sans
14px / 700 / lh 1.5
Get started — free
button-smIBM Plex Sans
13px / 500 / lh 1
Compact pill chip

03 — Components

Button Variants

Yellow-orange primary, soft-cream secondary, transparent tertiary — the entire button vocabulary plus product-tab and pill-tab variants.

button-primary

bg primary · text on-primary · rounded 6px · 40px height

button-primary-pressed

bg primary-pressed · text on-primary

button-secondary

bg surface-soft · text ink · rounded 6px

button-tertiary

transparent · text ink

button-disabled

bg surface-soft · text ash

product-tab + product-tab-active

default: transparent · active: white card lift on cream

pill-tab + pill-tab-active

default: transparent + 1px hairline · active: ink fill + on-dark text

New Beta FEATURE FLAG

badge-promo + badge-uppercase

soft pill chip + transparent uppercase utility label

04 — Callouts & Code

Callout Banners & Code Blocks

Four-color pastel callout banner family used inside doc article body. Code blocks invert to deep olive-charcoal — the system's only "elevated" surface.

Code Block (Dark)

// Capture an event posthog.capture('event_name', { property: 'value', timestamp: new Date() });

Inline Code Chip

Use the posthog.identify() method to associate events with a known user. The distinct_id parameter accepts a unique user identifier.

05 — Cards

Card Examples

Marketing cards on cream, doc cards on warm-white, pricing tier cards with check-icon feature lists, and the signature hedgehog-mascot card.

Marketing & Doc Cards

Product analytics

Measure engagement, track conversion, and understand single sessions — based on a single source of truth.

Session replay

Watch real users interact with your product to debug issues and find friction points.

Getting started

Learn how to use product analytics to understand your users.

Pricing Tier Cards

Free

$0forever

  • No credit card required
  • 1M events per month free
  • Community support

Pay-as-you-go

$0+ usage

  • All free features
  • Usage-based pricing
  • Email support
  • Up to 90% off as you scale

Enterprise

Custom

  • All pay-as-you-go features
  • SSO & SAML
  • Dedicated support
  • SLA & custom contracts

Hedgehog Mascot Card

Hedgehog mascot card

Standard product card with a hand-drawn hedgehog character anchored in the right margin.

🦔

Engineering blog vibe

Hedgehogs in lab coats, terminals, and reading glasses scatter across pages as marginalia.

🦔

06 — Navigation

Sub-nav & Doc Sidebar

A 40px sub-nav strip carries section anchors on workflows / product pages; the doc sidebar carries 240px-wide rounded-icon section nav with an "Ask PostHog AI" search at top.

Sub-nav Strip

Overview Features Pricing Customers Get started →

Doc Sidebar

📊Product analytics
▶️Session replay
🚩Feature flags
🧪Experiments
📈Web analytics
📥Data warehouse

Product analytics

Learn how to use product analytics to understand your users. Build dashboards, run funnels, and find your most engaged customers.

07 — Forms

Form Elements

6px-radius rectangle inputs at 36px height. Focus relies on a 2px Accent Blue border + translucent blue outline halo.

surface-card bg · 1px hairline · rounded 6px · 36px height
2px accent-blue border + translucent halo
standard text-input with magnifier icon prefix
min-height 96px · resize vertical
button-primary · always full-width below stacked fields

08 — Layout

Spacing Scale

8px base. Section rhythm sits at 80px between major content blocks across every page.

xxs · 2
xs · 4
sm · 8
md · 12
lg · 16
xl · 24
xxl · 32
section · 80

09 — Shapes

Border Radius Scale

Most chrome lives at 4–6px. Pill (9999px) is reserved for the sticky nav CTA and pill chips.

none · 0

Sub-nav, footer, doc sidebar, primary nav

xs · 2

Inline code chip, micro-rule highlight

sm · 4

Inline buttons, micro chips

md · 6

Marketing cards, pricing cards, every standard CTA

lg · 8

Tab top corners, rare large containers

full · 9999

Sticky CTA pill, pill chips

10 — Depth

Elevation & Depth

No drop shadows. Cards sit flat on cream with thin olive borders. The dark code-block surface is the only "elevated" moment.

Level 0 — Flat
no border / no shadow
Level 1 — Hairline
1px solid #bfc1b7
Level 2 — Hairline Soft
1px solid #dcdfd2
Level 3 — Inverted Code
bg #23251d · the only elevated surface

11 — Responsive

Responsive Behavior

7 breakpoint zones with a documentation-aware collapse strategy. The doc sidebar promotes to a top accordion at tablet.

NameWidthKey Changes
ultrawide1920px+Content max-width 1280px; gutters grow to ~80px
desktop-large1440pxDefault — 4-up tiles, 240px doc sidebar
desktop1280pxSame with narrower gutters
desktop-small1024px4-up tiles → 3-up; doc sidebar visible
tablet768px3-up tiles → 2-up; doc sidebar accordion; nav hamburger
mobile480pxSingle-column; hero 36px → ~28px
mobile-narrow320pxSection padding tightens to 32px
320m-narrow
480mobile
768tablet
1024desktop-sm
1280desktop-lg

Touch Targets

Collapsing Strategy