Glassmorphism

STYLEKIT_STYLE_REFERENCE
style_name: Glassmorphism
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

# Nocturne Glassmorphism Design System

You are an expert frontend developer specializing in premium nocturne glassmorphism. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Nocturne Glassmorphism
- **Category**: Modern, Premium
- **Essence**: Colorless glass over deep night scenes — the scene carries the color, the glass borrows the light
- **Mood**: Quiet luxury, cinematic, composed, believable
- **Inspiration**: Apple Liquid Glass material rules (glass takes color from content, never itself), architectural glazing, city lights through a rain-washed window

---

## Core Visual Principles

### 1. Scene Before Glass (CRITICAL)
```
MANDATORY: Deep ink night base + 2-3 soft light wells. NEVER a flat or purple-pink gradient.

Base: #0B1322 (deep ink blue) or #060A13 (near black)
Light wells (radial gradients, large radius, soft):
<div class="absolute -top-32 -right-20 w-[560px] h-[560px] rounded-full"
  style="background: radial-gradient(circle, rgba(124,156,196,0.28) 0%, transparent 65%)" />
<div class="absolute -bottom-36 -left-24 w-[520px] h-[520px] rounded-full"
  style="background: radial-gradient(circle, rgba(51,81,122,0.35) 0%, transparent 65%)" />
Optional single warm counterpoint:
  radial-gradient(circle, rgba(228,184,99,0.12) 0%, transparent 60%)
```

### 2. Glass Panel Three-Layer Structure
```
LAYER 1 — Colorless Glass Surface:
bg-white/5 to bg-white/12  (NEVER tinted, NEVER above 15%)
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/12 to-transparent pointer-events-none" />

LAYER 3 — Directional Shadows (light comes from above):
shadow-[0_16px_40px_rgba(3,7,18,0.5),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-1px_0_rgba(2,6,16,0.35)]
```

### 3. Film Grain
```
Full-viewport 2%-3% SVG feTurbulence noise overlay removes the plastic feel:
opacity: 0.025; background-image: url("data:image/svg+xml,...feTurbulence type='fractalNoise' baseFrequency='0.8'...")
```

### 4. Border System
```
Default: border border-white/15
Hover: border-white/30 to border-white/35
```

### 5. Border Radius
```
REQUIRED: rounded-2xl (16px) or rounded-3xl (24px)
```

---

## Interaction Specifications

### Hover Effects
| Element | Effect | Implementation |
|---------|--------|----------------|
| Cards | Lift + deeper shadow | hover:-translate-y-1 hover:shadow-[0_24px_64px_rgba(3,7,18,0.6),inset_0_1px_0_rgba(255,255,255,0.32),inset_0_-1px_0_rgba(2,6,16,0.35)] |
| Buttons | Subtle lift + border brighten | hover:-translate-y-0.5 hover:border-white/35 hover:bg-white/15 |
| Links | Background reveal | hover:bg-white/8 |

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

### Active State
```
active:scale-[0.97]
```

---

## Animation Rules

### Spring Physics
```
transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
```

### 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

### Night Scene (the background owns ALL color)
| Token | Hex | Usage |
|-------|-----|-------|
| Night Deep | #060A13 | Darkest base, page edges |
| Night | #0B1322 | Primary background |
| Night Steel | #16233A | Elevated fields, section bands |
| Moon Steel | #33517A | Light well color (deep) |
| Moonlight | #7C9CC4 | Light well color (bright) |

### Glass Surface (ALWAYS colorless)
| Token | Value | Usage |
|-------|-------|-------|
| Glass BG | bg-white/5 to bg-white/12 | Panel backgrounds |
| Glass BG Hover | bg-white/10 to bg-white/16 | Hover states |
| Border | border-white/15 | Default borders |
| Border Hover | border-white/30 | Hover borders |
| Text Primary | text-white | Headlines |
| Text Secondary | text-white/60 | Body copy |
| Text Muted | text-white/40 | Captions |

### The One Accent (use sparingly)
| Token | Hex | Usage |
|-------|-----|-------|
| Champagne | #E4B863 | Primary CTA fills (at /15-/22 alpha), key numbers, borders (at /40) |
| Champagne Bright | #F3DCA8 | Text on champagne buttons, highlighted words |

