# Data.

> Markdown twin of [/brand/data](/brand/data).

Charts are brand assets — evidence rendered in house materials, following shop
law. These rules came out of running a palette validator against the real
tokens, not out of taste.

## The seven laws

1. **One chromatic color.** The palette validator (dataviz six checks,
   cream-50 surface) passes exactly one brand hue for data marks: orange-500.
   Every other hue fails the chroma floor or CVD separation. Do not fight
   this; design single-series forms. One carve-out: diverging forms may use
   sage-600 as the second pole, because there the sign lives in position
   (law 3) and color is only reinforcement — legends for diverging charts
   must be worded positionally, never by color name.
2. **Reference, not rival.** Before/after comparisons use a thin cream-600
   reference bar and a thick orange-500 measure bar. Identity rides on
   thickness, position, legend, and direct labels — never on hue alone.
3. **Diverging around zero.** Polarity charts put sign in position (left/right
   of a wood-300 zero line). Sage-600 savings, orange-500/700 costs — color
   reinforces, position carries.
4. **Pass/fail wears a glyph.** Status marks are sage-600 ✓ and orange-700 ×,
   always glyph + color, never color alone. There is no red on this site.
5. **Text wears ink.** Chart values and labels use wood-800 (primary) or
   wood-500 (secondary). Series colors live in marks only.
6. **Static SVG, tokens inline.** Charts ship as hand-written SVGs in
   `web/public/blog/`, viewBox 720 wide, full data in the alt text. No chart
   libraries; react-markdown has no remark-gfm, so no pipe tables either.
7. **Render and look.** Every chart gets screenshotted (headless Chrome) and
   eyeballed before it ships. The validator checks color, not layout.

## The form catalog

Pick the form by the data's job, then copy the matching exemplar. Every one
below is a real rendered SVG from this repo, not an illustration of an idea.

| job | form | exemplar |
|---|---|---|
| A few headline numbers | stat strip | [/blog/ponytail-stats.svg](/blog/ponytail-stats.svg) |
| Magnitude, before vs after | reference + measure bars | [/blog/ponytail-wave1-loc.svg](/blog/ponytail-wave1-loc.svg) |
| Before → after, lighter touch | dumbbell | [/ui/exemplar-dumbbell.svg](/ui/exemplar-dumbbell.svg) |
| Change with a direction (polarity) | diverging bars around zero | [/blog/ponytail-loc-change.svg](/blog/ponytail-loc-change.svg) |
| One measure over time | single orange line | [/ui/exemplar-line.svg](/ui/exemplar-line.svg) |
| Individual pass/fail cases | glyph grid | [/blog/ponytail-email-grid.svg](/blog/ponytail-email-grid.svg) |
| A large population of outcomes | waffle | [/blog/ponytail-waffle.svg](/blog/ponytail-waffle.svg) |

## Do & don't

- **× don't — two brand hues as chart series.** sage vs orange fails the
  validator: ΔE 4.6 under protan simulation. Colorblind readers see one series.
  **✓ do — reference bar + measure bar.** Identity rides on thickness +
  position + labels. One chromatic hue is enough.
- **× don't — pipe tables in post markdown.** The blog renderer has no
  remark-gfm; this ships as literal pipe characters.
  **✓ do — chart it, or fence it.** A house chart if the data has a story; an
  aligned ```text fence if it's a receipt.
- **× don't — text in series color.** Series color on text reads as a link or
  a warning, and fails contrast on cream.
  **✓ do — ink text, color chip.** wood-800 carries the words; a small mark
  beside them carries identity.