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

Patterns#

html
<section class="bg-brutal-yellow-50 p-10">
  <div class="bg-white rounded-xl p-6 shadow-sm">Nested surface</div>
</section>
<div class="bg-brutal-yellow-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