A focused lab: the neon-lime palette applied to interactive states (buttons, links, hover and focus treatments). Each pattern lists exact classes.
Patterns#
<button class="bg-neon-lime-600 hover:bg-neon-lime-500 active:scale-95 text-white px-5 py-2.5 rounded-lg transition">Primary</button>
<a class="text-neon-lime-600 underline underline-offset-2">A link</a>
<button class="border border-neon-lime-300 text-neon-lime-700 hover:bg-neon-lime-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.
Related labs#
Surfaces · Typography pairings · Borders & dividers · Palette hub
