Freeside · Charts
FREESIDE DESIGN SYSTEM · DATA VISUALISATION

Charts.

Freeside is a predictive product — charts are the product, not decoration. This palette was computed and validated, not eyeballed: lightness band, chroma floor, colourblind separation (deutan / protan / tritan), normal-vision separation and contrast-vs-surface all pass in light and dark. Use freeside-charts.css and follow the rules below.

01 · Palette

Four colour jobs.

Pick by the job the colour does. Never mix them, never invent a hue.

Categorical — identity. Assign in fixed order, never cycled.

c1
c2
c3
c4
c5
c6

Six slots is the ceiling. A 7th series is never a generated hue — fold the tail into “Other”, facet into small multiples, or cut the series.

Sequential — magnitude. One hue, light → dark.

seq1
seq2
seq3
seq4
seq5
seq6

Diverging — polarity. Two poles, neutral grey midpoint (never a hue).

neg2
neg1
mid
pos1
pos2

Status — state. Reserved; never reused as “series 4”.

good
warning
critical
agent/now
02 · Choosing a form

The data's job picks the chart.

One numberStat tile / hero number — not a chart. A single KPI with a mono eyebrow and a delta.
Over timeLine (continuous) or area (volume). Predicted segments are dashed; uncertainty is a band, never a second line.
MagnitudeBar. Horizontal when labels are long or the list is a ranking.
CompositionStacked bar. Avoid pie/donut beyond 2–3 slices — a bar reads faster.
ComparisonGrouped bar (few series) or dot plot (many categories, two points each).
PolarityDiverging bar around a zero baseline — gain vs. loss, actual vs. target.
DensityHeatmap with the sequential ramp — activity by week × segment.
In a rowSparkline — trend beside a number, no axes.
03 · The charts

Worked examples.

Forecast line — actual, predicted, confidence band, baseline

Engagement rate
% OF NETWORK ACTIVE · 90-DAY HORIZON · SELDON-V3
80%70%60%50% 72% NOW JANAPRSEP
Actual Predicted 82% confidence Do nothing
Predicted is always dashed; the band is the confidence interval, not a second series. The orange rule marks “now” — the only orange in a chart.
Engagement by region
% ACTIVE · THREE CHANNELS
604020 EMEAAMERICASAPAC
Newsletter Events Groups
Top groups by activity
POSTS THIS QUARTER
FINTECH LEADERSALUMNI FOUNDERS WOMEN IN TECHCLASS OF 2015LONDON CHAPTER 182146 12188 64
One series → no legend box; the title names it. Values are direct-labelled, so no axis is needed.
Audience composition
MEMBERS BY SENIORITY · BY QUARTER
Q1Q2Q3Q4
Manager Director VP+
A 2px surface-coloured gap separates segments so they never bleed together.
Change vs. target
PERCENTAGE POINTS · BY SEGMENT
+14+9 +3−6 −11 RECENT GRADSDIRECTORSFOUNDERS MID-CAREERRETIRED
Diverging = two poles around a real zero. The midpoint is neutral grey, never a third hue.

Heatmap, sparklines, stat tiles

Activity density
SESSIONS · WEEK × SEGMENT
VP+DIRMGROTHER W1W2W3W4W5
Sparklines
TREND BESIDE A NUMBER
NEWSLETTER 61%
EVENTS 28%
GROUPS 44%
Stat tiles
WHEN A CHART WOULD BE OVERKILL
SELDON · 90-DAY
+18%
▲ 82% confidence
ATTRITION RISK
214
▼ needs review
The delta carries a glyph (▲▼) as well as colour — never colour alone.

States — loading, empty, and the tooltip

Loading
FETCHING SERIES…
No data
No activity in this range.
TRY A WIDER WINDOW
Tooltip
MAY 2026
Actual61%
Predicted61%
Line and area charts ship a crosshair + tooltip by default.
04 · Rules

Non-negotiables.

NeverNo dual axes. Two measures of different scale → two charts, small multiples, or index both to a common base. This is the single most common charting mistake.
NeverNo rainbow, no invented hues. Categorical comes from the six slots in order; a 7th series folds into “Other” or gets faceted.
NeverColour never follows rank. A filter that drops series must not repaint the survivors — colour belongs to the entity.
NeverNo 3D, no shadows on marks, no truncated bar baselines. Bars start at zero; only line charts may crop the axis (say so in the subtitle).
AlwaysState the unit and the period in the subtitle, and label the “now” boundary on any forecast.
AlwaysLegend for ≥2 series (one series needs none — the title names it); direct-label up to 4. Text stays ink — the swatch carries identity.
AlwaysShip the table twin. Every chart has an accessible <table> equivalent behind a toggle, plus a descriptive aria-label summarising the takeaway.
AlwaysDark mode is selected, not flipped — the dark steps are their own validated values in freeside-charts.css.
CheckChanging a chart colour? Re-run the validator before shipping — CVD separation is computed, never eyeballed.