A focused lab: the pastel-mint palette applied to borders & dividers (hairlines, rings and divided lists). Each pattern lists exact classes.
Patterns#
<div class="border border-pastel-mint-200 rounded-xl p-4">Bordered card</div>
<ul class="divide-y divide-pastel-mint-100"><li class="py-2">Divided row</li></ul>
<button class="ring-2 ring-pastel-mint-500 ring-offset-2 rounded-lg px-4 py-2">Ring focus</button>Why these shades#
200 reads as structure in light mode; 800 takes over in dark. Rings use the 500 anchor for instant brand recognition.
Related labs#
Surfaces · Typography pairings · Interactive states · Palette hub