Color System Test
Testing all colors with CSS custom properties and Tailwind classes
Primary Colors
CSS Custom Properties
Primary
Primary Light
Primary Dark
Tailwind Classes
Primary
Primary Light
Primary Dark
Accent Colors
Accent Green
Accent Light
Accent Dark
Blue Scale
Blue 500
Blue 600
Blue 700
Blue 800
Blue 850
Blue 900
Blue 950
Blue 975
Section-Specific Colors
Finance Section (Green Theme)
Primary
Secondary
Light
Dark
Retail Section (Purple Theme)
Primary
Secondary
Light
Dark
Marketplace Section (Reddish-Pink Theme)
Primary
Secondary
Light
Dark
AI Lab Section (Teal Theme)
Primary
Secondary
Light
Dark
Services Section (Blue/Lavender Theme)
Primary
Secondary
Light
Dark
Gradients
Blue Gradient
Green Gradient
Light Gradient
Finance Gradient
Retail Gradient
Marketplace Gradient
AI Lab Gradient
Services Gradient
Buttons
Primary Buttons
Section Buttons
More Section Buttons
Text Colors
Primary Text Colors
Primary Text Color
Secondary Text Color
Muted Text Color
Inverse Text Color
Section Text Colors
Finance Primary Text
Retail Primary Text
Marketplace Primary Text
AI Lab Primary Text
Services Primary Text
Cards
Default Card
This is a default card with hover effects.
Finance Card
This card uses the finance primary color.
Retail Card
This card uses the retail primary color.
Marketplace Card
This card uses the marketplace primary color.
AI Lab Card
This card uses the AI lab primary color.
Services Card
This card uses the services primary color.
Status Colors
Success
Warning
Error
Info