Upgrade to Pro
Get access to all features
- Advanced Analytics
- Team Collaboration
- API Access
Colors
Our comprehensive color system provides a wide range of utility classes for styling text and backgrounds. The color palette includes semantic colors (primary, secondary, success, etc.), brand colors, and gradient variations. Each color comes with multiple variants including pale and soft versions for subtle backgrounds. These utility classes follow a consistent naming convention and are designed to work seamlessly with your design system, ensuring accessibility and visual hierarchy throughout your application.
Text Colors
Text color utilities provide precise control over typography appearance and readability. The
collection includes a full spectrum of colors from vibrant brand colors to subtle muted tones.
Semantic colors like .text-primary and .text-secondary maintain
consistency with your theme, while specific color classes like .text-blue or
.text-red offer exact color control. Gradient text classes create eye-catching
headings and call-to-action elements. All text colors are optimized for contrast and
accessibility standards.
Solid Background Colors
Background color utilities offer three intensity levels for each color: standard, pale, and soft
variants. The standard background classes (e.g., .bg-blue) provide full-intensity
colors perfect for buttons, badges, and prominent elements. Pale variants (e.g.,
.bg-blue-pale) offer subtle backgrounds ideal for cards, notifications, and content
sections. Soft variants (e.g., .bg-blue-soft) provide the most subtle option,
perfect for hover states and gentle highlighting. Each variant is carefully calibrated to work
with appropriate text colors for optimal readability and visual appeal.
Gradient Background Colors
Gradient backgrounds add visual depth and modern appeal to your interface elements. Our curated collection of gradient classes features smooth color transitions that work beautifully for hero sections, cards, buttons, and decorative elements. Each gradient is carefully designed with appropriate color stops and directions to ensure visual harmony. Gradients 1-8 use vibrant color combinations with white text, while gradient-9 features a lighter palette suitable for dark text. These gradients are optimized for both aesthetic appeal and performance across all devices.
On this page