A focused lab: the gray palette applied to typography pairings (text colors, headings and muted copy). Each pattern lists exact classes.

Patterns#

html
<h2 class="text-gray-900 dark:text-gray-100 text-2xl font-bold">Heading</h2>
<p class="text-gray-700 dark:text-gray-300">Body copy in the palette voice.</p>
<p class="text-gray-500 text-sm">Meta / caption tier.</p>

Why these shades#

Headings sit at the deep end for contrast, body one step lighter, meta at 500 — three tiers, one palette, zero ambiguity.

Surfaces · Interactive states · Borders & dividers · Palette hub