Render handbook logos live from @posthog/brand

[rafaeelaudibert]

Changes

Updates the Logos & hedgehogs handbook page to render our logo live from the @posthog/brand library — the single source of truth for the mark — instead of linking to hand-placed files in static/brand. The page can no longer drift from the library, and no logo binaries are committed.

• New BrandLogos component (src/components/BrandLogos) renders each lockup (standard, dark, white, print, logomark, stacked) with the parametric <Logo> component from @posthog/brand.
• Downloads are serialized on demand from the rendered SVG: SVG, PNG, PNG @2x, plus padded variants — so every download matches exactly what's shown, with nothing pre-baked. (mono lockups have their currentColor baked into an explicit fill so the files stand alone.)
• Added a "When to use each logo" section capturing the brand guidance (full-color by default, white on dark, black on light only when monochrome is required, print/4-color for limited palettes, logomark for small sizes).
• Registered as an MDX shortcode and dropped into the page in place of the old image/link table. Also replaces the stale "we updated our logo in 2021" comparison.

No dependency bump is needed — the currently-pinned @posthog/brand@^0.4.0 already ships the current mark and the full <Logo> API.

Why: Anthropic asked to use our logo for a blog post about the new MCP spec, which surfaced that this page (the one we point external parties to) was still serving the old logo. Rendering from the library keeps it current automatically.

Checklist

• I've read the docs and/or content style guides.
• Words are spelled using American English
• Use relative URLs for internal links
• I've checked the pages added or changed in the Vercel preview build
• If I moved a page, I added a redirect in vercel.json

---

Created with PostHog from a Slack thread

[github-actions]

Deploy preview

Status	Details	Updated (UTC)
🟢 Ready	View preview	Jul 20, 2026 03:45PM

[github-actions]

Vale prose linter → found 9 errors, 13 warnings, 11 suggestions in your markdown

Full report → Copy the linter results into an LLM to batch-fix issues.

Linter being weird? Update the rules!

contents/handbook/brand/assets.md — 8 errors, 12 warnings, 11 suggestions

Line	Severity	Message	Rule
30:44	warning	Use 'PostHog' instead of 'posthog'.	Vale.Terms
33:19	warning	'logomark' is a possible misspelling.	PostHogBase.Spelling
33:47	warning	'wordmark' is a possible misspelling.	PostHogBase.Spelling
39:104	error	Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash.	PostHogBase.EnDash
39:146	error	Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash.	PostHogBase.EnDash
45:27	error	Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash.	PostHogBase.EnDash
46:76	error	Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash.	PostHogBase.EnDash
49:15	warning	'logomark' is a possible misspelling.	PostHogBase.Spelling
49:57	error	Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash.	PostHogBase.EnDash
49:59	warning	'favicons' is a possible misspelling.	PostHogBase.Spelling
52:34	warning	'logomark' is a possible misspelling.	PostHogBase.Spelling
52:118	error	Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash.	PostHogBase.EnDash
54:12	warning	'PNGs' is a possible misspelling.	PostHogBase.Spelling
54:213	error	Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash.	PostHogBase.EnDash
56:258	warning	'logomark' is a possible misspelling.	PostHogBase.Spelling
99:155	error	Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash.	PostHogBase.EnDash
128:45	warning	'semibold' is a possible misspelling.	PostHogBase.Spelling
129:46	warning	'semibold' is a possible misspelling.	PostHogBase.Spelling
137:72	suggestion	Prefer 'proper nouns or they' over 'he'.	PostHogBase.Inclusivity
137:86	suggestion	Prefer 'proper nouns or their/theirs' over 'his'.	PostHogBase.Inclusivity
137:90	warning	'hoggy' is a possible misspelling.	PostHogBase.Spelling
141:26	suggestion	Prefer 'proper nouns or they' over 'he'.	PostHogBase.Inclusivity
141:96	suggestion	Prefer 'proper nouns or their/theirs' over 'His'.	PostHogBase.Inclusivity
141:198	suggestion	Prefer 'proper nouns or their/theirs' over 'His'.	PostHogBase.Inclusivity
141:232	suggestion	Prefer 'proper nouns or their/theirs' over 'his'.	PostHogBase.Inclusivity
141:302	suggestion	Prefer 'proper nouns or their/theirs' over 'His'.	PostHogBase.Inclusivity
141:335	suggestion	Prefer 'proper nouns or their/theirs' over 'his'.	PostHogBase.Inclusivity
145:1	suggestion	Prefer 'proper nouns or they' over 'He'.	PostHogBase.Inclusivity
145:44	warning	'monoline' is a possible misspelling.	PostHogBase.Spelling
145:80	suggestion	Prefer 'proper nouns or they' over 'He'.	PostHogBase.Inclusivity
145:191	suggestion	Prefer 'proper nouns or they' over 'he'.	PostHogBase.Inclusivity

