improvement(insights): brand-aligned, colorblind-validated chart palette

Author: waleedlatif1

apps/sim/ee/organization-usage/components/activity-summary.tsx

@@ -7,12 +7,17 @@ import {
   ChartFrame,
   ChartLegend,
   type ChartLegendItem,
+  cn,
   DashboardMetric,
   formatChartLatency,
 } from '@sim/emcn'
 import type { OrganizationActivitySummary } from '@/lib/api/contracts/organization-activity'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
-import { USAGE_CHAT_COLOR } from '@/ee/organization-usage/constants'
+import {
+  USAGE_CHAT_COLOR,
+  USAGE_OTHER_COLOR,
+  USAGE_PALETTE_CLASS,
+} from '@/ee/organization-usage/constants'
 import { useLegendHighlight } from '@/ee/organization-usage/hooks/use-legend-highlight'
 import { useOrganizationActivitySummary } from '@/hooks/queries/organization-activity'
 import type { OrganizationUsageWindowKey } from '@/hooks/queries/utils/organization-usage-keys'
@@ -21,12 +26,13 @@ const CHART_HEIGHT = 180
 
 /**
  * Outcome layers, bottom-up. Failed is the status red and sits on the stack where a
- * spike reads at a glance; Other (cancelled, paused, unfinished) stays neutral.
+ * spike reads at a glance; Other (cancelled, paused, unfinished) stays neutral, in a
+ * gray whose lightness keeps it apart from the red for color-vision deficiency.
  */
 const OUTCOMES = [
   { id: 'completed', label: 'Completed', color: 'var(--brand-blue)' },
   { id: 'failed', label: 'Failed', color: 'var(--text-error)' },
-  { id: 'other', label: 'Other', color: 'var(--text-muted)' },
+  { id: 'other', label: 'Other', color: USAGE_OTHER_COLOR },
 ] as const
 
 const OUTCOME_LEGEND: ChartLegendItem[] = [...OUTCOMES]
@@ -113,7 +119,7 @@ export function ActivitySummary({ summary, loading, error, onRetry }: ActivitySu
   const chartState = { loading, error: error ? "Couldn't load activity." : undefined, onRetry }
 
   return (
-    <div className='flex flex-col gap-5'>
+    <div className={cn('flex flex-col gap-5', USAGE_PALETTE_CLASS)}>
       <div className='grid grid-cols-[repeat(auto-fit,minmax(min(120px,100%),1fr))] gap-4'>
         {metrics.map((metric) => (
           <DashboardMetric

apps/sim/ee/organization-usage/components/usage-credits.tsx

@@ -13,6 +13,7 @@ import {
 } from '@sim/emcn'
 import type { OrganizationUsageOverview } from '@/lib/api/contracts/organization-usage'
 import {
+  USAGE_PALETTE_CLASS,
   USAGE_SOURCE_CATEGORIES,
   USAGE_SOURCE_CATEGORY,
   type UsageSourceCategoryId,
@@ -110,7 +111,9 @@ export function UsageCredits({
   const highlight = useLegendHighlight(legend.map((item) => item.id))
 
   return (
-    <div className={cn('flex flex-col gap-4', isPlaceholderData && 'opacity-50')}>
+    <div
+      className={cn('flex flex-col gap-4', USAGE_PALETTE_CLASS, isPlaceholderData && 'opacity-50')}
+    >
       <div className='flex flex-col gap-1.5'>
         <div className='flex h-7 items-baseline gap-2 whitespace-nowrap'>
           <span className='text-[var(--text-body)] text-lg tabular-nums'>

apps/sim/ee/organization-usage/constants.ts

@@ -95,26 +95,39 @@ export const EXPANDED_ROW_COUNT = ORGANIZATION_USAGE_BREAKDOWN_MAX_LIMIT
 export const DEFAULT_USAGE_PRESET = '30d' as const
 export const DEFAULT_USAGE_TAB = USAGE_OVERVIEW_TAB
 
+/**
+ * The Insights chart palette, declared on each chart's root so a layer, its legend
+ * dot, and its tooltip swatch resolve to one color. Each hue is its source's color
+ * elsewhere in the app — Sim green for Chat, the Enrichment block's purple, the
+ * Knowledge block's teal, the agent violet — stepped to the lightness a filled mark
+ * needs in each mode; badge text tokens are too pale in dark mode to fill a bar.
+ */
+export const USAGE_PALETTE_CLASS =
+  '[--usage-chat:#1f9d63] [--usage-enrichment:#c026d3] [--usage-knowledge:#0e9f9f] [--usage-agent:#6f3dfa] [--usage-other:var(--text-secondary)] dark:[--usage-chat:#2dac72] dark:[--usage-enrichment:#d946ef] dark:[--usage-agent:#8b5cf6] dark:[--usage-other:#8a8a8a]'
+
 /** Sim Chat's color, shared by its credit layer and the chat-runs chart. */
-export const USAGE_CHAT_COLOR = 'var(--badge-orange-text)'
+export const USAGE_CHAT_COLOR = 'var(--usage-chat)'
+
+/** The neutral remainder, shared by the credit and outcome stacks. */
+export const USAGE_OTHER_COLOR = 'var(--usage-other)'
 
 /**
  * The credit chart's layers, bottom-up. Each one owns a fixed color, so a layer keeps
  * its color when a quieter period drops its neighbours — color follows the source,
  * never its rank.
  *
  * Five hues plus a neutral `Other`: the palette is validated for adjacent-pair
- * separation (including color-vision deficiency) in exactly this order, so reorder
- * or extend it only by re-running that validation. A sixth distinct source belongs
- * in `Other`, not in a generated hue.
+ * separation (including color-vision deficiency) in both modes in exactly this order,
+ * so reorder or extend it only by re-running that validation. A sixth distinct source
+ * belongs in `Other`, not in a generated hue.
  */
 export const USAGE_SOURCE_CATEGORIES = [
   { id: 'workflow', label: 'Workflows', color: 'var(--brand-blue)' },
   { id: 'chat', label: 'Sim Chat', color: USAGE_CHAT_COLOR },
-  { id: 'agent', label: 'Agent block', color: 'var(--badge-purple-text)' },
-  { id: 'knowledge', label: 'Knowledge Base', color: 'var(--badge-amber-text)' },
-  { id: 'enrichment', label: 'Enrichment', color: 'var(--badge-pink-text)' },
-  { id: 'other', label: 'Other', color: 'var(--text-muted)' },
+  { id: 'enrichment', label: 'Enrichment', color: 'var(--usage-enrichment)' },
+  { id: 'knowledge', label: 'Knowledge Base', color: 'var(--usage-knowledge)' },
+  { id: 'agent', label: 'Agent block', color: 'var(--usage-agent)' },
+  { id: 'other', label: 'Other', color: USAGE_OTHER_COLOR },
 ] as const
 
 export type UsageSourceCategoryId = (typeof USAGE_SOURCE_CATEGORIES)[number]['id']