A focused lab: the purple palette applied to surfaces (background fills, sections and panels). Each pattern lists exact classes.

Patterns#

html
<section class="bg-purple-50 dark:bg-purple-950 p-10">
  <div class="bg-white dark:bg-slate-900 rounded-xl p-6 shadow-sm">Nested surface</div>
</section>
<div class="bg-purple-500 text-white p-6">Primary surface</div>

Why these shades#

50/950 anchor the tinted canvas, white/near-black cards float above, and the 500 step is reserved for the one surface that must command attention.

Typography pairings · Interactive states · Borders & dividers · Palette hub