posthog
A playful developer-tools system rendered on a warm cream canvas with hand-drawn hedgehog mascots dotted across every page like marginalia in a sketchbook. The chrome reads like a friendly engineering blog: olive-gray ink (#4d4f46) for body, deep olive-charcoal (#23251d) for head
colors
#f7a501 #dd9001 #b17816 #23251d typography
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog — body text at reading size.
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog
design.md source
---
version: alpha
name: PostHog-design-analysis
description: |
A playful developer-tools system rendered on a warm cream canvas with hand-drawn hedgehog mascots dotted across every page like marginalia in a sketchbook. The chrome reads like a friendly engineering blog: olive-gray ink (#4d4f46) for body, deep olive-charcoal (#23251d) for headlines, IBM Plex Sans Variable typography in tight 1.43-line-height paragraphs, and a single saturated yellow-orange CTA pill (#f7a501) carrying every primary action. The system actively rejects the genre's typical somber dark-tech aesthetic in favor of a creamy, textbook-illustration sensibility — bordered cards stack on the cream canvas with 4–6px radii, doc sidebars use rounded outline-icon mini-illustrations, and the home page leans on cartoon characters (hedgehogs in lab coats, hedgehogs at terminals, hedgehogs in lounge chairs) as its signature decoration. Code samples and product analytics charts live inside white-on-cream cards with thin olive borders; the contrast between the playful illustration and the data-dense product imagery is the brand's signature voice.
colors:
primary: "#f7a501"
primary-pressed: "#dd9001"
primary-active: "#b17816"
on-primary: "#23251d"
ink: "#23251d"
body: "#4d4f46"
charcoal: "#33342d"
mute: "#6c6e63"
ash: "#9b9c92"
stone: "#b6b7af"
hairline: "#bfc1b7"
hairline-soft: "#dcdfd2"
on-dark: "#ffffff"
canvas: "#eeefe9"
surface-soft: "#e5e7e0"
surface-card: "#ffffff"
surface-doc: "#fcfcfa"
surface-dark: "#23251d"
link-blue: "#1d4ed8"
link-teal: "#1078a3"
accent-blue: "#2c84e0"
accent-blue-soft: "#dceaf6"
accent-red: "#cd4239"
accent-red-soft: "#f7d6d3"
accent-green: "#2c8c66"
accent-green-soft: "#d9eddf"
accent-purple: "#7c44a6"
accent-purple-soft: "#e7d8ee"
focus-ring: "rgba(59,130,246,0.5)"
typography:
display-xl:
fontFamily: IBM Plex Sans Variable
fontSize: 36px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0
display-lg:
fontFamily: IBM Plex Sans Variable
fontSize: 24px
fontWeight: 800
lineHeight: 1.33
letterSpacing: -0.6px
heading-lg:
fontFamily: IBM Plex Sans Variable
fontSize: 21px
fontWeight: 700
lineHeight: 1.4
letterSpacing: -0.5px
heading-md:
fontFamily: IBM Plex Sans Variable
fontSize: 20px
fontWeight: 700
lineHeight: 1.4
letterSpacing: 0
heading-sm:
fontFamily: IBM Plex Sans Variable
fontSize: 18px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0
textTransform: uppercase
heading-sm-mixed:
fontFamily: IBM Plex Sans Variable
fontSize: 18px
fontWeight: 600
lineHeight: 1.56
letterSpacing: 0
body-md:
fontFamily: IBM Plex Sans Variable
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
… components
display headline
body copy from posthog tokens — the default reading size for paragraphs and ui descriptions.
feature headline
a sample card surface with heading and body copy styled from component tokens.
what is in this design system?
colors, typography, spacing, and component patterns sourced from publicly visible brand tokens.
const theme = {
primary: "#f7a501",
font: ""IBM Plex Sans Variable", system-ui, sans-serif",
};extracted from publicly visible design tokens. sourced via VoltAgent/awesome-design-md. no ownership claim on posthog's visual identity.