feat(insights): brand-trio palette for the insight icon set

[thmsobrmlr]

TL;DR

Option A of two. The insight icon set gets one shared palette: the PostHog brand trio (blue, red, yellow) across every glyph. Stacks it against the review question — should the whole set be red/yellow/blue, or all purple tones? This is the red/yellow/blue answer. The purple answer is the sibling PR.

Blue is the current set; brand trio is this PR (light, 16 px, dark):

Problem

Review feedback on the icon set (#72732): the coloring is split. Most glyphs are blue with opacity fades (plus lifecycle's own status colors), but the SQL icon introduces the red/yellow/blue brand trio. One or the other, not both. This PR picks the trio for everything.

Changes

One shared mapping in frontend/src/lib/lemon-ui/icons/icons.tsx: the primary element is blue (#1d4aff), secondary red (#f54e00), tertiary yellow (#f9bd2b) — the same order the SQL bars already used.

• Funnel, retention, stickiness, table, pie, calendar heatmap: opacity fades replaced by the discrete trio.
• Paths: the two flow ribbons go red and yellow, source and sinks blue/red/yellow.
• Lifecycle: drops the green/purple status colors; above-axis bars blue, dormant dips below in red, resurrecting in yellow.
• Single-element glyphs (trends line, number digits, world map globe) stay brand blue.
• SQL icon unchanged — the rest of the set now matches it.

Structural parts (SQL brackets, lifecycle axis) still follow currentColor so they theme.

Note

Alternative to the purple-family PR. Both branch off #72732; merge one, close the other. This PR targets that branch so the diff is only the recolor.

How did you test this code?

No logic change — fill colors only. I (Claude via PostHog Code) rendered the set against the current blue version at 40 px, 16 px, and on dark (image above) to confirm the trio holds contrast at menu size and in dark mode. The icons show in the Lemon UI/Icons storybook, so CI visual snapshots will pick them up.

Automatic notifications

• Publish to changelog?
• Alert Sales and Marketing teams?

Docs update

Not needed. No doc shows the insight type icons.

🤖 Agent context

Autonomy: Human-driven (agent-assisted)

Built with PostHog Code (Claude), driven by Thomas. The review left an open palette question on the icon-set PR; rather than guess, I built both answers as separate PRs off that branch so they can be compared side by side. This is the brand-trio one. Same-order mapping as the SQL bars (blue/red/yellow) so the SQL glyph needed no change and the rest fell in line. No skills invoked — pure icon geometry/color.

---

Created with PostHog Code

[github-actions]

🤖 CI report

✅ Bundle size — 🟢 -310 B (-0.0%)

Uncompressed size of every built .js bundle, compared against the base branch.

Total: 64.59 MiB · 🟢 -310 B (-0.0%)

No file changed by more than 1000 B.

_{Posted automatically by build-bundle-size-report · uncompressed bytes from dist-report}

✅ Eager graph — within budget

How much code each root ships on the eager path — downloaded and parsed before the surface is interactive. Measured from the esbuild output chunks (post-tree-shake, static imports only); lazy import() / React.lazy chunks are not counted.

Root	Eager (shipped)	Δ vs base	Budget
entry (logged-out pages, app bootstrap) src/index.tsx	1.24 MiB · 22 files	no change	███░░░░░░░ 27.5% of 4.51 MiB
authenticated shell (every logged-in page) src/scenes/AuthenticatedShell.tsx	8.21 MiB · 3,001 files	🟢 -340 B (-0.0%)	████████░░ 84.5% of 9.71 MiB

🟢 node_modules/monaco-editor/ stays out of src/index.tsx
🟢 src/lib/components/ActivityLog/describers stays out of src/index.tsx
🟢 [object Object] stays out of src/index.tsx
🟢 [object Object] stays out of src/index.tsx
🟢 node_modules/monaco-editor/ stays out of src/scenes/AuthenticatedShell.tsx
🟢 src/lib/components/ActivityLog/describers stays out of src/scenes/AuthenticatedShell.tsx
🟢 [object Object] stays out of src/scenes/AuthenticatedShell.tsx
🟢 [object Object] stays out of src/scenes/AuthenticatedShell.tsx

Largest files eagerly shipped from src/index.tsx

Size	File
126.8 KiB	../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom.production.min.js
24.6 KiB	../node_modules/.pnpm/buffer@6.0.3/node_modules/buffer/index.js
6.3 KiB	../node_modules/.pnpm/react@18.3.1/node_modules/react/cjs/react.production.min.js
4.5 KiB	../node_modules/.pnpm/@jspm+core@2.1.0/node_modules/@jspm/core/nodelibs/browser/process.js
3.9 KiB	../node_modules/.pnpm/scheduler@0.23.2/node_modules/scheduler/cjs/scheduler.production.min.js
1.4 KiB	../node_modules/.pnpm/base64-js@1.5.1/node_modules/base64-js/index.js
1.3 KiB	src/RootErrorBoundary.tsx
912 B	../node_modules/.pnpm/ieee754@1.2.1/node_modules/ieee754/index.js
789 B	src/scenes/ChunkLoadErrorBoundary.tsx
762 B	src/index.tsx

Largest files eagerly shipped from src/scenes/AuthenticatedShell.tsx

Size	File
281.3 KiB	../node_modules/.pnpm/posthog-js@1.405.2/node_modules/posthog-js/dist/rrweb.js
267.7 KiB	../node_modules/.pnpm/@posthog+icons@0.38.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.es.js
236.0 KiB	src/taxonomy/core-filter-definitions-by-group.json
224.4 KiB	../node_modules/.pnpm/posthog-js@1.405.2/node_modules/posthog-js/dist/module.js
167.1 KiB	src/queries/validators.js
154.3 KiB	../node_modules/.pnpm/re2js@0.4.1/node_modules/re2js/build/index.esm.js
126.8 KiB	../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom.production.min.js
106.2 KiB	src/lib/api.ts
94.0 KiB	../packages/quill/packages/quill/dist/index.js
93.3 KiB	../node_modules/.pnpm/prosemirror-view@1.40.1/node_modules/prosemirror-view/dist/index.js

_{Posted automatically by check-eager-graph · sizes are eager output bytes (shipped, post-tree-shake) from the esbuild metafile · part of #32479}

✅ Toolbar bundle — eager 2.18 MiB within budget

What the toolbar ships to customer pages, measured from the esbuild output (minified, post-tree-shake). The eager set is the entry plus everything statically imported from it — fetched before any feature runs; deferred chunks load lazily. The eager guardrail is 5.72 MiB. Each output file must also stay below 10 MB, where CloudFront stops compressing it. The module boundary is enforced separately by check-toolbar-graph.

Metric	Size	Δ vs base	Budget
Eager (shipped) entry + static imports	2.18 MiB · 17 files	no change	████░░░░░░ 38.1% of 5.72 MiB
Deferred (lazy)	2.07 MiB · 33 files	no change	n/a — loads on demand
Loader dist/toolbar.js	1.1 KiB	no change	█░░░░░░░░░ 5.8% of 19.5 KiB

Largest eagerly-shipped chunks

Size	File
713.2 KiB	dist/toolbar/toolbar-app-DW4OA6K5.css
543.1 KiB	dist/toolbar/chunk-chunk-AODTKKQI.js
484.2 KiB	dist/toolbar/chunk-chunk-OA2ZAIIW.js
133.7 KiB	dist/toolbar/chunk-chunk-KS5PX76Z.js
131.8 KiB	dist/toolbar/chunk-chunk-T5KY5WYR.js
71.0 KiB	dist/toolbar/toolbar-app-PVSYZFRI.js
69.0 KiB	dist/toolbar/chunk-chunk-27JL52RE.js
35.6 KiB	dist/toolbar/chunk-chunk-INZ2CGQL.js
20.9 KiB	dist/toolbar/chunk-chunk-Q4OWLNOX.js
12.2 KiB	dist/toolbar/chunk-chunk-PIK3PADE.js

_{Posted automatically by check-toolbar-size · sizes are toolbar output bytes (shipped, post-tree-shake) from the esbuild metafile}

✅ Dist folder size — 🟢 -2.8 KiB (-0.0%)

Total size of the built frontend/dist folder (all assets), compared against the base branch.

Total: 1356.72 MiB · 🟢 -2.8 KiB (-0.0%)

[thmsobrmlr]

Closing: the palette decision landed on #72732 directly (data colors 1-3 for multi-series glyphs, purple-over-blue retention, chart-true lifecycle), so neither option PR gets merged as-is. (Comment from PostHog Code on behalf of Thomas.)