src/components/BrandLogos/README.md — 1 errors, 1 warnings, 0 suggestions

Line	Severity	Message	Rule
4:76	error	Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash.	PostHogBase.EnDash
10:22	warning	'shortcode' is a possible misspelling.	PostHogBase.Spelling

[github-actions]

Bundle report

Total JS (gzip)

6.73 MiB (+9.1 KiB / +0.1%)

Largest changed named chunks

Chunk	Gzip	Δ vs master
11e3050c.js	82.8 KiB	new
bfc1396b.js	68.5 KiB	new
ed1deae8.js	65.9 KiB	new
11b032db.js	62.3 KiB	new
app.js	2109.7 KiB	+9.0 KiB / +0.4%

Eager graph (modules shipped in each entrypoint's initial chunks)

Entrypoint	Eager size	Budget	Modules
✅ app	16.07 MiB (+48.7 KiB / +0.3%)	report-only	1965

Largest modules in the app closure

Module	Size
./src/data/mcp-tools.json	842.5 KiB
css ./node_modules/.pnpm/css-loader@5.2.7_webpack@5.101.3/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[1]!./node_modules/.pnpm/postcss-loader@4.3.0_postcss@8.5.6_webpack@5.101.3/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[2]!./src/styles/global.css	737.2 KiB
./src/components/Stickers/Stickers.tsx	696.4 KiB
./node_modules/.pnpm/@radix-ui+react-icons@1.3.2_react@18.3.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js	481.4 KiB
./node_modules/.pnpm/rehype-raw@7.0.0/node_modules/rehype-raw/lib/index.js + 29 modules	395.1 KiB
./node_modules/.pnpm/@posthog+icons@0.36.6_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.cjs.js	364.8 KiB
./src/hooks/useCustomers.tsx + 54 modules	355.1 KiB
./node_modules/.pnpm/@posthog+icons@0.36.6_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.es.js	354.8 KiB
./node_modules/.pnpm/react-markdown@8.0.7_@types+react@16.14.66_react@18.3.1/node_modules/react-markdown/lib/react-markdown.js + 88 modules	351.4 KiB
./node_modules/.pnpm/cloudinary-core@2.14.0_lodash@4.17.21/node_modules/cloudinary-core/cloudinary-core.js	281.9 KiB
./src/components/ProductComparisonTable/index.tsx + 120 modules	278.6 KiB
./src/components/SearchUI/index.tsx + 87 modules	271.9 KiB
./node_modules/.pnpm/d3@7.9.0/node_modules/d3/src/index.js + 208 modules	247.4 KiB
./src/components/Pricing/PricingSlider/Slider.tsx + 87 modules	239.9 KiB
./gatsby-browser.tsx + 44 modules	227.0 KiB

---

Eager-graph budgets are report-only until a baseline is established. Sizes are gzip of public/**/*.js; eager size is webpack module source bytes for the modules actually shipped in the entrypoint's initial chunks (post-tree-shake).