Colors

The color palette used across the Dreams HMS design system.

Brand

Primary

Dark

Light

White

	

	
   <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

Grey 100

Grey 200

Grey 300

Grey 400

Grey 500

Grey 600

Grey 700

Grey 800

Grey 900

Grey hover

	

	
   <div class="preview-content flex items-center flex-wrap gap-3">
      <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-hover rounded-full mb-2"></div>
         <p class="text-center text-xs text-dark font-medium">Grey hover</p>
      </div>
   </div>

Primary Shades

Primary 100

Primary 200

Primary 300

Primary 400

Primary 500

Primary 600

Primary 700

Primary 800

Primary 900

Primary hover

	

	
   <div class="preview-content flex items-center flex-wrap gap-3">
      <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-hover rounded-full mb-2"></div>
         <p class="text-center text-xs text-dark font-medium">Primary hover</p>
      </div>
   </div>

Info Shades

Info 100

Info 200

Info 300

Info 400

Info 500

Info 600

Info 700

Info 800

Info 900

Info hover

	

	
   <div class="preview-content flex items-center flex-wrap gap-3">
      <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-hover rounded-full mb-2"></div>
         <p class="text-center text-xs text-dark font-medium">Info hover</p>
      </div>
   </div>

Warning Shades

Warning 100

Warning 200

Warning 300

Warning 400

Warning 500

Warning 600

Warning 700

Warning 800

Warning 900

Warning hover

	

	
   <div class="preview-content flex items-center flex-wrap gap-3">
      <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-hover rounded-full mb-2"></div>
         <p class="text-center text-xs text-dark font-medium">Warning hover</p>
      </div>
   </div>

Success Shades

Success 100

Success 200

Success 300

Success 400

Success 500

Success 600

Success 700

Success 800

Success 900

Success hover

	

	
   <div class="preview-content flex items-center flex-wrap gap-3">
      <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-hover rounded-full mb-2"></div>
         <p class="text-center text-xs text-dark font-medium">Success hover</p>
      </div>
   </div>

Error Shades

Error 100

Error 200

Error 300

Error 400

Error 500

Error 600

Error 700

Error 800

Error 900

Error hover

	

	
   <div class="preview-content flex items-center flex-wrap gap-3">
      <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-hover rounded-full mb-2"></div>
         <p class="text-center text-xs text-dark font-medium">Error hover</p>
      </div>
   </div>

Pink Shades

Pink 100

Pink 200

Pink 300

Pink 400

Pink 500

Pink 600

Pink 700

Pink 800

Pink 900

Pink hover

	

	
   <div class="preview-content flex items-center flex-wrap gap-3">
      <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-hover rounded-full mb-2"></div>
         <p class="text-center text-xs text-dark font-medium">Pink hover</p>
      </div>
   </div>

Purple Shades

Purple 100

Purple 200

Purple 300

Purple 400

Purple 500

Purple 600

Purple 700

Purple 800

Purple 900

Purple hover

	

	
   <div class="preview-content flex items-center flex-wrap gap-3">
      <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-hover rounded-full mb-2"></div>
         <p class="text-center text-xs text-dark font-medium">Purple hover</p>
      </div>
   </div>

Orange Shades

Orange 100

Orange 200

Orange 300

Orange 400

Orange 500

Orange 600

Orange 700

Orange 800

Orange 900

Orange hover

	

	
   <div class="preview-content flex items-center flex-wrap gap-3">
      <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-hover rounded-full mb-2"></div>
         <p class="text-center text-xs text-dark font-medium">Orange hover</p>
      </div>
   </div>

Indigo Shades

Indigo 100

Indigo 200

Indigo 300

Indigo 400

Indigo 500

Indigo 600

Indigo 700

Indigo 800

Indigo 900

Indigo hover

	

	
   <div class="preview-content flex items-center flex-wrap gap-3">
      <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-hover rounded-full mb-2"></div>
         <p class="text-center text-xs text-dark font-medium">Indigo hover</p>
      </div>
   </div>

Cyan Shades

Cyan 100

Cyan 200

Cyan 300

Cyan 400

Cyan 500

Cyan 600

Cyan 700

Cyan 800

Cyan 900

Cyan hover

	

	
   <div class="preview-content flex items-center flex-wrap gap-3">
      <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-hover rounded-full mb-2"></div>
         <p class="text-center text-xs text-dark font-medium">Cyan hover</p>
      </div>
   </div>

Teal Shades

Teal 100

Teal 200

Teal 300

Teal 400

Teal 500

Teal 600

Teal 700

Teal 800

Teal 900

Teal hover

	

	
   <div class="preview-content flex items-center flex-wrap gap-3">
      <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-hover rounded-full mb-2"></div>
         <p class="text-center text-xs text-dark font-medium">Teal hover</p>
      </div>
   </div>

<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>

<div class="preview-content flex items-center flex-wrap gap-3"> <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-hover rounded-full mb-2"></div> <p class="text-center text-xs text-dark font-medium">Grey hover</p> </div> </div>

<div class="preview-content flex items-center flex-wrap gap-3"> <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-hover rounded-full mb-2"></div> <p class="text-center text-xs text-dark font-medium">Primary hover</p> </div> </div>

<div class="preview-content flex items-center flex-wrap gap-3"> <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-hover rounded-full mb-2"></div> <p class="text-center text-xs text-dark font-medium">Info hover</p> </div> </div>

<div class="preview-content flex items-center flex-wrap gap-3"> <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-hover rounded-full mb-2"></div> <p class="text-center text-xs text-dark font-medium">Warning hover</p> </div> </div>

<div class="preview-content flex items-center flex-wrap gap-3"> <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-hover rounded-full mb-2"></div> <p class="text-center text-xs text-dark font-medium">Success hover</p> </div> </div>

<div class="preview-content flex items-center flex-wrap gap-3"> <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-hover rounded-full mb-2"></div> <p class="text-center text-xs text-dark font-medium">Error hover</p> </div> </div>

<div class="preview-content flex items-center flex-wrap gap-3"> <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-hover rounded-full mb-2"></div> <p class="text-center text-xs text-dark font-medium">Pink hover</p> </div> </div>

<div class="preview-content flex items-center flex-wrap gap-3"> <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-hover rounded-full mb-2"></div> <p class="text-center text-xs text-dark font-medium">Purple hover</p> </div> </div>

<div class="preview-content flex items-center flex-wrap gap-3"> <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-hover rounded-full mb-2"></div> <p class="text-center text-xs text-dark font-medium">Orange hover</p> </div> </div>

<div class="preview-content flex items-center flex-wrap gap-3"> <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-hover rounded-full mb-2"></div> <p class="text-center text-xs text-dark font-medium">Indigo hover</p> </div> </div>

<div class="preview-content flex items-center flex-wrap gap-3"> <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-hover rounded-full mb-2"></div> <p class="text-center text-xs text-dark font-medium">Cyan hover</p> </div> </div>

<div class="preview-content flex items-center flex-wrap gap-3"> <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-hover rounded-full mb-2"></div> <p class="text-center text-xs text-dark font-medium">Teal hover</p> </div> </div>