Phase 1 Components - Redesign Implementation
Fluid typography system that scales beautifully across all devices using CSS clamp() functions.
heading-hero heading-section Large Subtitle Text
subtitle-large Fluid body text that scales beautifully across all devices and screen sizes.
text-fluid-sm Premium gradient backgrounds designed for modern interfaces and brand consistency.
Main brand gradient
gradient-bg-primary Positive actions
gradient-bg-success Enterprise features
gradient-bg-premium Important notices
gradient-bg-attention Eye-catching gradient text effects that maintain readability and accessibility.
gradient-text-primary gradient-text-success gradient-text-warning gradient-text-info Comprehensive button system with multiple variants, sizes, and interactive states.
Modern glass effects with backdrop blur for creating depth and visual hierarchy.
Subtle glass effect for light backgrounds
glass-light Enhanced glass for dark themes
glass-dark Heavy blur for overlays and modals
glass-strong Beautiful icon containers with gradient and glass effects in multiple sizes.
Small Gradient
icon-container-gradient sm Default Gradient
icon-container-gradient Large Gradient
icon-container-gradient lg Glass Effect
icon-container-glass Smooth 60fps animations that respect user preferences for reduced motion.
Gentle floating animation
animate-float Breathing effect
animate-pulse Entrance animation
animate-fade-up Continuous rotation
animate-rotate Coordinated animations that create engaging entrance effects for multiple elements.
stagger-children - Apply to parent container
Phase 1 Complete: Foundation design system with enhanced variables, button system, gradients, and animations. Ready for Phase 2 implementation.