CSS block preview sample

Primary Action
Input Surface
Subtle Surface

Token and spacing effects appear here.

/* SVG icon sizing standard */
.icon    { width: 1rem;    height: 1rem; }    /* 16px */
.icon-sm { width: 0.75rem; height: 0.75rem; } /* 12px */
.icon-md { width: 1.25rem; height: 1.25rem; } /* 20px */
.icon-lg { width: 1.5rem;  height: 1.5rem; }  /* 24px */
.icon-xl { width: 2rem;    height: 2rem; }    /* 32px */

/* Color inheritance */
svg { fill: none; stroke: currentColor; }

/* Inside button */
.btn .icon { flex-shrink: 0; }