Branding & Style Guide
Data Visualization Guidelines
This project is largely data driven, and so it is critically important that our data visualizations are coherent with our brand.
Below are examples of how to apply the AER style to common data-viz formats. The list of visualizations is constrained to the recharts components which have higher-order Mantine components. For more information, visit:
mantine.dev/charts
recharts.org
Tables
| Valley | Status | Trend | ||
|---|---|---|---|---|
| Allegheny Riverfront Park | Allegheny | Active | +$18.6M | |
| Carrie Furnaces | Monongahela | Dormant | −$2.4M | |
| Hazelwood Green | Monongahela | Flagship | +$73.7M | |
| Mon Wharf Landing | Monongahela | Active | +$24.1M | |
| Ohio Edge Works | Ohio | In review | +$9.2M |
Please limit each table to one featured row. The table system supplies the sort affordances (cursor, caret, active coloring); the sorting itself is the consumer’s job, wired live in this demo.
Charts
Neutral markers in our ink color, the argument's anchor in the accent. Linear interpolation only; the tooltip uses our dark background.
Stacked composition over time. Flat fills at low opacity, never gradients; the leading series carries the accent.
Paired measures per category. The figure being argued (returned value) takes the accent; its input stays in ink.
Mixed marks when an input and an outcome share a timeline: committed capital as ink bars on the left axis, the composite index as the accent line on the right.
Each point is a site. The cohort under argument carries the accent; everything else reads as context in ink.
A one-row intensity strip: bubble area carries the figure. Single-series charts stay in ink; the accent is reserved for an argued series.
Parts of a whole with the headline figure in the hole. One segment carries the accent: the one the surrounding prose is about.
Prefer the donut when a headline figure exists; the pie is for plain composition. Mono segments, one accent, percent labels outside.
Profile comparison across shared dimensions: what REMI Transight measures well against what SROI measures well. Two series maximum.
Bounded percentages on concentric tracks. The leading ring takes the accent; use sparingly, a table often reads faster.
Stage attrition, deepening through the ink scale; the stage the page argues for lands on the accent.
A trend with no apparatus: no axes, no labels, no fill. Inside table rows use the table system's SparkCell instead, which is sized and tokenized for cells.
Calendar intensity on the accent sequential scale, the one place the ramp appears outside of table heat cells.
Hierarchical share of the composite figure: valley groups, project leaves. The argued group carries the accent.
A ranked list with in-bar labels, for when the reader needs names more than axes. The flagship row takes the accent; the rest default to ink.