Components

The Fluxive Blueprint Theme defines standard styles for common UI components to maintain a cohesive "glass-tech" aesthetic.

Buttons

Primary buttons use the brand blue with a subtle hover effect.

• Background: blue-600 (#2563eb)
• Hover: blue-500 (#3b82f6)
• Text: White
• Border Radius: 8px
• Padding: Vertical 10px, Horizontal 20px

Cards

Cards are the fundamental building blocks of our UI. They use a dark surface color, often with a subtle border or glassmorphism effect in high-end implementations.

• Background: gray-800 (#1f2937)
• Border: 1px solid gray-700 (#374151)
• Border Radius: 8px or 12px
• Shadow: shadow-lg (in Tailwind terms)

Card Title

This is an example of a standard card component. It separates content from the background and groups related information.

Glassmorphism

For floating elements like Sidebars, Navbars, and Modals, we use a "Glass" effect to provide context and depth.

• Background: rgba(17, 24, 39, 0.85) (Gray 900 at 85% opacity)
• Backdrop Filter: blur(8px) (or equivalent)
• Border: 1px solid rgba(255, 255, 255, 0.1)

This ensures the content behind the element is hinted at but doesn't interfere with readability.