SYSTEM

Figure

An image or diagram with a caption hung from a hairline.

Site patterns

Diagram of a latent diffusion model: an encoder compresses images into latent space, diffusion and denoising happen there, and a decoder maps the result back to pixels.
A diagram drawn on white, on its plate

Anatomy

Spacing 48px above and below, 12px from picture to caption
Caption the label voice in --muted-foreground, flush left under the picture
plate a diagram drawn on white sits on --diagram-ground with 24px of padding and no frame
narrow a portrait or detail photo held to two thirds of the column from sm
Picture crisp from the first paint: a figure is evidence, never dithered

Decisions

  • One component

    Posts and case studies use the same Figure, VideoEmbed and image components, because pasted markup had drifted: off-module gaps, a white panel that ignored the theme, three different video embeds (Oct 2026).

  • White on paper is edge enough

    A diagram drawn on white gets a white panel in both themes so it meets the image’s own white edge without a seam. No frame (frames off).

  • Evidence stays crisp

    Screenshots, diagrams and photographs on the reading surfaces are crisp from the first paint.