A focused lab: the mono palette applied to interactive states (buttons, links, hover and focus treatments). Each pattern lists exact classes.

Patterns#

html
<button class="bg-mono-600 hover:bg-mono-500 active:scale-95 text-white px-5 py-2.5 rounded-lg transition">Primary</button>
<a class="text-mono-600 underline underline-offset-2">A link</a>
<button class="border border-mono-300 text-mono-700 hover:bg-mono-50 px-4 py-2 rounded-lg">Secondary</button>

Why these shades#

600 as the resting interactive color, 500 on hover, 700 on press: darker-is-more-engaged is the universal contract.

Surfaces · Typography pairings · Borders & dividers · Palette hub