Charts

The series palette

Assigned in this fixed order and never cycled. Colour follows the entity, not its rank, so a filter that drops a series must not repaint the ones that remain.

How far the palette actually goes

This is the part worth reading before building a chart with more than three lines on it.

Six mutually distinct hues, inside the lightness band, each clearing 3:1 against the page, do not exist. That is measured, not asserted: searching the usable colour space, the best achievable worst pair was

So the system says what is true rather than shipping six and hoping:

• Up to three series: use slots 1 to 3. They are mutually distinct, so they stay readable in a legend, in a scatter, or anywhere a reader compares non-adjacent marks.
• Four or five series: slots 4 and 5 guarantee separation from their neighbours only. That is the correct rule for lines, bars and stacked areas, where the marks that touch are the ones confused. Direct labels become mandatory, not optional.
• Six or more: there is no sixth colour. Fold the tail into Other, facet into small multiples, or index the series to a common base and show fewer.

Both rules are enforced at build time by checkSeries. The measured margins today: adjacent 9.4 in light and 8.0 in dark against a target of 8; the first three at 11.2 and 9.8 CVD, 20.2 and 19.3 for full colour vision against a floor of 15.

A chart, with the rules applied

<div style="max-width:40rem">
  <p class="p234-kicker" data-section="markets">Petrol price by state</p>
  <svg viewBox="0 0 560 220" role="img" aria-label="Petrol price by state, Lagos, Abuja and Kano, May to November 2026" style="width:100%;height:auto">
    <g stroke="var(--p234-color-chart-grid)" stroke-width="var(--p234-chart-grid-width)">
      <line x1="40" y1="30" x2="470" y2="30"></line>
      <line x1="40" y1="75" x2="470" y2="75"></line>
      <line x1="40" y1="120" x2="470" y2="120"></line>
      <line x1="40" y1="165" x2="470" y2="165"></line>
    </g>
    <line x1="40" y1="190" x2="470" y2="190" stroke="var(--p234-color-chart-axis)" stroke-width="1"></line>
    <g fill="var(--p234-color-ink-muted)" font-family="var(--p234-font-family-text)" font-size="11">
      <text x="34" y="34" text-anchor="end">1400</text>
      <text x="34" y="79" text-anchor="end">1300</text>
      <text x="34" y="124" text-anchor="end">1200</text>
      <text x="34" y="169" text-anchor="end">1100</text>
      <text x="40" y="205">May</text>
      <text x="255" y="205" text-anchor="middle">Aug</text>
      <text x="470" y="205" text-anchor="end">Nov</text>
    </g>
    <g fill="none" stroke-width="var(--p234-chart-line-width)" stroke-linejoin="round" stroke-linecap="round">
      <polyline points="40,170 126,150 212,118 298,96 384,62 470,40" stroke="var(--p234-color-chart-series-1)"></polyline>
      <polyline points="40,176 126,162 212,134 298,120 384,88 470,70" stroke="var(--p234-color-chart-series-2)"></polyline>
      <polyline points="40,182 126,174 212,152 298,140 384,112 470,96" stroke="var(--p234-color-chart-series-3)"></polyline>
    </g>
    <g font-family="var(--p234-font-family-text)" font-size="11" font-weight="600">
      <text x="478" y="44" fill="var(--p234-color-chart-series-1)">Lagos</text>
      <text x="478" y="74" fill="var(--p234-color-chart-series-2)">Abuja</text>
      <text x="478" y="100" fill="var(--p234-color-chart-series-3)">Kano</text>
    </g>
  </svg>
  <p style="font-family:var(--p234-type-caption-family);font-size:var(--p234-type-caption-size);color:var(--p234-color-ink-subtle);margin-top:var(--p234-space-3)">Reported pump prices, May to November 2026. Official NBS figures lag by about four months.</p>
</div>

Note what the example does not do: it puts no number on every point, it does not colour the axis labels to match the series, and the series names sit at the end of each line so identity never depends on colour alone.

Chart furniture

The grid is the one colour in the system deliberately not gated at 3:1. A grid that competes with the data is a worse chart, so it is allowed to be faint.

Mark specs

Sequential, for magnitude

One hue, light to dark. This is what the Nigeria choropleth reads, and what any "how much" map or heatmap uses. Never a rainbow: a rainbow implies categories where there is only quantity.

The build checks that lightness is monotonic and that each step is at least 0.06 apart, so the steps stay tellable from one another when the map shrinks to phone width.

Diverging, for polarity

Two poles and a neutral midpoint, for data where the sign matters as much as the size: a swing, a margin, a change against a prior period.

The midpoint is never a hue. A test fails the build if it picks up chroma, because a coloured midpoint invents a category that is not in the data.

Rules

• A legend is present for two or more series; four or fewer are also direct-labelled.
• Text wears text tokens. Values, axis labels and captions stay in ink or ink-muted; the coloured mark beside them carries identity.
• Offer the numbers as a table as well. For an aggregated price series this is often the thing the reader actually wanted.

• Never a dual axis. Two measures on different scales become two charts, small multiples, or both indexed to a common base.
• Never reuse a status colour as a series colour. Success and error mean state, not identity.
• Never generate a sixth hue at runtime.
• Never label every point. Label the ends, the peak, and the point being discussed.

Dark is chosen, not flipped

Every dark step was re-selected against the dark page and re-validated from scratch. An automatic lightness flip puts colours outside the dark band, which is narrower than the light one: 0.48 to 0.67 against 0.43 to 0.77.

One finding worth recording: teal is not available to this system. At every lightness that clears the band, teal sits below the 0.10 chroma floor and reads as grey, so it was dropped from the hue families rather than shipped as a colour nobody can name.