Status Colors

                    <div class="flex flex-col space-y-4">
  <div class="flex items-center space-x-3">
    <span class="inline-block w-3 h-3 bg-blue-600 rounded-full"></span>
    <span class="text-sm text-gray-700">Primary</span>
  </div>
  
  <div class="flex items-center space-x-3">
    <span class="inline-block w-3 h-3 bg-purple-600 rounded-full"></span>
    <span class="text-sm text-gray-700">Secondary</span>
  </div>
  
  <div class="flex items-center space-x-3">
    <span class="inline-block w-3 h-3 bg-emerald-600 rounded-full"></span>
    <span class="text-sm text-gray-700">Accent</span>
  </div>
  
  <div class="flex items-center space-x-3">
    <span class="inline-block w-3 h-3 bg-gray-700 rounded-full"></span>
    <span class="text-sm text-gray-700">Neutral</span>
  </div>
  
  <div class="flex items-center space-x-3">
    <span class="inline-block w-3 h-3 bg-cyan-500 rounded-full"></span>
    <span class="text-sm text-gray-700">Info</span>
  </div>
  
  <div class="flex items-center space-x-3">
    <span class="inline-block w-3 h-3 bg-green-500 rounded-full"></span>
    <span class="text-sm text-gray-700">Success</span>
  </div>
  
  <div class="flex items-center space-x-3">
    <span class="inline-block w-3 h-3 bg-yellow-500 rounded-full"></span>
    <span class="text-sm text-gray-700">Warning</span>
  </div>
  
  <div class="flex items-center space-x-3">
    <span class="inline-block w-3 h-3 bg-red-500 rounded-full"></span>
    <span class="text-sm text-gray-700">Error</span>
  </div>
</div>