Brand
<div class="preview-content flex flex-wrap items-center gap-3">
<div>
<div class="w-21! h-10 bg-primary rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Primary</p>
</div>
<div>
<div class="w-21! h-10 bg-dark rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Dark</p>
</div>
<div>
<div class="w-21! h-10 bg-light rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Light</p>
</div>
<div>
<div class="w-21! h-10 bg-white rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">White</p>
</div>
</div>
Grey Shades
<div class="preview-content flex items-center flex-wrap gap-3">
<div>
<div class="w-21! h-10 bg-gray-50 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Grey 50</p>
</div>
<div>
<div class="w-21! h-10 bg-gray-100 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Grey 100</p>
</div>
<div>
<div class="w-21! h-10 bg-gray-200 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Grey 200</p>
</div>
<div>
<div class="w-21! h-10 bg-gray-300 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Grey 300</p>
</div>
<div>
<div class="w-21! h-10 bg-gray-400 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Grey 400</p>
</div>
<div>
<div class="w-21! h-10 bg-gray-500 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Grey 500</p>
</div>
<div>
<div class="w-21! h-10 bg-gray-600 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Grey 600</p>
</div>
<div>
<div class="w-21! h-10 bg-gray-700 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Grey 700</p>
</div>
<div>
<div class="w-21! h-10 bg-gray-800 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Grey 800</p>
</div>
<div>
<div class="w-21! h-10 bg-gray-900 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Grey 900</p>
</div>
<div>
<div class="w-21! h-10 bg-gray-950 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Grey 950</p>
</div>
</div>
Primary Shades
<div class="preview-content flex items-center flex-wrap gap-3">
<div>
<div class="w-21! h-10 bg-primary-50 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Primary 50</p>
</div>
<div>
<div class="w-21! h-10 bg-primary-100 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Primary 100</p>
</div>
<div>
<div class="w-21! h-10 bg-primary-200 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Primary 200</p>
</div>
<div>
<div class="w-21! h-10 bg-primary-300 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Primary 300</p>
</div>
<div>
<div class="w-21! h-10 bg-primary-400 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Primary 400</p>
</div>
<div>
<div class="w-21! h-10 bg-primary-500 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Primary 500</p>
</div>
<div>
<div class="w-21! h-10 bg-primary-600 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Primary 600</p>
</div>
<div>
<div class="w-21! h-10 bg-primary-700 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Primary 700</p>
</div>
<div>
<div class="w-21! h-10 bg-primary-800 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Primary 800</p>
</div>
<div>
<div class="w-21! h-10 bg-primary-900 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Primary 900</p>
</div>
<div>
<div class="w-21! h-10 bg-primary-950 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Primary 950</p>
</div>
</div>
Info Shades
<div class="preview-content flex items-center flex-wrap gap-3">
<div>
<div class="w-21! h-10 bg-info-50 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Info 50</p>
</div>
<div>
<div class="w-21! h-10 bg-info-100 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Info 100</p>
</div>
<div>
<div class="w-21! h-10 bg-info-200 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Info 200</p>
</div>
<div>
<div class="w-21! h-10 bg-info-300 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Info 300</p>
</div>
<div>
<div class="w-21! h-10 bg-info-400 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Info 400</p>
</div>
<div>
<div class="w-21! h-10 bg-info-500 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Info 500</p>
</div>
<div>
<div class="w-21! h-10 bg-info-600 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Info 600</p>
</div>
<div>
<div class="w-21! h-10 bg-info-700 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Info 700</p>
</div>
<div>
<div class="w-21! h-10 bg-info-800 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Info 800</p>
</div>
<div>
<div class="w-21! h-10 bg-info-900 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Info 900</p>
</div>
<div>
<div class="w-21! h-10 bg-info-950 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Info 950</p>
</div>
</div>
Warning Shades
<div class="preview-content flex items-center flex-wrap gap-3">
<div>
<div class="w-21! h-10 bg-warning-50 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Warning 50</p>
</div>
<div>
<div class="w-21! h-10 bg-warning-100 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Warning 100</p>
</div>
<div>
<div class="w-21! h-10 bg-warning-200 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Warning 200</p>
</div>
<div>
<div class="w-21! h-10 bg-warning-300 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Warning 300</p>
</div>
<div>
<div class="w-21! h-10 bg-warning-400 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Warning 400</p>
</div>
<div>
<div class="w-21! h-10 bg-warning-500 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Warning 500</p>
</div>
<div>
<div class="w-21! h-10 bg-warning-600 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Warning 600</p>
</div>
<div>
<div class="w-21! h-10 bg-warning-700 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Warning 700</p>
</div>
<div>
<div class="w-21! h-10 bg-warning-800 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Warning 800</p>
</div>
<div>
<div class="w-21! h-10 bg-warning-900 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Warning 900</p>
</div>
<div>
<div class="w-21! h-10 bg-warning-950 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Warning 950</p>
</div>
</div>
Success Shades
<div class="preview-content flex items-center flex-wrap gap-3">
<div>
<div class="w-21! h-10 bg-success-50 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Success 50</p>
</div>
<div>
<div class="w-21! h-10 bg-success-100 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Success 100</p>
</div>
<div>
<div class="w-21! h-10 bg-success-200 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Success 200</p>
</div>
<div>
<div class="w-21! h-10 bg-success-300 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Success 300</p>
</div>
<div>
<div class="w-21! h-10 bg-success-400 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Success 400</p>
</div>
<div>
<div class="w-21! h-10 bg-success-500 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Success 500</p>
</div>
<div>
<div class="w-21! h-10 bg-success-600 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Success 600</p>
</div>
<div>
<div class="w-21! h-10 bg-success-700 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Success 700</p>
</div>
<div>
<div class="w-21! h-10 bg-success-800 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Success 800</p>
</div>
<div>
<div class="w-21! h-10 bg-success-900 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Success 900</p>
</div>
<div>
<div class="w-21! h-10 bg-success-950 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Success 950</p>
</div>
</div>
Error Shades
<div class="preview-content flex items-center flex-wrap gap-3">
<div>
<div class="w-21! h-10 bg-danger-50 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Error 50</p>
</div>
<div>
<div class="w-21! h-10 bg-danger-100 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Error 100</p>
</div>
<div>
<div class="w-21! h-10 bg-danger-200 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Error 200</p>
</div>
<div>
<div class="w-21! h-10 bg-danger-300 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Error 300</p>
</div>
<div>
<div class="w-21! h-10 bg-danger-400 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Error 400</p>
</div>
<div>
<div class="w-21! h-10 bg-danger-500 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Error 500</p>
</div>
<div>
<div class="w-21! h-10 bg-danger-600 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Error 600</p>
</div>
<div>
<div class="w-21! h-10 bg-danger-700 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Error 700</p>
</div>
<div>
<div class="w-21! h-10 bg-danger-800 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Error 800</p>
</div>
<div>
<div class="w-21! h-10 bg-danger-900 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Error 900</p>
</div>
<div>
<div class="w-21! h-10 bg-danger-950 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Error 950</p>
</div>
</div>
Pink Shades
<div class="preview-content flex items-center flex-wrap gap-3">
<div>
<div class="w-21! h-10 bg-pink-50 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Pink 50</p>
</div>
<div>
<div class="w-21! h-10 bg-pink-100 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Pink 100</p>
</div>
<div>
<div class="w-21! h-10 bg-pink-200 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Pink 200</p>
</div>
<div>
<div class="w-21! h-10 bg-pink-300 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Pink 300</p>
</div>
<div>
<div class="w-21! h-10 bg-pink-400 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Pink 400</p>
</div>
<div>
<div class="w-21! h-10 bg-pink-500 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Pink 500</p>
</div>
<div>
<div class="w-21! h-10 bg-pink-600 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Pink 600</p>
</div>
<div>
<div class="w-21! h-10 bg-pink-700 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Pink 700</p>
</div>
<div>
<div class="w-21! h-10 bg-pink-800 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Pink 800</p>
</div>
<div>
<div class="w-21! h-10 bg-pink-900 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Pink 900</p>
</div>
<div>
<div class="w-21! h-10 bg-pink-950 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Pink 950</p>
</div>
</div>
Purple Shades
<div class="preview-content flex items-center flex-wrap gap-3">
<div>
<div class="w-21! h-10 bg-purple-50 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Purple 50</p>
</div>
<div>
<div class="w-21! h-10 bg-purple-100 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Purple 100</p>
</div>
<div>
<div class="w-21! h-10 bg-purple-200 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Purple 200</p>
</div>
<div>
<div class="w-21! h-10 bg-purple-300 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Purple 300</p>
</div>
<div>
<div class="w-21! h-10 bg-purple-400 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Purple 400</p>
</div>
<div>
<div class="w-21! h-10 bg-purple-500 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Purple 500</p>
</div>
<div>
<div class="w-21! h-10 bg-purple-600 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Purple 600</p>
</div>
<div>
<div class="w-21! h-10 bg-purple-700 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Purple 700</p>
</div>
<div>
<div class="w-21! h-10 bg-purple-800 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Purple 800</p>
</div>
<div>
<div class="w-21! h-10 bg-purple-900 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Purple 900</p>
</div>
<div>
<div class="w-21! h-10 bg-purple-950 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Purple 950</p>
</div>
</div>
Orange Shades
<div class="preview-content flex items-center flex-wrap gap-3">
<div>
<div class="w-21! h-10 bg-orange-50 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Orange 50</p>
</div>
<div>
<div class="w-21! h-10 bg-orange-100 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Orange 100</p>
</div>
<div>
<div class="w-21! h-10 bg-orange-200 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Orange 200</p>
</div>
<div>
<div class="w-21! h-10 bg-orange-300 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Orange 300</p>
</div>
<div>
<div class="w-21! h-10 bg-orange-400 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Orange 400</p>
</div>
<div>
<div class="w-21! h-10 bg-orange-500 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Orange 500</p>
</div>
<div>
<div class="w-21! h-10 bg-orange-600 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Orange 600</p>
</div>
<div>
<div class="w-21! h-10 bg-orange-700 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Orange 700</p>
</div>
<div>
<div class="w-21! h-10 bg-orange-800 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Orange 800</p>
</div>
<div>
<div class="w-21! h-10 bg-orange-900 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Orange 900</p>
</div>
<div>
<div class="w-21! h-10 bg-orange-950 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Orange 950</p>
</div>
</div>
Indigo Shades
<div class="preview-content flex items-center flex-wrap gap-3">
<div>
<div class="w-21! h-10 bg-indigo-50 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Indigo 50</p>
</div>
<div>
<div class="w-21! h-10 bg-indigo-100 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Indigo 100</p>
</div>
<div>
<div class="w-21! h-10 bg-indigo-200 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Indigo 200</p>
</div>
<div>
<div class="w-21! h-10 bg-indigo-300 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Indigo 300</p>
</div>
<div>
<div class="w-21! h-10 bg-indigo-400 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Indigo 400</p>
</div>
<div>
<div class="w-21! h-10 bg-indigo-500 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Indigo 500</p>
</div>
<div>
<div class="w-21! h-10 bg-indigo-600 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Indigo 600</p>
</div>
<div>
<div class="w-21! h-10 bg-indigo-700 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Indigo 700</p>
</div>
<div>
<div class="w-21! h-10 bg-indigo-800 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Indigo 800</p>
</div>
<div>
<div class="w-21! h-10 bg-indigo-900 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Indigo 900</p>
</div>
<div>
<div class="w-21! h-10 bg-indigo-950 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Indigo 950</p>
</div>
</div>
Cyan Shades
<div class="preview-content flex items-center flex-wrap gap-3">
<div>
<div class="w-21! h-10 bg-cyan-50 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Cyan 50</p>
</div>
<div>
<div class="w-21! h-10 bg-cyan-100 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Cyan 100</p>
</div>
<div>
<div class="w-21! h-10 bg-cyan-200 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Cyan 200</p>
</div>
<div>
<div class="w-21! h-10 bg-cyan-300 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Cyan 300</p>
</div>
<div>
<div class="w-21! h-10 bg-cyan-400 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Cyan 400</p>
</div>
<div>
<div class="w-21! h-10 bg-cyan-500 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Cyan 500</p>
</div>
<div>
<div class="w-21! h-10 bg-cyan-600 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Cyan 600</p>
</div>
<div>
<div class="w-21! h-10 bg-cyan-700 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Cyan 700</p>
</div>
<div>
<div class="w-21! h-10 bg-cyan-800 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Cyan 800</p>
</div>
<div>
<div class="w-21! h-10 bg-cyan-900 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Cyan 900</p>
</div>
<div>
<div class="w-21! h-10 bg-cyan-950 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Cyan 950</p>
</div>
</div>
Teal Shades
<div class="preview-content flex items-center flex-wrap gap-3">
<div>
<div class="w-21! h-10 bg-teal-50 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Teal 50</p>
</div>
<div>
<div class="w-21! h-10 bg-teal-100 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Teal 100</p>
</div>
<div>
<div class="w-21! h-10 bg-teal-200 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Teal 200</p>
</div>
<div>
<div class="w-21! h-10 bg-teal-300 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Teal 300</p>
</div>
<div>
<div class="w-21! h-10 bg-teal-400 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Teal 400</p>
</div>
<div>
<div class="w-21! h-10 bg-teal-500 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Teal 500</p>
</div>
<div>
<div class="w-21! h-10 bg-teal-600 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Teal 600</p>
</div>
<div>
<div class="w-21! h-10 bg-teal-700 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Teal 700</p>
</div>
<div>
<div class="w-21! h-10 bg-teal-800 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Teal 800</p>
</div>
<div>
<div class="w-21! h-10 bg-teal-900 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Teal 900</p>
</div>
<div>
<div class="w-21! h-10 bg-teal-950 rounded-full mb-2"></div>
<p class="text-center text-xs text-dark font-medium">Teal 950</p>
</div>
</div>