Compliance Alliance Charter Design System · v0.1
Data display

Charts & data viz

The analytics backbone — risk over time, program coverage, training, usage, exam readiness, and the examiner-grade matrices a compliance team lives by. Every chart obeys the same rules: color carries meaning, the palette stays calm, the label leads, and the chart is never the only way to read the number.

Choose a chart by the job to be done — trend, comparison, composition, progress, distribution, relationship, or a domain matrix — then the smallest size that reads clearly. Sections below are grouped that way.

Sizes

The same trend at four scales — inline for tables, small for cards, medium for sections, large for a focused report. Pick the smallest that's still legible.

inline · small · medium · large
Inline
Small
Medium

Chart card

The standard frame for a dashboard tile: a leading KPI and delta, a period control, the chart, and an optional footer for legend or context.

title · KPI · delta · period · chart · foot
Workflow runs
312
+18% vs last year
Jan
Feb
Mar
Apr
May
Jun
Across all programs · click a bar to drill in

Sparklines

Word-sized charts for tables and stat tiles — line, area, bars, and win/loss.

line · area · bars · win/loss
line
area
bars
win/loss

Bar charts

For comparing discrete values. Vertical for time, horizontal for ranking, grouped for period-over-period, stacked for composition over time, bullet for actual-vs-target.

horizontal · ranking (most-used tools)
BSA/AML Risk Assessment1,204
Overdraft Disclosure986
HMDA LAR Scrub742
Flood Determination631
grouped · this year vs last
2025 2026
stacked · book composition over time
Q1
Q2
Q3
Q4
Low risk Moderate High
bullet · actual vs target (training goal 90%)
Annual BSA training82% / 90%
Document reviews resolved96% / 85%

Lines & areas

For continuous trends. Add a second (ghost) series for comparison, a threshold line for a limit, or a band for an acceptable range.

multi-series · this year vs last (ghost)
2026 residual risk 2025 (ghost)
threshold line · wire volume vs review limit
Enhanced-review threshold — crossed in June.

Donut, gauge & radial

For a single proportion or score. The donut holds a center metric; the half-gauge reads like a dial for readiness scores.

donut · half-gauge · multi-ring
82%training
78exam readiness
BSAFair Lend.Flood

Composition & progress

Parts of a whole, and how far along. The multi-segment meter shows status mix in one bar.

100% stacked · status meter · stepped
Obligation status · 86 total
Current 62 Changing 12 Due 8 Overdue 4
BSA risk assessmentStep 4 of 7

Distribution & relationship

Where the data clusters, and how two variables relate — the histogram and the fair-lending scatter, with outliers flagged.

histogram · loan amounts
scatter · pricing vs proxy (fair lending)
Within range Pricing outlier (2) Threshold

Heatmaps & matrices

The examiner-grade views. A risk matrix plots likelihood against impact; the program matrix grids health across dimensions; the activity heatmap shows usage density over time.

risk matrix · likelihood × impact
Impact →
A
B
Likelihood →
program health matrix
Risk assmtPolicyTrainingMonitoringEvidence
BSA / AML
Fair Lending
Flood
Trust
activity heatmap · logins by day
Less More

Funnel / pipeline

Stage-to-stage flow with drop-off — the document-review pipeline, or any workflow's stages.

document review pipeline
Submitted248
In review203
Returned159
Resolved144

Chart states

loading · empty
No data yet
Runs will appear here

Color & accessibility

Three palettes do all the work, and never color alone.

PaletteForSwatches
CategoricalDistinct series (multi-line, grouped, rings)
SequentialIntensity (heatmaps, density)
Risk (status)Low → critical, matching the status palette
Always pair color with a label, value, or shape — legends, data labels, and the marker glyphs in matrices mean a chart is never decoded by hue alone.