amvcp-tokens-contact-sheet

A token contact sheet visually verifies design system values by rendering a schema-driven HTML page with one section per token group, including WCAG contrast annotations for colors and true-pixel rulers for spacing. It makes all design tokens directly inspectable and click-to-copy.

Yes, you can check WCAG contrast because the contact sheet renderer automatically computes contrast ratios for color cells within the visual diagnostic panels. This allows you to immediately verify color accessibility directly within the generated living design page.

You make design tokens click-to-copy by rendering the contact sheet, which turns every swatch, specimen, and chip into a keyboard-accessible button. It includes a deliberate fail-soft clipboard fallback to ensure values are copied reliably across different browser environments.

The best way to visually diagnose spacing and z-index ordering is to use a token contact sheet that renders direct visual comparisons for radius, elevation, and stacking. Spacing uses true-pixel rulers to ensure exact scale verification across the living design page.

No external dependencies are required, as the contact sheet is a self-contained renderer that parses DESIGN.md safely and emits linted HTML. It operates independently to produce an anti-slop compliant, self-hosted living design page artifact.