Charts

When a single number isn't enough.

YMF's case is statistical. When that case exceeds what a single figure can carry — a multi-year trend, a phase-by-phase breakdown, a funding trajectory — the system needs charts that feel native rather than imported. The same token logic that governs colour and typography governs the chart palette: Terracotta for the emphasis series, Fog for supporting series, Slate structure throughout.

These specimens use real data from the YMF Project financial model, rendered with Recharts.

Chart palette

Five colours. One emphasis rule.

The chart palette extends the brand system without adding arbitrary chromatic variety. Terracotta is always the emphasis series — the figure that carries the argument. The remaining four work as supporting data. When complex data genuinely surfaces five dimensions, all five colours can be used. The rule is hierarchy, not count — Terracotta always marks the argument, never joins the background.

#A75A39

--chart-terracotta

Terracotta

Emphasis · primary series · always the argument

#B8852C

--chart-ochre

Ochre

Secondary accent · adjacent warmth

#3F5264

--chart-steel

Steel

Structural · mid-Slate tone

#4D6652

--chart-reed

Reed

Natural contrast · third series

#7C7B71

--chart-fog

Fog

Neutral · supporting · Fog-50

Use Terracotta for the series that carries the chart's argument — always.
Use Fog for supporting or neutral data series.
Differentiate series by weight or dash pattern as well as colour.
Use all five colours when the data genuinely has five dimensions. The palette exists for exactly that.

Don't

Use five colours when two or three would carry the same information.
Give each series equal visual weight — there is always an argument, and Terracotta marks it.
Distinguish series by colour alone — reinforce with labels, weight, or position.
Introduce colours outside this palette for chart fills.

On Slate ground

Fog fills read lighter on Slate — invert the Fog ramp (Fog-10 at base, Fog-70 for depth).
Keep Terracotta as the emphasis colour on both grounds.
Axis labels use Paper-65. Gridlines use Paper at 8% opacity.

Bar chart

Year-by-year. One axis.

The bar chart is the most common chart type in YMF's data environment. Use it for annual snapshots and single-axis distributions. The emphasis bar — always Terracotta — marks the period where the argument lands: the threshold crossed, the most recent year, or the figure that needs to be held. All other bars in Fog.

On Paper

The Project · external fundraising need

Seed capital absorbs the early gap. External fundraising emerges in year 8.

Source · YMF The Project · default model assumptions · annualFundraisingNeed · years 1–16

Terracotta marks years where need is approaching zero — the transition toward self-sustaining operation.

On Slate

The Project · programme scale

Active partnerships reach steady state at year 9. From there, a completed partnership exits for every new one that starts.

Source · YMF The Project · default model assumptions · totalActive · years 1–16

Terracotta marks the years where the portfolio reaches operating scale. Bar fills in Paper-28 on Slate — readable without competing with the emphasis bar.

Line chart

Trends. The shape of change.

Line charts carry trends: things that change over time. Use a single series for a single trajectory; a second series only when the relationship between two trends is the chart's point. Dual series are differentiated by stroke weight as well as colour — never colour alone.

On Paper · dual series

The Project · single partnership journey

YMF begins fully funded. The church takes over progressively across three phases.

Source · YMF The Project · default model assumptions · church & YMF FTE% · 9-year partnership

Church funding (Terracotta, solid, 2px) vs YMF contribution (Fog, dashed, 1.5px). Reference lines at phase transitions (years 3 and 6).

On Slate · dual series

The Project · 20-year funding trajectory

Church and legacy returns grow as partnerships mature. External fundraising need peaks and subsides.

Source · YMF The Project · default model assumptions · returns & annualFundraisingNeed · years 2–20

Returns (Terracotta, solid) vs fundraising need (Paper-50, dashed). When the lines cross, the model is generating enough returns to reduce external dependence.

Stacked bar

Proportional breakdowns.

Stacked bars work for proportional breakdowns across a shared total. Use the Fog ramp for supporting segments; Terracotta for the segment that carries the argument. Always label segments. The number of stacks should match the data — use as many as the breakdown genuinely requires, with Terracotta on the segment that matters most.

On Paper

The Project · partnership pipeline

The portfolio builds through three phases. Mature partnerships — church-funded and returning — appear in Terracotta.

Source · YMF The Project · default model assumptions · partnershipCounts · years 1–16

Three stacks. Incubation (Fog-30), Transition (Fog-50), Mature (Terracotta). Fog-ramp segments carry no emphasis; Terracotta marks the self-sustaining phase.

On Slate

The Project · partnership pipeline

Same data on Slate ground. The Fog ramp inverts: supporting segments read lighter against the dark field.

Source · YMF The Project · default model assumptions · partnershipCounts · years 1–16

On Slate: supporting stacks use Fog-70, Fog-30, Paper-20 — lighter values read clearly against the dark ground. Terracotta is unchanged.

Source & footnote treatment

Always cite below.

Every chart carries a source line. This is not optional. It is the same discipline as the stat-display source kicker, applied to chart contexts.

Source line format

Source · YMF Tell Me More 2025 · n=247 churches

JetBrains Mono 10.5px · uppercase · tracking-[0.14em]
Fog-70 on Paper. Paper-45 on Slate.
Sits below the chart, left-aligned, outside the chart area.
Never inside the chart. Never on the chart itself.

Multi-source footnotes

Source¹ · YMF Tell Me More 2025
Source² · McCrindle Church Attendance Study 2021

Numbered footnotes when a chart draws from more than one source.
Same type treatment as single-source line.
Footnotes always below the chart. Never in the chart body.

Accessibility

Colour is not the only signal.

All chart text meets WCAG AA (4.5:1) at 10.5px. Chart fills — large elements — meet the 3:1 threshold for non-text UI components at the sizes used in these specimens. No chart relies on colour as its sole distinguishing feature.

Colour + weight

Dual-series line charts distinguish series by stroke weight (2px vs 1.5px) and dash pattern as well as colour. A reader who cannot distinguish Terracotta from Fog can still read the chart from weight and dash alone.

Labels + legends

Stacked bars are always accompanied by a legend. Bar charts use axis labels and tooltips. No chart communicates the argument by colour alone. All chart elements have accessible aria-labels via the aria-label attribute on the enclosing figure element.

Token map

How the chart palette connects.

Token	Value	Use
--chart-terracotta	#A75A39	Emphasis series — always the argument
--chart-ochre	#B8852C	Secondary accent series
--chart-steel	#3F5264	Structural data series
--chart-reed	#4D6652	Third data series
--chart-fog	#7C7B71	Supporting / neutral series; mirrors --fog-50
--chart-grid	#EEEDE7 (fog-10)	Horizontal gridlines on Paper
--chart-grid-inv	rgba(252,250,244,.08)	Horizontal gridlines on Slate
--chart-axis	#575650 (fog-70)	Axis labels and ticks on Paper
--chart-axis-inv	rgba(252,250,244,.65)	Axis labels and ticks on Slate