Figure & Caption Spacing

The figure is the canonical Verdigris composition for a visual with a caption. It covers three concrete cases on the web:

1. Canvas viz with caption. WaveformTrace, HarmonicSpectrum, ResolutionComparison, etc., framed by <CanvasFrame> with <figcaption> below.
2. Static image with caption. Hero photography, diagram screenshots, OEM-partner architecture diagrams.
3. ResourceCard chip. Image + title + body — the compact figure pattern used in card grids.

This guide unifies the three under one spacing spec so the figure register reads consistently across the site.

The pattern

┌──────────────────────────────┐
│                              │
│         <visual>             │  ← image / canvas / SVG
│                              │
└──────────────────────────────┘
  Fig. 3 — Three-phase load currents at 8 kHz       ← title line (caption-strong)
  during a 60-second segment from the T-Mobile      ← body  (body-small)
  Albuquerque deployment (EVD-003).

All Verdigris web figures use this above-vs-below geometry: the visual sits above, the caption below. Tables are the only exception — table captions sit above the table (per categories/whitepapers/body.md, “tables read top-down so the caption belongs at the top”).

Vertical rhythm spec

Caption title content rules

1. Figure number + em-dash + title clause. Fig. 3 — Three-phase load currents at 8 kHz. The em-dash here is editorial (figure-number register, not headline) and is the long-standing convention in scientific publishing.
2. No terminal period on the title line. The title is a label, not a sentence.
3. Body sentence ends with period (full sentence) and includes the canonical atom ID for traceability: ... from the T-Mobile Albuquerque deployment (EVD-003). The atom ID belongs in the caption body, not as a visible UI element. See categories/composition/atom-id-exposure.md.
4. Exception for two-clause antithesis captions. When the caption body has the shape [X does A]. [Verdigris does B] (or any two-clause comparison that mirrors an H1 antithesis), drop the terminal period — same rule as categories/typography/h1-punctuation.md. A period mid-caption parses the clauses; a terminal period adds weight that the comparison doesn’t need. Rule 3 (body ends with period) applies to single-sentence captions and to atom-ID-bearing fact sentences; this rule 4 carve-out applies when the caption is itself an antithesis statement. Example: Eaton Brightlayer uses device-cadence SNMP polling. Verdigris captures 240,000 samples in that window — no trailing period.

ResourceCard chip variant

The ResourceCard pattern (image + title + body) is the compact figure: it uses the same vertical rhythm but at a smaller register and inside a card frame.

Why these differ from the figcaption spec

The ResourceCard is a navigable object (clickable, hoverable) — the title needs to read as a link, not a caption. Hence 18px / 600 weight, vs 14px / 700 weight for the figcaption. The card body is description (one or two sentences before a “Read more →” chip), not a single-clause caption.

Compliant — Canvas viz with caption

<figure className="vd-figure">
  <CanvasFrame>
    <WaveformTrace ... />
  </CanvasFrame>
  <figcaption>
    <span className="vd-figure-num">Fig. 3</span>
    <span className="vd-figure-em-dash"> — </span>
    <span className="vd-figure-title">Three-phase load currents at 8 kHz</span>
    <p className="vd-figure-body">
      A 60-second segment from the T-Mobile Albuquerque deployment (EVD-003). Verdigris flagged a degrading rectifier 21 days before its first equipment alarm.
    </p>
  </figcaption>
</figure>

Non-compliant

{/* Caption merged into body prose; lost the figure register */}
<>
  <WaveformTrace ... />
  <p>The above chart shows three-phase load currents at 8 kHz...</p>
</>

{/* Caption above the figure (only tables do this) */}
<figure>
  <figcaption>Three-phase load currents</figcaption>
  <WaveformTrace ... />
</figure>

{/* Caption full body-prose width (76ch+) reading as paragraph escape */}
<figcaption style=>...</figcaption>

{/* Body atom ID exposed as visible UI element */}
<figcaption>
  Three-phase load currents <span className="atom-id">EVD-003</span>
</figcaption>

Where this applies

Sources

1. categories/whitepapers/body.md (existing) — .vd-figure pattern. Established the figure-number-eyebrow + below-the-figure caption layout for whitepapers. This rule generalizes to web.
2. Edward Tufte, The Visual Display of Quantitative Information (1983, 2nd ed. 2001). Chapter 6, on integrated text-and-graphic figures. Tufte’s principle: the caption is part of the figure, not separate commentary; vertical proximity (small gap) signals that integration.
3. Bringhurst, The Elements of Typographic Style, Chapter 2 “Rhythm & Proportion.” The 12px (visual→caption) gap is 0.75rem, a 4-grid multiple; the 4px (title→body) gap is 0.25rem, also a 4-grid multiple. Cited via 24ways “Compose to a vertical rhythm”.
4. tokens/typography/scale.json — caption-strong and body-small tokens were already defined; this rule specifies their composition.

See also

• categories/whitepapers/body.md — print figure pattern
• categories/composition/atom-id-exposure.md — atom IDs belong in figure body, not visible UI
• rules/visual-rules.yml > composition.figure_caption — machine-enforceable rule