Figure

Docs pages in this repo illustrate mechanisms with hand-drawn figures. The default medium is an inline SVG that lives directly in the .mdx and paints only with --jd-fig-* CSS variables, so it works in both colour modes for free. An HTML figure is the escape hatch, near the end of this file.

This file is the index: how to choose the shape of a figure, and the rules every figure follows. The layout grammar of each shape lives in references/forms/, one file per form, loaded once the form is chosen and never all at once. The craft of drawing comes from skills that ship with Claude Code, loaded through the Skill tool before the first line of SVG.

The palette is thirteen tokens, each worked out from the project's theme: