Built directly from .claude/skills/eco-button/SKILL.md -- the CSS on this page is lifted verbatim from that skill's template, using the same var(--color-...) tokens shown on the Colors page. This page doubles as a working reference implementation of the skill.
Size md. Light-background variants:
Inverted variants, on a dark surface (color.surface-100):
Primary variant across all four sizes. Resize the browser below 769px to see the mobile height/padding/font-size switch.