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

Patterns#

html
<button class="bg-yellow-600 hover:bg-yellow-500 active:scale-95 text-white px-5 py-2.5 rounded-lg transition">Primary</button>
<a class="text-yellow-600 dark:text-yellow-400 underline underline-offset-2">A link</a>
<button class="border border-yellow-300 text-yellow-700 hover:bg-yellow-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