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

---

# Glassmorphism Design System

> Premium frosted glass with a nocturne temperament. Deep ink scenes and restrained light wells; the glass borrows light instead of carrying color — gaussian blur, saturation boost, lit top edges and film grain make glass that feels believable, not decorative.

## Design Philosophy

Glassmorphism is optics, not a color scheme. Real glass has no color of its own — it borrows, bends and softens the light behind it. Apple's Liquid Glass material follows the same principle: glass takes color from the content layer and stays neutral itself.

Core principles:
- Colorless glass: Panels use only low-opacity white (5%-12%); every color comes from the scene behind
- Deep night scenes: Near-black ink backgrounds with a few soft light wells give the glass something to refract
- Light has direction: A lit top edge (inset highlight) and shaded bottom edge (inset shadow) separate real glass from "translucent rectangles"
- One accent: Champagne gold #E4B863 appears only on primary actions and highlights, never as a surface color
- Film grain: A 2%-3% noise overlay removes the plastic feel
- Fluid motion: All transitions use spring easing to simulate glass physical inertia

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-white/15
Radius: rounded-3xl
```

### Shadow
```
sm: shadow-[0_2px_8px_rgba(3,7,18,0.35),inset_0_1px_0_rgba(255,255,255,0.18)]
md: shadow-[0_8px_24px_rgba(3,7,18,0.45),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-1px_0_rgba(2,6,16,0.3)]
lg: shadow-[0_16px_48px_rgba(3,7,18,0.55),0_0_0_1px_rgba(255,255,255,0.08),inset_0_1px_0_rgba(255,255,255,0.25),inset_0_-1px_0_rgba(2,6,16,0.35)]
hover: hover:shadow-[0_20px_60px_rgba(3,7,18,0.65),0_0_0_1px_rgba(255,255,255,0.12),inset_0_1px_0_rgba(255,255,255,0.32)]
focus: focus:shadow-[0_0_0_3px_rgba(228,184,99,0.18),0_8px_24px_rgba(3,7,18,0.45)]
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:bg-white/15
Transition: transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
Active: active:scale-[0.97]
```

### Typefaces
```
Heading: font-semibold text-white
Body: text-white/80
Mono: font-mono text-white/85
```

### Type scale
```
Hero: text-4xl md:text-6xl
H1: text-3xl md:text-5xl
H2: text-2xl md:text-3xl
H3: text-xl md:text-2xl
Body: text-sm md:text-base
Small: text-xs
```

### Spacing
```
Section: py-16 md:py-24
Container: px-6 md:px-8
Card: p-6 md:p-8
Gap sm: gap-4
Gap md: gap-6
Gap lg: gap-8
```

### Color roles
```
Background primary: bg-white/8 backdrop-blur-[40px] backdrop-saturate-[180%]
Background secondary: bg-white/12 backdrop-blur-[60px] backdrop-saturate-[180%]
Background accent: bg-[radial-gradient(640px_circle_at_85%_10%,rgba(124,156,196,0.25),transparent_60%),radial-gradient(560px_circle_at_10%_90%,rgba(51,81,122,0.3),transparent_60%)] bg-[#0B1322], bg-[radial-gradient(640px_circle_at_80%_15%,rgba(201,143,78,0.22),transparent_60%),radial-gradient(560px_circle_at_12%_88%,rgba(92,58,30,0.35),transparent_60%)] bg-[#120D0A], bg-[radial-gradient(640px_circle_at_85%_12%,rgba(127,182,158,0.2),transparent_60%),radial-gradient(560px_circle_at_10%_88%,rgba(31,77,58,0.35),transparent_60%)] bg-[#081210]
Text primary: text-white
Text secondary: text-white/80
Text muted: text-white/50
Button primary: bg-white/12 text-white backdrop-blur-[40px] backdrop-saturate-[180%]
Button secondary: bg-white/6 text-white/85 backdrop-blur-[30px] backdrop-saturate-[160%]
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `rounded-none`
- `rounded-sm`
- `rounded`
- `bg-white`
- `bg-black`
- `bg-gray-100`
- `bg-gray-900`
- `shadow-none`
- `backdrop-blur-sm`
- `backdrop-blur`
- `duration-100`
- `duration-150`
- `border-black`
- `border-gray-500`
- `from-indigo-600`
- `via-purple-600`
- `to-pink-500`

### Banned patterns
- matches `^rounded-none`
- matches `^rounded-sm$`
- matches `^rounded$`
- matches `^bg-(?!white\/|gradient|\[|transparent)`
- matches `^border-(?!white\/|\[)`
- matches `^backdrop-blur$`
- matches `^backdrop-blur-sm$`
- matches `^duration-(100|150)$`

### Why they are banned
- `rounded-none`: Glassmorphism requires large rounded corners (rounded-2xl or rounded-3xl)
- `rounded-sm`: Glassmorphism requires large rounded corners (rounded-2xl or rounded-3xl)
- `rounded`: Glassmorphism requires large rounded corners (rounded-2xl or rounded-3xl)
- `bg-white`: Glassmorphism uses semi-transparent surfaces (bg-white/5 to bg-white/12)
- `bg-black`: Glassmorphism requires semi-transparent surfaces, not opaque colors
- `backdrop-blur-sm`: Glassmorphism requires high blur (backdrop-blur-[40px] or higher)
- `backdrop-blur`: Glassmorphism requires high blur (backdrop-blur-[40px] or higher)
- `duration-100`: Glassmorphism uses fluid animations (duration-500 with spring easing)
- `duration-150`: Glassmorphism uses fluid animations (duration-500 with spring easing)
- `border-black`: Glassmorphism uses luminous white borders (border-white/15 to border-white/35)
- `from-indigo-600`: The purple-pink AI gradient is the exact cliche this style rejects; use deep night scenes with light wells
- `via-purple-600`: The purple-pink AI gradient is the exact cliche this style rejects; use deep night scenes with light wells
- `to-pink-500`: The purple-pink AI gradient is the exact cliche this style rejects; use deep night scenes with light wells

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
bg-white/10 backdrop-blur-[40px] backdrop-saturate-[180%]
border border-white/20
rounded-2xl
text-white
shadow-[0_4px_16px_rgba(3,7,18,0.45),inset_0_1px_0_rgba(255,255,255,0.25),inset_0_-1px_0_rgba(2,6,16,0.3)]
hover:bg-white/15 hover:border-white/35 hover:shadow-[0_10px_32px_rgba(3,7,18,0.55),inset_0_1px_0_rgba(255,255,255,0.35)]
hover:-translate-y-0.5
transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
```

### Every card must include
```
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)]
[background-image:linear-gradient(to_bottom,rgba(255,255,255,0.12),transparent_50%)]
```

### Every input must include
```
bg-white/6 backdrop-blur-[40px] backdrop-saturate-[180%]
border border-white/15
rounded-2xl
text-white placeholder-white/35
shadow-[inset_0_1px_0_rgba(255,255,255,0.15),inset_0_-1px_0_rgba(2,6,16,0.3)]
focus:outline-none focus:border-white/35 focus:bg-white/10
focus:shadow-[0_0_0_3px_rgba(228,184,99,0.15),inset_0_1px_0_rgba(255,255,255,0.25)]
transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
```

---

## [COMPARE] Glassmorphism wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
 Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="bg-white/10 backdrop-blur-[40px] backdrop-saturate-[180%] border border-white/20 rounded-2xl text-white shadow-[0_4px_16px_rgba(3,7,18,0.45),inset_0_1px_0_rgba(255,255,255,0.25),inset_0_-1px_0_rgba(2,6,16,0.3)] hover:bg-white/15 hover:border-white/35 hover:shadow-[0_10px_32px_rgba(3,7,18,0.55),inset_0_1px_0_rgba(255,255,255,0.35)] hover:-translate-y-0.5 transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] bg-white/12 text-white backdrop-blur-[40px] backdrop-saturate-[180%]">
 Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
 <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="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)] [background-image:linear-gradient(to_bottom,rgba(255,255,255,0.12),transparent_50%)] p-6 md:p-8">
 <h3 class="font-semibold text-white text-xl md:text-2xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="bg-white/6 backdrop-blur-[40px] backdrop-saturate-[180%] border border-white/15 rounded-2xl text-white placeholder-white/35 shadow-[inset_0_1px_0_rgba(255,255,255,0.15),inset_0_-1px_0_rgba(2,6,16,0.3)] focus:outline-none focus:border-white/35 focus:bg-white/10 focus:shadow-[0_0_0_3px_rgba(228,184,99,0.15),inset_0_1px_0_rgba(255,255,255,0.25)] transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Glassmorphism page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-white/8 backdrop-blur-[40px] backdrop-saturate-[180%] text-white border border-white/15 px-6 md:px-8">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-6">
 <a href="/" class="font-semibold text-white text-xl md:text-2xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-6 text-white/80 text-xs">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-[radial-gradient(640px_circle_at_85%_10%,rgba(124,156,196,0.25),transparent_60%),radial-gradient(560px_circle_at_10%_90%,rgba(51,81,122,0.3),transparent_60%)] bg-[#0B1322] text-white py-16 md:py-24 px-6 md:px-8">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-semibold text-white text-4xl md:text-6xl">
 {HEADLINE}
 </h1>
 <p class="text-white/80 text-sm md:text-base max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="bg-white/10 backdrop-blur-[40px] backdrop-saturate-[180%] border border-white/20 rounded-2xl text-white shadow-[0_4px_16px_rgba(3,7,18,0.45),inset_0_1px_0_rgba(255,255,255,0.25),inset_0_-1px_0_rgba(2,6,16,0.3)] hover:bg-white/15 hover:border-white/35 hover:shadow-[0_10px_32px_rgba(3,7,18,0.55),inset_0_1px_0_rgba(255,255,255,0.35)] hover:-translate-y-0.5 transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] bg-white/12 text-white backdrop-blur-[40px] backdrop-saturate-[180%]">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-white/8 backdrop-blur-[40px] backdrop-saturate-[180%] text-white py-16 md:py-24 px-6 md:px-8">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-semibold text-white text-2xl md:text-3xl">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 <!-- Card template - repeat for each card -->
 <div class="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)] [background-image:linear-gradient(to_bottom,rgba(255,255,255,0.12),transparent_50%)] p-6 md:p-8">
 <h3 class="font-semibold text-white text-xl md:text-2xl">{CARD_TITLE}</h3>
 <p class="text-white/80 text-sm md:text-base text-white/50">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="bg-white/6 backdrop-blur-[40px] backdrop-saturate-[180%] border border-white/15 rounded-2xl text-white placeholder-white/35 shadow-[inset_0_1px_0_rgba(255,255,255,0.15),inset_0_-1px_0_rgba(2,6,16,0.3)] focus:outline-none focus:border-white/35 focus:bg-white/10 focus:shadow-[0_0_0_3px_rgba(228,184,99,0.15),inset_0_1px_0_rgba(255,255,255,0.25)] transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-white/12 backdrop-blur-[60px] backdrop-saturate-[180%] text-white/80 py-16 md:py-24 px-6 md:px-8">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div>
 <span class="font-semibold text-white text-xl md:text-2xl">{LOGO_TEXT}</span>
 <p class="text-white/80 text-xs">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-semibold text-white text-xl md:text-2xl">{COLUMN_TITLE}</h4>
 <ul class="text-white/80 text-xs">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] Glassmorphism post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `bg-white/10 backdrop-blur-[40px] backdrop-saturate-[180%] border border-white/20 rounded-2xl text-white shadow-[0_4px_16px_rgba(3,7,18,0.45),inset_0_1px_0_rgba(255,255,255,0.25),inset_0_-1px_0_rgba(2,6,16,0.3)] hover:bg-white/15 hover:border-white/35 hover:shadow-[0_10px_32px_rgba(3,7,18,0.55),inset_0_1px_0_rgba(255,255,255,0.35)] hover:-translate-y-0.5 transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]`
- [ ] Card includes: `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)] [background-image:linear-gradient(to_bottom,rgba(255,255,255,0.12),transparent_50%)]`
- [ ] Input includes: `bg-white/6 backdrop-blur-[40px] backdrop-saturate-[180%] border border-white/15 rounded-2xl text-white placeholder-white/35 shadow-[inset_0_1px_0_rgba(255,255,255,0.15),inset_0_-1px_0_rgba(2,6,16,0.3)] focus:outline-none focus:border-white/35 focus:bg-white/10 focus:shadow-[0_0_0_3px_rgba(228,184,99,0.15),inset_0_1px_0_rgba(255,255,255,0.25)] transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]`

### Forbidden check
- [ ] Not using `rounded-none`
- [ ] Not using `rounded-sm`
- [ ] Not using `rounded`
- [ ] Not using `bg-white`
- [ ] Not using `bg-black`
- [ ] Not using `bg-gray-100`
- [ ] Not using `bg-gray-900`
- [ ] Not using `shadow-none`

### Style rule check
- [ ] Use a deep ink night base (like #0B1322) with 2-3 soft large-radius light wells (radial gradients)
- [ ] Glass panels use bg-white/5 to bg-white/12 with backdrop-blur-[40px] or backdrop-blur-[60px]
- [ ] Add saturation boost backdrop-saturate-[180%]
- [ ] Give light a direction: inset 0 1px 0 white highlight (lit top edge) + inset 0 -1px 0 dark shade (bottom edge) + outer depth shadow
- [ ] Overlay 2%-3% film grain (SVG feTurbulence) to remove the plastic feel

### Style drift check
- [ ] Does not violate: Do not use purple-pink AI gradients (#667eea, #764ba2, #f093fb style indigo-purple-pink combos)
- [ ] Does not violate: Do not use glass on flat solid backgrounds (needs light wells or imagery to blur)
- [ ] Does not violate: Do not exceed 15% glass opacity (it becomes a solid tinted block, not glass)
- [ ] Does not violate: Do not use low blur values backdrop-blur-sm or backdrop-blur
- [ ] Does not violate: Do not omit backdrop-saturate (the boost makes dark-scene lights glow through the glass)

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Glassmorphism

---

## [EXAMPLES] Example prompts

### 1. 

```
Create a nocturne glassmorphism dashboard with:
1. Background: deep ink #0B1322 with three soft radial light wells — rgba(124,156,196,0.28) top right, rgba(51,81,122,0.35) bottom left, rgba(228,184,99,0.12) center accent
2. Film grain: full-viewport 2.5% SVG feTurbulence noise overlay
3. Top nav: fixed, bg-white/6 backdrop-blur-[60px] backdrop-saturate-[180%], border-b border-white/10
4. Stat cards: bg-white/8 backdrop-blur-[60px], directional shadows (outer depth + inset top highlight + inset bottom shade), key numbers in champagne #E4B863, hover lift
5. Chart area: large colorless glass panel; chart line in moonlight #7C9CC4 with champagne highlight point
6. All transitions: duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
7. Specular sweep on card hover; NO purple-pink gradients anywhere
```

### 2. 

```
Create a nocturne glassmorphism login page with:
1. Background: near-black #060A13 to #0B1322, one moonlight well rgba(124,156,196,0.25) upper right, one faint champagne well rgba(228,184,99,0.1) lower left, 2.5% film grain
2. Login card: centered, bg-white/8 backdrop-blur-[60px] backdrop-saturate-[180%], rounded-3xl, shadow with inset top highlight and inset bottom shade
3. Inner luminance: gradient overlay from-white/12 to transparent at top
4. Inputs: bg-white/6, inset shade, focus ring rgba(228,184,99,0.15)
5. Submit button: the ONLY champagne element — bg-[#E4B863]/15 border-[#E4B863]/40 text-[#F3DCA8]
6. Serif display headline (e.g. Playfair Display) over the glass for editorial luxury
7. All corners rounded-2xl or rounded-3xl, spring easing transitions
```

### 3. 

```
Create a nocturne glassmorphism music player with:
1. Background: blurred album art darkened with a rgba(6,10,19,0.6) scrim so the glass stays readable, plus 2.5% film grain
2. Player card: bg-white/8 backdrop-blur-[60px] backdrop-saturate-[180%], rounded-3xl, directional shadows
3. Album art: rounded-2xl with border-white/15 frame and inset top highlight
4. Controls: colorless glass buttons; the play button is the single champagne accent (#E4B863/15 fill, #F3DCA8 icon)
5. Progress bar: glass track bg-white/8; fill in moonlight #7C9CC4; thumb with champagne ring on drag
6. Playlist: glass sidebar with hover-highlighted rows (hover:bg-white/8)
7. All transitions spring easing; NO purple-pink gradients
```

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