Posh UI

Color

These are some color variable that are present in the Posh UI. You can use these in your custom CSS files. Use it like this,

              
.poshui-demo {
  color: var(--COLOR-AMBER-500);
  background: var(--COLOR-AMBER-200);
}
              
            

Amber & Blue

Variable Name Variable Value Color
--COLOR-AMBER-200 #fde68a
--COLOR-AMBER-400 #fbbf24
--COLOR-AMBER-500 #f59e0b
--COLOR-AMBER-600 #d97706
Variable Name Variable Value Color
--COLOR-BLUE-50 #eff6ff
--COLOR-BLUE-300 #93c5fd
--COLOR-BLUE-500 #3b82f6
--COLOR-BLUE-800 #1e40af

Cyan & Red

Variable Name Variable Value Color
--COLOR-CYAN-50 #ecfeff
--COLOR-CYAN-200 #a5f3fc
--COLOR-CYAN-500 #06b6d4
--COLOR-CYAN-600 #0891b2
Variable Name Variable Value Color
--COLOR-RED-50 #fadddd
--COLOR-RED-200 #fecaca
--COLOR-RED-500 #ef4444
--COLOR-RED-600 #dc2626

Glossy Blue & Lime

Variable Name Variable Value Color
--COLOR-GLOSSY-BLUE-100 #cfdef9
--COLOR-GLOSSY-BLUE-500 #0d5be1
--COLOR-GLOSSY-BLUE-700 #0a49b4
Variable Name Variable Value Color
--COLOR-LIME-200 #d9f99d
--COLOR-LIME-500 #84cc16
--COLOR-LIME-600 #65a30d

Stone & Yellow

Variable Name Variable Value Color
--COLOR-STONE-50 #454444
--COLOR-STONE #333
Variable Name Variable Value Color
--COLOR-YELLOW #ffd814
--COLOR-YELLOW-600 #f4cf13

Gray & Overlay

Variable Name Variable Value Color
--COLOR-GRAY-500 #6b7280
Variable Name Variable Value Color
--COLOR-OVERLAY rgba(51, 65, 85, 0.5)

Shadow Light & White

Variable Name Variable Value Color
--COLOR-SHADOW-LIGHT rgba(149, 157, 165, 0.2)
Variable Name Variable Value Color
--COLOR-WHITE #fff

Slate

Variable Name Variable Value Color
--COLOR-SLATE-50 #f8fafc
--COLOR-SLATE-300 #cbd5e1
--COLOR-SLATE-400 #94a3b8
--COLOR-SLATE-500 #64748b
--COLOR-SLATE-600 #475569
--COLOR-SLATE-700 #334155
--COLOR-SLATE-800 #1e293b