Comparison

Comparison is the scheme for the highlight-one-mute-the-others pattern - four muted neutrals plus one colored highlight. It is the canonical palette for "you vs. your peers", "current metric vs. baseline", A/B tests, and any case where the reading is "this one versus the rest".

Tokens

When to use

• Bar charts with one highlighted category and the others in neutral.
• Line charts like "your week vs. every other week in gray".
• Before/after comparisons with the current version in color.
• A/B test results with the winning variant highlighted.
• Cohort analysis focusing on one specific cohort vs. the rest.

Why this gets its own scheme

In product design systems this pattern shows up constantly - often enough to deserve a name and a canonical set of tokens. The classic literature (ColorBrewer) does not cover it, but any modern dashboard has several instances of it.

The intent of the four "mute" stops is not variety - it is subtle visual hierarchy. If every background series carried exactly the same weight, they would turn into noise. The neutral-700 to neutral-300 scale gives a discreet sense of order (the first mute is darker, the last is lighter), useful when you want to signal a secondary order without competing with the highlight.

When not to use

• You have two series with equal semantic weight - use Categorical.
• The data has good/bad poles - use Status.
• Bipolar continuous data - use Divergent.

Anti-patterns

Usage example

import { Bar, BarChart } from 'recharts';

const data = peers.map((p) => ({
  ...p,
  fill:
    p.id === currentUserId
      ? 'var(--color-chart-cmp-highlight)'
      : `var(--color-chart-cmp-mute-${Math.min(4, p.tier)})`,
}));

<BarChart data={data}>
  <Bar dataKey="performance" />
</BarChart>;