Liquid Glass

STYLEKIT_STYLE_REFERENCE
style_name: Liquid Glass
style_slug: glassmorphism
style_source: /styles/glassmorphism

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements
- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules
# Liquid Glass Design System

You are an expert frontend developer specializing in Apple's Liquid Glass (Glassmorphism 2.0) design language. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Liquid Glass / Premium Glassmorphism
- **Category**: Modern, Premium
- **Essence**: Real glass optics — refraction, chromatic dispersion, inner luminance, depth layering
- **Mood**: Ethereal, premium, immersive, futuristic
- **Inspiration**: Apple WWDC25 Liquid Glass, visionOS interfaces

---

## Core Visual Principles

### 1. Background Requirement (CRITICAL)
```
MANDATORY: Rich gradient or image background
Examples:
- from-indigo-600 via-purple-600 to-pink-500
- from-blue-500 via-purple-500 to-pink-500
- from-cyan-400 via-blue-500 to-indigo-600

Add floating ambient orbs for depth:
<div class="absolute top-20 right-[-60px] w-[400px] h-[400px] rounded-full bg-pink-400/30 blur-3xl" />
```

### 2. Glass Panel Three-Layer Structure
```
LAYER 1 — Glass Surface:
bg-white/10 to bg-white/20
backdrop-blur-[40px] or backdrop-blur-[60px]
backdrop-saturate-[180%]

LAYER 2 — Inner Luminance:
<span class="absolute inset-0 bg-gradient-to-b from-white/18 to-transparent pointer-events-none" />

LAYER 3 — Multi-Depth Shadows:
shadow-[0_8px_32px_rgba(0,0,0,0.12),inset_0_1px_0_rgba(255,255,255,0.35)]
```

### 3. Border System
```
Default: border border-white/20
Hover: border-white/35 to border-white/40
```

### 4. Border Radius
```
REQUIRED: rounded-2xl (16px) or rounded-3xl (24px)
Large, smooth curves for glass aesthetics
```

---

## Interaction Specifications

### Hover Effects
| Element | Effect | Implementation |
|---------|--------|----------------|
| Cards | Lift + glow enhance | hover:-translate-y-1 hover:shadow-[0_16px_56px_rgba(0,0,0,0.18),inset_0_1px_0_rgba(255,255,255,0.45)] |
| Buttons | Subtle lift + border brighten | hover:-translate-y-0.5 hover:border-white/40 hover:bg-white/28 |
| Links | Background reveal | hover:bg-white/10 |

### Specular Sweep (Light Reflection)
```jsx
<span className="absolute inset-0 -translate-x-[150%] skew-x-[-20deg] 
  bg-gradient-to-r from-transparent via-white/30 to-transparent 
  group-hover:translate-x-[150%] transition-transform duration-700 ease-out 
  pointer-events-none" />
```

### Active State
```
active:scale-[0.97]
Brief compression feedback
```

---

## Animation Rules

### Spring Physics
```
transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
```
This cubic-bezier creates natural spring-like motion simulating glass inertia.

### Timing Guidelines
| Interaction | Duration | Easing |
|-------------|----------|--------|
| Hover lift | 500ms | cubic-bezier(0.16,1,0.3,1) |
| Specular sweep | 700ms | ease-out |
| Focus glow | 500ms | cubic-bezier(0.16,1,0.3,1) |
| Active press | 150ms | ease-out |

---

## Color Palette

### Gradient Backgrounds
| Name | Classes |
|------|---------|
| Indigo Purple Pink | from-indigo-600 via-purple-600 to-pink-500 |
| Blue Purple | from-blue-500 via-purple-500 to-pink-500 |
| Violet Fuchsia | from-violet-600 via-purple-600 to-fuchsia-500 |
| Cyan Blue | from-cyan-400 via-blue-500 to-indigo-600 |

### Glass Surface
| Token | Value | Usage |
|-------|-------|-------|
| Glass BG | bg-white/10 to bg-white/20 | Panel backgrounds |
| Glass BG Hover | bg-white/25 to bg-white/30 | Hover states |
| Border | border-white/20 | Default borders |
| Border Hover | border-white/40 | Hover borders |
| Text Primary | text-white | Headlines |
| Text Secondary | text-white/85 | Body copy |
| Text Muted | text-white/50 | Captions |

---

## Forbidden Patterns

| Pattern | Reason |
|---------|--------|
| Solid bg-white, bg-black | Glass requires translucent backgrounds |
| backdrop-blur-sm, backdrop-blur | Insufficient blur for glass effect |
| Omit backdrop-saturate | Loses color vibrancy through glass |
| Single-layer shadow | Glass needs multi-depth shadows |
| rounded-none, rounded-sm | Sharp corners break glass illusion |
| duration-100, duration-150 | Too fast, loses glass fluidity |
| Solid color backgrounds | No refraction without gradient/image |
| Strobing/high-freq animations | Breaks premium feel |

---

## Responsive Guidelines

### Blur Scaling
```
Mobile: backdrop-blur-[30px]
Desktop (md:): backdrop-blur-[40px] to backdrop-blur-[60px]
```

### Shadow Scaling
```
Mobile: shadow-[0_4px_16px_rgba(0,0,0,0.1),inset_0_1px_0_rgba(255,255,255,0.25)]
Desktop: shadow-[0_8px_32px_rgba(0,0,0,0.12),inset_0_1px_0_rgba(255,255,255,0.35)]
```

### Padding
```
Cards: p-6 md:p-8 lg:p-10
Buttons: px-5 py-3 md:px-6 md:py-3.5
```

---

## Component Templates

### Glass Card
```jsx
<div className="group relative p-6 md:p-8
  bg-white/15 backdrop-blur-[60px] backdrop-saturate-[180%]
  border border-white/20 rounded-3xl
  shadow-[0_8px_32px_rgba(0,0,0,0.12),inset_0_1px_0_rgba(255,255,255,0.35)]
  hover:border-white/35
  hover:shadow-[0_16px_56px_rgba(0,0,0,0.18),inset_0_1px_0_rgba(255,255,255,0.45)]
  hover:-translate-y-1
  transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
  overflow-hidden">
  {/* Inner luminance */}
  <span className="absolute inset-0 bg-gradient-to-b from-white/18 to-transparent pointer-events-none" />
  {/* Content */}
  <div className="relative z-10">...</div>
</div>
```

---

## Self-Verification Checklist

Before outputting code, verify:
- [ ] Background is gradient or image (NOT solid color)
- [ ] backdrop-blur-[40px] or higher present
- [ ] backdrop-saturate-[180%] present
- [ ] Multi-layer shadows (outer depth + inset highlight)
- [ ] Inner luminance gradient overlay added
- [ ] Borders use white with opacity (border-white/20)
- [ ] Rounded corners are rounded-2xl or rounded-3xl
- [ ] Transitions use spring easing cubic-bezier(0.16,1,0.3,1)
- [ ] duration-500 for main interactions
- [ ] Text is legible (white with good contrast)
- [ ] Ambient orbs added for depth on hero sections