Design System Showcase
A living demonstration of our magical design language
Color Palette
Primary
--accent-primary
Cyan
--accent-cyan
Success
--status-success
Warning
--status-warning
Error
--status-error
Typography Scale
Hero Headline (4XL)
Page Title (3XL)
Section Title (2XL)
Subheading (XL)
Emphasized Text (LG)
Body Text (Base)
Small Text (SM)
Buttons
Cards & Panels
✨
Standard Card
A beautiful card with hover lift effect and gradient overlay.
🔮
Glass Card
Uses glass morphism for a modern, translucent appearance.
⚡
Animated Border
Hover to see the magical gradient border animation.
Form Elements
Shadow Scale
Small
Medium
Large
X-Large
Glow
Magical
Animations
Float
Pulse Glow
Shimmer
Loading States
Spacing Scale
XS (4px)
SM (8px)
MD (12px)
LG (16px)
XL (24px)
2XL (32px)