# PostHog Brand

> The PostHog logo, the RoundHog typeface, brand colors, 160+ hedgehog illustrations and the team crests. Download them or install the @posthog/brand React package.

HTML version: https://brand.posthog.com/ · All docs for agents: https://brand.posthog.com/llms.txt

This site is the home of PostHog's brand assets: 22 logo files, the RoundHog typeface, 12 brand colors, 154 hedgehog illustrations ("hoggies") and 59 team crests.

## Two ways to get any asset

**1. In a JavaScript or TypeScript project, use the npm package.** It's the easiest route. `@posthog/brand` bundles every asset on this site as typed, tree-shakeable imports: React components, raw SVG strings and PNG URLs. It works offline without a CDN or an API key, and it won't break the way a hotlinked file can.

```sh
npm install @posthog/brand   # or: pnpm add / yarn add / bun add @posthog/brand
```

```tsx
import { Logo } from "@posthog/brand/logo"
import { HedgehogChart } from "@posthog/brand/hoggies"            // React component
import hedgehogChartSvg from "@posthog/brand/hoggies/svg/chart"   // SVG markup string, no React
import hedgehogChartPng from "@posthog/brand/hoggies/png/chart"   // PNG URL, resolved by your bundler
import { MarketingCrest } from "@posthog/brand/crests"
import { colors } from "@posthog/brand/colors"
import { findAssets } from "@posthog/brand"                       // search the catalog in code

<Logo />
<HedgehogChart size={96} />
<MarketingCrest size={64} />   <MarketingCrest.Mini size={24} />
```

**2. Anywhere else (slides, docs, a design tool, another language), download the file.** Every asset is a static file at a stable URL with CORS enabled, and you don't need auth or an API key to fetch it. Prefer the SVG, since it scales without losing quality. Use the PNG where SVG isn't accepted.

| Asset                            | SVG                                   | PNG                                               |
| -------------------------------- | ------------------------------------- | ------------------------------------------------- |
| Hoggie                           | https://brand.posthog.com/hoggies/{slug}.svg           | https://brand.posthog.com/hoggies/{slug}.png (about 1000 px)       |
| Hoggie variant (numbered family) | https://brand.posthog.com/hoggies/{slug}-{variant}.svg | https://brand.posthog.com/hoggies/{slug}-{variant}.png             |
| Crest                            | https://brand.posthog.com/crests/{slug}.svg            | https://brand.posthog.com/crests/{slug}.png (600 px)               |
| Crest mini badge                 | https://brand.posthog.com/crests/{slug}-mini.svg       | https://brand.posthog.com/crests/{slug}-mini.png                   |
| Logo                             | https://brand.posthog.com/logo/{id}.svg                | https://brand.posthog.com/logo/{id}.png (1600 px on the long side) |

```sh
curl -O https://brand.posthog.com/hoggies/chart.svg
curl -O https://brand.posthog.com/logo/posthog-logo.png
```

Slugs, ids and exact PNG sizes are in the lists below and in the machine-readable catalog, https://brand.posthog.com/catalog.json.

## Sections

- [Logo](https://brand.posthog.com/logo.md): Every PostHog logo lockup from one React component: landscape, stacked, logomark and wordmark, in gradient, 4-color print or mono. Click the logomark and it jumps.
- [Fonts](https://brand.posthog.com/fonts.md): PostHog's brand typeface, bundled as eight woff2 faces (Regular, Medium, SemiBold and Bold, upright and italic) with the @font-face CSS to load them offline.
- [Colors](https://brand.posthog.com/colors.md): PostHog's brand colors, with hex values for each core, lighter and darker tone and its gradient. Click to copy, or use them as CSS custom properties and typed JS tokens.
- [Crests](https://brand.posthog.com/crests.md): All of PostHog's team crests, each as a full illustration and a mini badge. Import them from @posthog/brand as React components, SVG strings or PNGs.
- [Hoggies](https://brand.posthog.com/hoggies.md): Search 160+ PostHog hedgehog illustrations (we call them hoggies) and copy the import for any of them. Each one ships as a React component, an SVG string and a PNG.

## For agents

- [llms.txt](https://brand.posthog.com/llms.txt): this index, with every asset listed. [llms-full.txt](https://brand.posthog.com/llms-full.txt): the markdown of all pages in one file.
- [catalog.json](https://brand.posthog.com/catalog.json): every logo, hoggie, crest, color and font face, with its file URLs, PNG size, JSX and package import.
- Every HTML page has a markdown twin: add `.md` to its URL (`/hoggies/chart` → `/hoggies/chart.md`; the home page is `/index.md`).
- [colors.json](https://brand.posthog.com/colors.json) and [colors.css](https://brand.posthog.com/colors.css): the palette as data and as CSS custom properties. [fonts/roundhog.css](https://brand.posthog.com/fonts/roundhog.css): RoundHog's `@font-face` rules.

### WebMCP

In a browser with WebMCP (`document.modelContext`), this site registers these tools:

- `search_brand_assets`: Search PostHog's brand assets (hedgehog illustrations or "hoggies", team crests, and logo files) by name, slug, or tag. Returns each match's static SVG/PNG URLs, its page, and the @posthog/brand import that renders it.
- `get_brand_asset`: Everything about one asset by type and slug (a logo's slug is its file id, e.g. "posthog-logo-stacked-white"): every variant or tier with its SVG/PNG URLs and PNG size, the JSX and import for @posthog/brand, and its tags.
- `get_logo_guidelines`: Which PostHog logo to use where: the approved logo versions with when to use each, the do's and don'ts, and the SVG/PNG URL of every logo file. Call this before picking a logo.
- `get_brand_colors`: PostHog's brand color palette: every color's core, lighter and darker hex values, its gradient, and its CSS custom property.
- `download_brand_asset`: Save an asset's SVG or PNG to the user's computer, as a normal browser download. For a hoggie variant family pass `variant`; for a crest's mini badge pass tier "mini".
- `open_brand_page`: Navigate this site to a page so the user can see it: "/", "/logo", "/fonts", "/colors", "/hoggies", "/crests", or one asset's page ("/hoggies/<slug>", "/crests/<slug>").

## License

PostHog's brand assets are PostHog trademarks, made available under the PolyForm Strict License 1.0.0 (source-available, not open source: commercial use, use in your own projects, distribution and derivative works are not licensed). For licensing inquiries, contact hey@posthog.com. Full text: https://github.com/PostHog/brand/blob/main/LICENSE