Semantic utility classes with intelligent theming and 7400+ Material Design Icons
Each color automatically calculates the optimal text color for maximum readability. Notice how yellow buttons use black text while dark colors use white text.
Buttons with automatic hover states and intelligent text contrast.
Each semantic color comes with predefined opacity variants for subtle backgrounds and overlays.
Complete icon library with 7400+ Material Design Icons. All icons are SVG-based for crisp rendering at any size.
Consistent typography scales with proper contrast in both light and dark modes.
Switch between light and dark modes using the toggle in the top-right corner. All colors automatically adjust for optimal contrast and readability.
Background surfaces adapt automatically
Text maintains proper contrast ratios
Shadows and elevation work in both modes