Design System v1.0
Glassmorphism Aesthetic
A comprehensive design system featuring frosted glass effects, modern components, and beautiful interactions. Built with accessibility in mind.
Color System
Primary
#667eea
Secondary
#764ba2
Accent Cyan
#4facfe
Accent Pink
#f093fb
Success
#00FA9A
Error
#FF6B6B
Typography
Display XL
The quick brown fox
Display
The quick brown fox
Heading 1
The quick brown fox jumps
Heading 2
The quick brown fox jumps over
Body Large
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Body
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Caption
The quick brown fox jumps over the lazy dog.
Buttons
Button Variants
Different styles for different contexts
Button Sizes
Small, medium, and large options
Button States
Loading and disabled states
Icon Buttons
Compact icon-only buttons
Form Elements
Text Inputs
Various input field styles
We'll never share your email.
This field is required
Input Variations
Icons and different states
Textarea
Multi-line text input
Maximum 500 characters
Selection Controls
Dropdowns, checkboxes, and radios
Preferences
Plan Type
Cards
Default Card
Standard glass effect with moderate blur.
Subtle Card
Minimal glass effect for subtle emphasis.
Prominent Card
Strong glass effect for key content.
Dark Card
Dark variant for contrast.
Feature Cards
Layered Design
Create depth with multiple glass layers that reveal content beneath.
Accessible
WCAG 2.1 AA compliant with proper contrast ratios and focus states.
Responsive
Optimized blur effects for all devices with fallbacks for older browsers.
Stat Cards
98%
Uptime
↑ 2.5%
2.4K
Active Users
↑ 12%
156
Components
↑ 8%
4.9
Rating
↑ 0.3%
Feedback Components
Alerts
Contextual feedback messages
Success!
Your changes have been saved successfully.
Warning
Your session will expire in 5 minutes.
Error
Failed to save changes. Please try again.
Information
A new version is available for download.
Interactive Feedback
Toasts and modals
Click the buttons below to see toast notifications and modal dialogs in action.
Badges
Status indicators and labels
DefaultSuccessWarningErrorInfo
Loading States
Spinners and skeletons
Tabs & Navigation
Welcome to GlassUI
A modern design system built with glassmorphism aesthetics. Features beautiful frosted glass effects, smooth animations, and full accessibility support.
Gradient Backgrounds
Vibrant
Ocean
Sunset
Northern
Midnight
Aurora