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

Patterns#

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