# Dashboard Best Practices

Design rules distilled from building the Crestwater sample VAR dashboard.
Whoever is building — you, a colleague, or Claude — should read this first
and follow it. The core principle: **minimalism makes it easier for the
human brain to process the information being communicated.** When in doubt,
remove.

## The one-line summary

Fewer words, fewer colors, more whitespace. Show the number; don't overexplain it.

## Words

- **Cut explanatory text ruthlessly.** Unit explainers, scope notes,
  repeated suppression reminders, repeated footnotes — if a sentence
  explains what a well-made chart already shows, delete it.
- **Never say the same thing twice on a page.** A stat shown big (e.g.
  "All Students: 18.7%") does not also get a footnote restating it.
  Methodology lives once, in the footer — not sprinkled across charts.
- **Chart subtitles: one line max.** Cohort ranges and caveats go in small
  text at the bottom of the chart or in a footer dropdown, not in the header.
- **Short labels.** "Black," not "Black or African American." "Assoc Degree
  for Transfer (ADT)" when the full name crowds the layout. No invented
  editorial phrases as headers — plain section names like "Completion."
- **Spell out acronyms on first use** (SEA → Student Equity and Achievement).
  Plain terms after that.
- Footer is four dropdowns, closed by default: Methodology · Data Protection ·
  Sources · Glossary of Terms. Each piece of content appears in exactly one
  of them.

## Color

- **No more than 5 colors**, drawn from the college's brand, used
  consistently: one chrome/heading color, one accent, 2–3 data colors. Same
  color = same meaning on every chart. Never introduce a new hue for a new
  chart.
- **Warnings use the brand palette too.** Flag disproportionate impact with
  a warm brand hue, not alarm red — and pair it with an icon or label so
  color never carries the meaning alone.
- Validate data colors for contrast and color-blind separation; brand hexes
  usually need darkening or saturating before they work as chart colors.
  Text never wears a data color.
- **No gridlines.** Keep the zero baseline and axis numbers; delete
  everything else. Reference lines (a target, the collegewide rate) are
  allowed — they are content, not chrome.

## Layout

- **Spacious and balanced.** Side-by-side cards must be the same height. If
  a row is lopsided, stack charts or stretch cards until it balances. Prefer
  2×2 over 3+1.
- Stat tiles: center the big number in the card, both axes. Make the number
  large; give it room.
- Key reference figures (the collegewide rate) go big, bold, brand-colored,
  top-right — not buried in a caption.
- Sections behind a **centered pill toggle** (white rounded container,
  active pill filled solid), one section visible at a time. Never one
  super-long page.
- Header pattern: light background; small seal, college name, and office
  name top-left; an "Updated <month year>" pill top-right; a colored
  all-caps kicker line; a big colored page title; one short description
  line; a thin accent rule underneath. Generous vertical padding — never
  "squished."

## Equity

- **Highlight gaps — that is the entire point.** Show each group's distance
  from the collegewide rate: dot vs. a vertical reference line, signed delta
  (+2.6 / −4.3) next to the rate, above/below in two consistent colors,
  sorted high to low. Not plain bars.
- Reuse the same visual convention everywhere: once a vertical line means
  "the benchmark," use a vertical line for every benchmark (collegewide
  rate, share of college in participation charts). One learned symbol, many
  charts.
- Overlapping markers: make the dot semi-transparent so the reference line
  reads through it.
- Plain-language verdicts up front ("No disproportionate impact found"),
  math one click deeper.

## Data

- **Only include metrics that belong to the framework being reported** (for
  a VAR dashboard, the Vision Aligned Reporting measures). Cut every chart
  that isn't part of the framework — even the interesting ones. Ask the
  framework question before adding a chart.
- **Blank never means zero.** A blank cell is "not yet observable" or
  "suppressed" — render an honest no-data state, never 0.
- Suppressed small counts stay visibly suppressed on the page (a hatched or
  marked cell with a short explanation available) — never silently dropped.
- Make wording changes in the data files, not in the page, so they survive
  a rebuild.

## Process

- **Small edits don't need discussion.** Make the change, rebuild, confirm
  in a sentence.
- Look at the rendered page after every change — truncated labels, odd tick
  formats, and misaligned cards are the most common regressions.
- Keep the preview link stable across edits.
- Batch small fixes and apply them in one pass, then confirm once.