Design tokens

The prompt

Build a design token reference sheet with Tailwind CSS. Start with a heading, a muted line naming the version, and a segmented control for three sections — colour, spacing, radius. The colour section is a grid of swatch cards: each has a tall block of the colour, then the token name in monospace, the hex value in muted monospace, and a small contrast note reading the ratio against white or black. Include eleven neutrals and four accents. The spacing section is a list of rows showing the token name, a bar whose width equals the value, and the pixel and rem values in monospace. The radius section is a row of six squares with increasing corner rounding and their token names beneath. Then add JavaScript that copies a token name on click and flashes a small check overlay on the swatch that was copied.

Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? Open the Tailwind source.