Text, background, and border color utilities using semantic and grayscale colors.
Use semantic colors for consistent meaning across your application.
Main brand color
text-primarybg-primaryborder-primarySecondary actions
text-secondarybg-secondaryborder-secondaryPositive outcomes
text-successbg-successborder-successErrors and warnings
text-dangerbg-dangerborder-dangerCaution states
text-warningbg-warningborder-warningA complete grayscale palette from light to dark.
Use text-* utilities to set text color.
Primary text color
Secondary text color
Success text color
Danger text color
Warning text color
Muted text color
Use bg-* utilities to set background color.
Use border-* utilities to set border color.
System is running normally
High CPU usage detected
Connection failed
Important content with primary background.
Secondary content with subtle background.