feat(insights): blue-purple palette for the insight icon set

[thmsobrmlr]

TL;DR

Option B of two. The insight icon set gets one shared palette: a blue→purple→violet ramp across every glyph, including the SQL bars. Answers the review question — should the whole set be red/yellow/blue, or all purple tones? This is the purple answer. The trio answer is the sibling PR.

Blue is the current set; purple ramp 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 keeps everything in blue/purple tones and pulls the SQL icon in with it.

Changes

One shared ramp in frontend/src/lib/lemon-ui/icons/icons.tsx: primary element blue (#1d4aff, --data-color-1), secondary purple (#7f26d9, --data-color-2), tertiary light violet (#a56eff, --data-color-14). All three are PostHog series colors.

• Funnel, retention, stickiness, table, pie, calendar heatmap: opacity fades replaced by the discrete blue→purple→violet stops.
• Paths: flow ribbons purple and violet, sinks purple/violet.
• Lifecycle: drops the green/red status colors; above-axis bars blue/violet, dormant dips below in purple.
• SQL icon: the red/yellow/blue bars become blue/purple/violet, matching the rest.
• Single-element glyphs (trends line, number digits, world map globe) stay blue.

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

Note

Alternative to the brand-trio 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 ramp stays distinct at menu size and in dark mode (the violet is the risk at small sizes; it holds). 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 blue/purple one. The three stops are all real PostHog series tokens (--data-color-1/-2/-14) so the ramp stays on-brand; violet was chosen as the third stop over a darker purple to keep the lightest step legible at 16 px. 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-JP67U2B2.js
484.2 KiB	dist/toolbar/chunk-chunk-OA2ZAIIW.js
133.7 KiB	dist/toolbar/chunk-chunk-UCRNO3IQ.js
131.8 KiB	dist/toolbar/chunk-chunk-T5KY5WYR.js
71.0 KiB	dist/toolbar/toolbar-app-RSJ6Y33G.js
69.0 KiB	dist/toolbar/chunk-chunk-27JL52RE.js
35.6 KiB	dist/toolbar/chunk-chunk-3QWEFW7Q.js
20.9 KiB	dist/toolbar/chunk-chunk-57UZMRKC.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 — 🟢 -1.7 KiB (-0.0%)

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

Total: 1356.72 MiB · 🟢 -1.7 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.)