name: posthog-design
version: alpha
description: >
  PostHog is a deliberately anti-SaaS, retro desktop-OS aesthetic: a warm off-white
  paper canvas (#eeefe9) wrapped in an orange frame, populated with skeuomorphic file
  icons, window chrome (title bar + traffic lights), and hand-drawn hedgehog
  illustrations. The brand voltage is a hot orange-red (#f54e00) backed by a primary
  blue (#1d4aff) and an amber CTA (#f9bd2b) — the three logo-stripe colors. Type is
  IBM Plex Sans set heavy (800 headings, tight tracking). Shapes are tight (4–6px) and
  buttons are "physical" with hard 1.5px borders. Signature moves: the desktop metaphor,
  hand-drawn hedgehogs, and unapologetically playful, self-aware copy.
colors:
  # Brand (the logo stripes)
  primary: '#f54e00'          # PostHog orange-red — accents, links, swiper, squeak button
  on-primary: '#ffffff'
  blue: '#1d4aff'             # PostHog blue (2nd logo stripe / swiper theme #007aff)
  cta: '#f9bd2b'              # amber — "Get started" buttons (with darker border)
  cta-border: '#b17816'
  on-cta: '#23251d'
  # Surface (warm paper)
  surface: '#eeefe9'          # page canvas (warm off-white)
  surface-card: '#ffffff'     # window/editor panels
  frame: '#f54e00'            # the orange border wrapping the whole page
  # Text
  on-surface: '#111827'       # near-black headings (gray-900)
  on-surface-body: '#374151'  # body copy (gray-700)
  on-surface-strong: '#23251d'# button label ink
  # Hairlines / borders
  border-strong: '#111111'    # hard 1.5px skeuomorphic button/border lines
  hairline: 'rgba(0,0,0,0.1)'
  # Semantic
  red: '#f54e00'
  yellow: '#dc9300'
typography:
  display:
    fontFamily: '"IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, sans-serif'
    fontSize: 24px            # h1 on cards
    fontWeight: 800
    lineHeight: 32px
    letterSpacing: -0.6px
  headline-md:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 21.4px
    fontWeight: 700
    lineHeight: 30px
    letterSpacing: -0.54px
  headline-sm:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 19.3px
    fontWeight: 600
    lineHeight: 30px
    letterSpacing: -0.48px
  body-md:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  body-sm:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 15px
    fontWeight: 400
    lineHeight: 22.5px
  label:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 13px
    fontWeight: 500
    lineHeight: 13px
rounded:
  sm: 4px     # buttons
  md: 6px     # primary CTA / badges
  lg: 8px     # cards / windows
spacing:       # base unit 4px; viewport padding 25px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 25px     # --viewport-padding
  xl: 48px
components:
  button-cta:                 # "Get started - free"
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    borderColor: '{colors.cta-border}'
    borderWidth: '1.5px'
    typography: '{typography.label}'
    rounded: '{rounded.md}'
    padding: '8px 14px'
  button-secondary:           # "Install with AI"
    backgroundColor: '{colors.surface-card}'
    textColor: '{colors.on-surface-strong}'
    borderColor: '{colors.border-strong}'
    borderWidth: '1.5px'
    rounded: '{rounded.md}'
  window:                     # the home.mdx editor / app windows
    backgroundColor: '{colors.surface-card}'
    borderColor: '{colors.border-strong}'
    borderWidth: '1.5px'
    rounded: '{rounded.lg}'
    chrome: 'title bar + traffic-light controls'
  card:
    backgroundColor: '{colors.surface-card}'
    rounded: '{rounded.lg}'
    borderColor: '{colors.hairline}'
  tab-active:                 # "Debug & fix issues" tab
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
motion:
  easing-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  duration-standard: 300ms
icons:
  style: hand-drawn + outline
  sizes: { sm: 16px, md: 20px, lg: 24px }
  color: '{colors.on-surface}'

PostHog

posthog-design · alpha

Overview

PostHog runs a deliberately anti-SaaS, retro desktop-OS aesthetic. The canvas is a warm off-white "paper" (#eeefe9) framed by a thick orange border around the entire page, and the homepage is staged like an operating system: file icons down the sides ("home.mdx", "Product OS", "customers.mdx", "demo.mov", a Trash can), a window with a title bar and traffic-light controls, and hand-drawn hedgehog illustrations living in a garden scene. The brand voltage is a hot orange-red #f54e00 (links, active tabs, accents), backed by a primary blue #1d4aff and an amber CTA #f9bd2b — the three colors of the striped hedgehog logo. Type is IBM Plex Sans set heavy (800 headings with tight negative tracking) for a confident, slightly technical voice. Shapes are tight (4–6px) and buttons are "physical" — solid fills with hard 1.5px borders. The whole thing is playful, self-aware, and proudly weird, with witty copy ("Legally-required cookie banner").

Colors

Brand — primary #f54e00 (PostHog orange-red) is the accent: links, the active tab fill ("Debug & fix issues"), the Squeak chat button, swiper dots. blue #1d4aff is the second brand color (in-app swiper theme reads #007aff). The amber cta #f9bd2b fills the "Get started" buttons, always with a darker cta-border #b17816 outline.

Surface — the page is warm paper #eeefe9; windows, editors, and cards sit on white #ffffff; the entire viewport is wrapped in an orange frame #f54e00.

Text — headings in near-black on-surface #111827; body copy in #374151; button ink in a warm near-black #23251d.

Borders — the signature is a hard ~1.5px near-black border on buttons and window chrome (the skeuomorphic, pressable look); softer rgba(0,0,0,0.1) hairlines elsewhere.

Typography

Family: IBM Plex Sans (Variable), fallback -apple-system, system-ui, sans-serif — open-source, so use as-is. The weight strategy is bold: 800 for H1, 700/600 for sub-heads, all with tight negative tracking (−0.5 to −0.6px); body stays 400.

Token	Size	Weight	Line-height	Tracking	Usage
display	24px	800	32px	−0.6px	Card H1 ("The new way to build products")
headline-md	21.4px	700	30px	−0.54px	Section heads
headline-sm	19.3px	600	30px	−0.48px	Sub-heads
body-md	16px	400	24px	0	Body / nav
body-sm	15px	400	22.5px	0	Supporting copy
label	13px	500	13px	0	Button labels, tabs

Layout

Base unit 4px; the whole page sits inside a 25px viewport padding orange frame. The homepage layout is a literal desktop scene: a centered "window" (the home.mdx editor with toolbar) over a hand-illustrated background, file icons anchored to the left and right edges, and a floating cookie-banner card. Below, content uses tabbed panels and generous whitespace. Built on Tailwind utility classes.

Elevation & Depth

Depth is skeuomorphic, not soft: window chrome, hard 1.5px borders, and faux-OS framing carry the sense of layered "applications." Real CSS shadows are minimal — the illusion of depth comes from the desktop metaphor (overlapping windows, file icons, title bars) and the orange page frame.

Shapes

Tight radii: 4px buttons, 6px primary CTA/badges, 8px windows and cards. The geometry is crisp and utilitarian — closer to an old desktop UI than a rounded modern SaaS. No large friendly radii.

Components

• button-cta — amber #f9bd2b fill, dark ink, 1.5px darker-amber border, 6px radius ("Get started - free").
• button-secondary — white fill, 1.5px near-black border ("Install with AI").
• window — white panel with a title bar + traffic-light controls and a toolbar (the home.mdx editor, app screenshots) — the core brand device.
• tab — active tab fills brand orange with white text; inactive tabs are plain.
• card — white, 8px radius, hairline border (cookie banner, feature cards).
• file icons — hand-illustrated desktop icons with labels (home.mdx, Trash, etc.).

Motion

Standard ~300ms ease. Carousels (swiper) advance with orange pagination dots. The personality is playful but motion is restrained — the delight is carried by illustration and copy, not heavy animation. Hover states brighten/shift the hard-bordered buttons.

Iconography

A mix of hand-drawn illustration (the hedgehog "Max", garden scenes, desktop file icons) and simple outline UI glyphs at 16/20/24px. The striped hedgehog logo (blue/red/orange) is the brand mark. Illustrations are central to the identity — they are not decorative afterthoughts.

Do's and Don'ts

• Do keep the warm paper canvas #eeefe9 and the orange page frame.
• Do use orange #f54e00 for accents/active states and amber #f9bd2b for CTAs (with darker border).
• Do set headings in heavy IBM Plex Sans (800) with tight negative tracking.
• Do lean into the desktop-OS metaphor — windows, title bars, file icons, hand-drawn hedgehogs.
• Do give buttons hard ~1.5px borders for the "physical" feel.
• Don't flatten into a generic clean SaaS look — the retro, playful weirdness is the brand.
• Don't use soft pastel surfaces or large rounded corners.
• Don't drop the illustration layer; copy and hedgehogs carry the personality.

Known Gaps

• Most styling is Tailwind utilities, so :root exposed few brand tokens (orange #f54e00 / blue #007aff confirmed via swiper/squeak vars; remaining brand hexes — #1d4aff, #f9bd2b — are PostHog's known palette and the observed amber CTA). Heading sizes are computed (responsive). IBM Plex Sans is open-source.