HTML Design Token Showcases

Markdown can't show colors. Unicode block characters are a hack and a tell that the writer wished they had a different format. For palettes, type scales, spacing systems, and any other design tokens, use HTML — the values can be displayed for what they actually are.

When to use this skill

• "Show me / document our [palette, colors, theme, tokens, design system]"
• "Build a token reference for X"
• "Document the spacing / type / color scale"
• Whenever a markdown file would have to fake a color with █████ blocks
• Whenever a developer needs to copy CSS variables out of a doc

Output requirements

Each token is shown:

1. Visually rendered (the actual color, the actual spacing, the actual shadow)
2. With its identifier (--color-accent-500, space-md)
3. With its value (#B8602A, 12px)
4. With a copy button that puts the value or the CSS variable on the clipboard