Text usage for the colors/pastel-peach|pastel-peach palette — the shades that earn their place.
Recommended shades#
| Shade | Use it for |
|---|---|
| 100–300 | Headlines on dark surfaces |
| 400–500 | Secondary text on dark |
| 600–700 | Body text on light surfaces |
| 800–900 | Headings on light surfaces |
Example#
<p class="text-pastel-peach-700 dark:text-pastel-peach-300">Adaptive copy</p>
<a class="text-pastel-peach-600 hover:text-pastel-peach-500 underline">A link</a>Dark mode#
On dark surfaces, shift two shades lighter: text-pastel-peach-600 in light mode becomes dark:text-pastel-peach-400.
Related#
colors/pastel-peach|Pastel-peach hub · colors/index|Color system