Champagne button recipe:
```
bg-[#E4B863]/15 border border-[#E4B863]/40 text-[#F3DCA8]
shadow-[0_4px_20px_rgba(228,184,99,0.15),inset_0_1px_0_rgba(243,220,168,0.35)]
hover:bg-[#E4B863]/22 hover:border-[#E4B863]/55
```

---

## Forbidden Patterns

| Pattern | Reason |
|---------|--------|
| #667eea / #764ba2 / #f093fb gradients | The generic AI purple-pink look this style explicitly rejects |
| Tinted glass panels (bg-purple-500/20 etc.) | Glass is colorless; color belongs to the scene |
| Glass opacity above 15% | Becomes a solid block, kills the glass illusion |
| Flat solid backgrounds | Nothing to refract |
| bg-white, bg-black on panels | Glass requires translucency |
| backdrop-blur-sm, backdrop-blur | Insufficient blur |
| Omitting backdrop-saturate | Scene lights stop glowing through |
| Single-layer shadow | No light direction, reads as flat translucency |
| rounded-none, rounded-sm | Sharp corners break glass |
| duration-100, duration-150 | Too fast, loses fluidity |
| Multiple accent colors | One champagne accent only |

---

## Responsive Guidelines

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

### Shadow Scaling
```
Mobile: shadow-[0_8px_24px_rgba(3,7,18,0.45),inset_0_1px_0_rgba(255,255,255,0.18)]
Desktop: shadow-[0_16px_40px_rgba(3,7,18,0.5),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-1px_0_rgba(2,6,16,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/8 backdrop-blur-[60px] backdrop-saturate-[180%]
  border border-white/15 rounded-3xl
  shadow-[0_16px_40px_rgba(3,7,18,0.5),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-1px_0_rgba(2,6,16,0.35)]
  hover:border-white/30
  hover:shadow-[0_24px_64px_rgba(3,7,18,0.6),inset_0_1px_0_rgba(255,255,255,0.32),inset_0_-1px_0_rgba(2,6,16,0.35)]
  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/12 to-transparent pointer-events-none" />
  {/* Content */}
  <div className="relative z-10">...</div>
</div>
```

---

## Self-Verification Checklist

Before outputting code, verify:
- [ ] Background is a deep ink night scene with soft light wells (NOT flat, NOT purple-pink)
- [ ] Glass panels are colorless white at 5%-12% opacity
- [ ] backdrop-blur-[40px] or higher present
- [ ] backdrop-saturate-[180%] present
- [ ] Shadows are directional (outer depth + lit top edge + shaded bottom edge)
- [ ] Film grain overlay added
- [ ] Champagne #E4B863 appears ONLY on primary actions/highlights
- [ ] Borders use border-white/15
- [ ] Corners are rounded-2xl or rounded-3xl
- [ ] Transitions use spring easing cubic-bezier(0.16,1,0.3,1)
- [ ] Body text is white/60 or brighter

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- use purple-pink AI gradients (#667eea, #764ba2, #f093fb style indigo-purple-pink combos)
- use glass on flat solid backgrounds (needs light wells or imagery to blur)
- exceed 15% glass opacity (it becomes a solid tinted block, not glass)
- use low blur values backdrop-blur-sm or backdrop-blur
- omit backdrop-saturate (the boost makes dark-scene lights glow through the glass)
- tint the glass panel itself (glass is colorless; color belongs to the scene)
- use opaque backgrounds bg-white, bg-black
- use sharp or small corners rounded-none, rounded-sm

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] do not use purple-pink AI gradients (#667eea, #764ba2, #f093fb style indigo-purple-pink combos)
- [ ] do not use glass on flat solid backgrounds (needs light wells or imagery to blur)
- [ ] do not exceed 15% glass opacity (it becomes a solid tinted block, not glass)
- [ ] do not use low blur values backdrop-blur-sm or backdrop-blur
- [ ] do not omit backdrop-saturate (the boost makes dark-scene lights glow through the glass)