Border usage for the colors/pastel-lavender|pastel-lavender palette — the shades that earn their place.
Recommended shades#
| Shade | Use it for |
|---|---|
| 100–200 | Hairlines on light UI |
| 300–400 | Visible borders on light |
| 700–800 | Borders on dark UI |
| 500 | Accent rings and focus borders |
Example#
<div class="border border-pastel-lavender-200 dark:border-pastel-lavender-800 rounded-xl p-4">Card</div>Dark mode#
Borders go deeper in dark mode: border-pastel-lavender-200 → dark:border-pastel-lavender-800.
Related#
colors/pastel-lavender|Pastel-lavender hub · colors/index|Color system