--- name: modern-design-system description: 2025 UI design trends and patterns including glassmorphism, bento grids, micro-animations, and modern aesthetics. Essential for creating visually stunning, premium web interfaces. --- # Modern Design System - 2025 UI Trends > Comprehensive guide for premium, aesthetic, dynamic designs --- ## 🎨 2025 Visual Styles ### 1. Glassmorphism (Frosted Glass UI) ```css \/* Core Glassmorphism *\/ .glass-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); } \/* Dark mode glass *\/ .glass-dark { background: rgba(17, 25, 40, 0.75); backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.125); } \/* Colorful glass *\/ .glass-gradient { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100% ); backdrop-filter: blur(20px); } ``` ```tsx \/\/ React Glassmorphism Component interface GlassCardProps { children: React.ReactNode; blur?: 'sm' | 'md' | 'lg'; className?: string; } export function GlassCard({ children, blur = 'md', className }: GlassCardProps) { const blurValues = { sm: 'blur-sm', md: 'blur-md', lg: 'blur-xl' }; return (

{children} <\/div> ); } ``` --- ### 2. Bento Grid Layout ```tsx \/\/ Bento Grid with CSS Grid export function BentoGrid({ children }: { children: React.ReactNode }) { return (

{children} <\/div> ); } \/\/ Grid item with span options interface BentoItemProps { children: React.ReactNode; colSpan?: 1 | 2 | 3 | 4; rowSpan?: 1 | 2; } export function BentoItem({ children, colSpan = 1, rowSpan = 1 }: BentoItemProps) { const colClasses = { 1: 'col-span-1', 2: 'col-span-2', 3: 'col-span-3', 4: 'col-span-4', }; const rowClasses = { 1: 'row-span-1', 2: 'row-span-2', }; return (

{children} <\/div> ); } \/\/ Usage Example <\/BentoItem> <\/BentoItem> <\/BentoItem> <\/BentoItem> <\/BentoGrid> ``` --- ### 3. Micro-Animations & Motion ```tsx \/\/ Framer Motion Patterns import { motion, useInView } from 'framer-motion'; \/\/ Fade up on scroll export function FadeUp({ children, delay = 0 }: { children: React.ReactNode; delay?: number }) { const ref = useRef(null); const isInView = useInView(ref, { once: true, margin: '-100px' }); return ( {children} <\/motion.div> ); } \/\/ Stagger children animation export const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.2, }, }, }; export const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: 'easeOut' } }, }; \/\/ Hover scale with spring Click me <\/motion.button> \/\/ Smooth counter animation function AnimatedCounter({ value }: { value: number }) { const count = useMotionValue(0); const rounded = useTransform(count, (v) => Math.round(v)); useEffect(() => { const controls = animate(count, value, { duration: 2 }); return controls.stop; }, [value]); return {rounded}<\/motion.span>; } ``` --- ### 4. Modern Color Palettes ```css :root { \/* ═══════════════════════════════════════════════════════════ DARK THEME - Slate\/Zinc based (Premium feel) ═══════════════════════════════════════════════════════════ *\/ --bg-primary: #0a0a0a; --bg-secondary: #111111; --bg-tertiary: #1a1a1a; --bg-elevated: #262626; --text-primary: #fafafa; --text-secondary: #a3a3a3; --text-muted: #737373; \/* Accent gradients *\/ --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --gradient-warm: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); --gradient-cool: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); --gradient-sunset: linear-gradient(135deg, #fa709a 0%, #fee140 100%); \/* Glow effects *\/ --glow-primary: 0 0 40px rgba(139, 92, 246, 0.3); --glow-success: 0 0 40px rgba(34, 197, 94, 0.3); --glow-warning: 0 0 40px rgba(234, 179, 8, 0.3); \/* ═══════════════════════════════════════════════════════════ VIBRANT ACCENTS ═══════════════════════════════════════════════════════════ *\/ --accent-violet: #8b5cf6; --accent-fuchsia: #d946ef; --accent-cyan: #06b6d4; --accent-emerald: #10b981; --accent-amber: #f59e0b; --accent-rose: #f43f5e; } \/* Aurora\/Mesh Gradient Background *\/ .aurora-bg { background: radial-gradient(ellipse at 20% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(6, 182, 212, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 40% 40%, rgba(244, 63, 94, 0.1) 0%, transparent 50%), #0a0a0a; } ``` --- ### 5. Premium Typography ```css \/* Font imports *\/ @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap'); @import url('https:\/\/fonts.googleapis.com\/css2?family=Cal+Sans&display=swap'); :root { \/* Type scale (modular scale 1.25) *\/ --text-xs: 0.75rem; \/* 12px *\/ --text-sm: 0.875rem; \/* 14px *\/ --text-base: 1rem; \/* 16px *\/ --text-lg: 1.125rem; \/* 18px *\/ --text-xl: 1.25rem; \/* 20px *\/ --text-2xl: 1.5rem; \/* 24px *\/ --text-3xl: 1.875rem; \/* 30px *\/ --text-4xl: 2.25rem; \/* 36px *\/ --text-5xl: 3rem; \/* 48px *\/ --text-6xl: 4rem; \/* 64px *\/ \/* Font weights *\/ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-black: 800; \/* Line heights *\/ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75; \/* Letter spacing *\/ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.05em; } \/* Hero heading *\/ .hero-heading { font-family: 'Cal Sans', 'Inter', sans-serif; font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; background: linear-gradient(135deg, #fff 0%, #a3a3a3 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } \/* Gradient text *\/ .gradient-text { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } ``` --- ### 6. Premium Button Styles ```tsx \/\/ Button variants with modern aesthetics interface ButtonProps extends React.ButtonHTMLAttributes { variant?: 'primary' | 'secondary' | 'ghost' | 'gradient' | 'glow'; size?: 'sm' | 'md' | 'lg'; } export function Button({ variant = 'primary', size = 'md', className, children, ...props }: ButtonProps) { const variants = { primary: 'bg-white text-black hover:bg-gray-100', secondary: 'bg-white\/10 text-white border border-white\/20 hover:bg-white\/20', ghost: 'text-white hover:bg-white\/10', gradient: 'bg-gradient-to-r from-violet-600 to-fuchsia-600 text-white hover:opacity-90', glow: ` bg-violet-600 text-white shadow-[0_0_20px_rgba(139,92,246,0.5)] hover:shadow-[0_0_30px_rgba(139,92,246,0.7)] `, }; const sizes = { sm: 'px-3 py-1.5 text-sm rounded-lg', md: 'px-4 py-2.5 text-sm rounded-xl', lg: 'px-6 py-3 text-base rounded-xl', }; return (

Build something extraordinary<\/span> <\/h1> <\/FadeUp> The modern platform for building beautiful, performant web applications. <\/p> <\/FadeUp>

Build something
extraordinary<\/span> <\/h1> <\/FadeUp>
The modern platform for building beautiful, performant web applications. <\/p> <\/FadeUp>