@posthog/brand

@posthog/brand packages PostHog’s entire brand system — the logo, color palette, RoundHog typeface, hedgehog illustrations (“hoggies”), and team crests — as an installable npm package. Every asset ships bundled directly in the package (React components, raw SVG strings, PNG URLs, CSS custom properties, and woff2 font files), so consuming apps make zero runtime CDN calls to fetch brand imagery.

Assets are organized into subpath exports (@posthog/brand/logo, /colors, /fonts, /hoggies, /crests) so bundlers only pull in what’s actually imported. A daily GitHub Action syncs new illustrations from PostHog’s Figma brand-book file straight into the package and cuts an automated release, keeping the npm package in lockstep with the design source of truth.

What You Get

• A parametric <Logo> React component covering every lockup and color treatment (gradient, print/CMYK, mono, landscape/stacked)
• The brand color palette as a plain JS object (@posthog/brand/colors) or ready-made CSS custom properties (/colors/css)
• The RoundHog brand typeface bundled as woff2 files with a ready-to-inject @font-face CSS string
• Hedgehog illustration (‘hoggie’) and crest React components, each also available as raw SVG strings or bundled PNG URLs
• A React-free, image-free metadata API (findAssets, getAsset, getComponentName) for building an asset picker

Common Use Cases

• Embedding the PostHog logo correctly (right variant, right color) in partner integrations or marketing pages
• Pulling brand colors and the RoundHog font into a design system so PostHog-branded surfaces stay pixel-consistent
• Using hedgehog illustrations in changelogs, empty states, or onboarding flows without re-exporting assets from Figma by hand
• Building an internal asset picker or documentation site using the package’s metadata/search helpers

Under The Hood

Architecture — the package is organized as one subpath per asset kind (logo, colors, fonts, hoggies, crests), each with parallel React, raw-SVG, raw-PNG, and metadata-only export variants generated by the build; a top-level React-free/image-free entry point exposes only manifests and lookup helpers (allAssets, findAssets, getAsset) for consumers that just need metadata.

Tech Stack — TypeScript throughout, built with tsdown, tested with vitest; a daily GitHub Action calls the Figma API to render brand-book components to SVG/PNG, commits them into assets/ with a changeset, and triggers an automated npm release via OIDC trusted publishing gated behind Slack approval, while the color palette and <Logo> geometry are hand-maintained rather than Figma-synced.

Code Quality — the repo has a tests/ directory using Vitest and documents its own release pipeline and contribution constraints (assets mirror Figma, so most changes flow through design rather than PRs); being pre-1.0 and explicitly documented as such (“breaking changes released as minor bumps”), the project is upfront about API instability rather than hiding it.

API Design — every illustration component takes the same two props (size, title), and every asset is available in four equivalent forms (React component, SVG string, PNG URL, metadata) via a consistent subpath naming convention (@posthog/brand/<group>/svg/<slug>), which makes the API predictable across dozens of individual assets without needing per-asset documentation.