Glassmorphism

Frosted glass effects, soft shadows, and vibrant gradients. A design system built on transparency and depth.

01 / Colors

Color Palette

Accent Gradient
#667eea → #764ba2
Primary
#667eea
Secondary
#764ba2
Accent
#f093fb
Glass
rgba(255,255,255,0.08)

02 / Typography

Type Scale

Display / 48px / Bold
Beautiful clarity
Heading / 32px / Semibold
Section heading
Subheading / 20px / Medium
Supporting text
Body / 16px / Regular
The quick brown fox jumps over the lazy dog. Inter is a carefully crafted open source typeface designed for computer screens.
Small / 14px / Regular
Captions, labels, and secondary information

03 / Spacing

Spacing Scale

4px
8px
16px
24px
32px
48px
64px

04 / Components

Buttons

Primary buttons feature gradient backgrounds with hover shine effects.

05 / Forms

Input Fields

06 / Cards

Card Components

✨

Frosted Glass

Cards use backdrop blur to create depth and visual hierarchy against the gradient background.

⚡

Subtle Motion

Hover interactions with smooth transitions create a responsive, tactile experience.

🎨

Vibrant Colors

Gradient accents and floating orbs add energy without overwhelming the interface.

07 / Badges

Status Indicators

Default Primary Online Pending

Avatar Stack

JD
AS
MK
+5

08 / Feedback

Alerts

ℹ
Information
Glass effects work best on colorful or gradient backgrounds.
✔
Success
Your changes have been saved successfully.
⚠
Warning
Backdrop-filter has limited support in some browsers.

09 / Controls

Progress & Toggles

Upload Progress 73%
Storage Used 45%

Toggles

Enable notifications
Dark mode

Slider