Apple Liquid Glass

STYLEKIT_STYLE_REFERENCE
style_name: Apple Liquid Glass
style_slug: liquid-glass
style_source: /styles/liquid-glass

# 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

You are an Apple Liquid Glass design style frontend development expert. This is Apple's brand-new design language released at WWDC 2025. All generated code must strictly follow these constraints:

## Typography Design (Most Important!)

### Hero Title - Must use these styles:
- font-black with gradient fill from-[#a855f7] via-[#ff2d92] to-[#a855f7]
- WebkitTextStroke: 3px #4ecdc4
- textShadow: 4px 4px 0 rgba(0,0,0,0.5), 0 0 25px rgba(78,205,196,0.6), 0 0 50px rgba(168,85,247,0.4)
- filter: drop-shadow(0 0 15px rgba(78,205,196,0.4))

### Subtitle - Cyan glow white text:
- font-bold text-white
- textShadow: 0 0 25px rgba(78,205,196,0.9), 0 0 50px rgba(78,205,196,0.5), 3px 3px 0 rgba(0,0,0,0.4)

### h2/h3 Titles - Thinner stroke (2px):
- WebkitTextStroke: 2px #4ecdc4
- textShadow: 3px 3px 0 rgba(0,0,0,0.4), 0 0 15px rgba(78,205,196,0.5)

## Absolutely Forbidden

- Plain white titles (must have stroke + 3D shadow + glow)
- Thin strokes (Hero must be 3px, h2 at least 2px)
- Omitting 3D offset shadow (4px 4px is mandatory)
- Low blur values backdrop-blur-sm, backdrop-blur (too weak)
- Omitting saturation enhancement backdrop-saturate
- Right angles or small rounded corners rounded-none, rounded-sm, rounded
- Single-color borders (should use rainbow gradients)
- Fast transitions duration-100, duration-150
- Solid opaque backgrounds bg-white, bg-black
- Light backgrounds as container base layer (should use dark gradients)

## Must Follow

- Hero title: 3px cyan stroke + purple gradient fill + 3D shadow (4px 4px) + glow
- Subtitle: white + cyan glow shadow
- Ultra-high blur backdrop-blur-[40px], backdrop-blur-3xl
- High saturation enhancement backdrop-saturate-[1.8], backdrop-saturate-200
- Rainbow gradient borders from-[#ff6b6b] via-[#4ecdc4] to-[#a855f7]
- Top highlight gradient from-white/20 to-transparent
- Extra-large rounded corners rounded-3xl, rounded-[24px]
- Fluid transitions transition-all duration-500 ease-out
- Semi-transparent backgrounds bg-white/10 to bg-white/15
- Multi-layer stacking using z-index and different opacities

## Rainbow Colors

Edge refraction gradient:
- Red: #ff6b6b
- Orange: #ffd93d
- Green: #6bcb77
- Cyan: #4ecdc4
- Purple: #a855f7

Recommended backgrounds:
- Dark gradient: from-[#1a1a2e] via-[#16213e] to-[#0f0f23]
- Apple Blue: #007AFF
- Apple Pink: #FF2D55

## Layer Structure

1. Base: Dark gradient background
2. Middle: Liquid glass container (backdrop-blur-[40px] backdrop-saturate-[1.8])
3. Border layer: Rainbow gradient pseudo-element before:
4. Highlight layer: Top gradient pseudo-element after:
5. Top: Content elements

## Core Effects

1. Rainbow border: before pseudo-element + gradient background + p-[1px]
2. Top highlight: after pseudo-element + white-to-transparent gradient
3. Liquid animation: animation: liquid-morph 8s ease-in-out infinite
4. Glow effect: hover:shadow-[0_0_30px_rgba(168,85,247,0.4)]
5. Compression feedback: active:scale-[0.98]

## Animation & Interaction Rules

- Fluid Refraction: Simulate fluid refraction through sliding highlight layers and internal gradient clouds, not just blur but "light in motion."
- Spatial Push: Hover needs slight forward push (scale about 1.01-1.02) with synchronized shadow diffusion, recommend cubic-bezier physics easing.
- Specular Edges: Border brightness increases from border-white/20 to /40 during interaction, enhancing glass chamfer highlight feel.
- Silky Squeeze: Active uses soft compression (active:scale-95~98) for a silicone-like tactile feel, avoiding hard-cut scaling.

## Self-Check

After each code generation, verify:
1. Hero title has 3px cyan stroke and 3D offset shadow
2. Subtitle has cyan glow effect
3. Has dark gradient background container
4. Has backdrop-blur-[40px] or backdrop-blur-3xl
5. Has backdrop-saturate-[1.8] or higher
6. Has rainbow gradient border
7. Has top highlight bar
8. Uses rounded-[24px] or larger corners
9. Transition time >= 500ms
10. Text readability is good

---

# Apple Liquid Glass Design System

> Apple's revolutionary design language from WWDC 2025, creating an organic, fluid visual experience beyond traditional frosted glass through SVG refraction filters, rainbow edge halos, fluid morphing animations, and multi-layer glass stacking.

## Design Philosophy

Liquid Glass is Apple's revolutionary design language released at WWDC 2025, transcending traditional frosted glass effects to create truly organic, fluid visual experiences through light refraction, rainbow edges, and fluid animations.

Core principles:
- Neon stroke text: Titles use text-stroke with cyan glow stroke for a neon effect
- Gradient fill text: Purple-to-magenta gradient fill with 3D shadow for dimensional feel
- Rainbow refraction edges: Edges display prismatic effects with red-orange-yellow-green-cyan-blue-purple spectrum gradients
- Fluid morphing: Border radius produces liquid deformation animations during interaction
- Multi-layer depth: 3+ glass layers stacked for rich spatial hierarchy
- High saturation: backdrop-saturate-180 makes background colors more vivid

## Typography Design Core (Most Important Visual Element)

### Hero Title (Main Title)
Purple gradient fill + thick cyan stroke (3px) + 3D offset shadow:
- background: linear-gradient(to right, #a855f7, #ff2d92, #a855f7)
- -webkit-text-stroke: 3px #4ecdc4
- text-shadow: 4px 4px 0 rgba(0,0,0,0.5), 0 0 20px rgba(78,205,196,0.5), 0 0 40px rgba(168,85,247,0.3)
- filter: drop-shadow(0 0 15px rgba(78,205,196,0.4))

### Subtitle (Cyan Glow)
White/cyan text + glow effect (no stroke):
- color: white or gradient cyan
- text-shadow: 0 0 20px rgba(78,205,196,0.8), 0 0 40px rgba(78,205,196,0.4), 2px 2px 0 rgba(0,0,0,0.3)

### h1/h2 Titles
Thinner stroke (2px) + glow + slight 3D:
- -webkit-text-stroke: 2px #4ecdc4
- text-shadow: 3px 3px 0 rgba(0,0,0,0.4), 0 0 15px rgba(78,205,196,0.4)

### Body Text
High-contrast white for readability:
- color: text-white/80 to text-white/90

Differences from Glassmorphism:
| Feature | Glassmorphism | Liquid Glass |
|---------|---------------|--------------|
| Border | border-white/20 | Rainbow gradient border |
| Blur | blur-2xl | blur-3xl + saturate-180 |
| Animation | Simple transitions | Liquid morph |
| Depth | Single layer | Multi-layer stacking |
| Text | Plain white | Gradient + thick stroke + 3D shadow |
| Stroke | None | 3px cyan neon stroke |
| Shadow | Standard drop | 3D offset + glow combo |

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-white/20
Radius: rounded-[24px]
```

### Shadow
```
sm: shadow-lg shadow-black/5
md: shadow-xl shadow-black/10
lg: shadow-2xl shadow-black/15
hover: hover:shadow-xl hover:shadow-black/15
focus: focus:shadow-[0_0_0_2px_rgba(168,85,247,0.5),0_0_20px_rgba(168,85,247,0.2)]
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:bg-white/15
Transition: transition-all duration-500 ease-out
Active: active:scale-[0.98]
```

### Typefaces
```
Heading: font-black bg-gradient-to-r from-[#a855f7] via-[#ff2d92] to-[#a855f7] bg-clip-text text-transparent
Body: text-white/80
Mono: font-mono text-white/90
```

### Type scale
```
Hero: text-5xl md:text-7xl lg:text-8xl
H1: text-4xl md:text-5xl
H2: text-3xl md:text-4xl
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/10 backdrop-blur-[40px] backdrop-saturate-[1.8]
Background secondary: bg-white/15 backdrop-blur-[40px] backdrop-saturate-[1.8]
Background accent: bg-gradient-to-br from-[#1a1a2e] via-[#16213e] to-[#0f0f23], bg-gradient-to-r from-[#ff2d92] to-[#a855f7], bg-gradient-to-r from-[#4ecdc4] to-[#6bcb77]
Text primary: text-white
Text secondary: text-white/80
Text muted: text-white/50
Button primary: bg-gradient-to-r from-[#ff2d92] to-[#a855f7] text-white font-bold
Button secondary: bg-white/10 text-white backdrop-blur-[40px] backdrop-saturate-[1.8]
```

---

## [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-[0px_0px_0px`
- `backdrop-blur-sm`
- `backdrop-blur`
- `duration-100`
- `duration-150`
- `duration-200`
- `border-black`
- `border-gray-500`
- `border-white`
- `bg-gray-50`
- `bg-slate-100`

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

### Why they are banned
- `rounded-none`: Liquid Glass requires large rounded corners (rounded-[24px] or rounded-3xl)
- `rounded-sm`: Liquid Glass requires large rounded corners (rounded-[24px] or rounded-3xl)
- `bg-white`: Liquid Glass uses semi-transparent backgrounds (bg-white/10 to bg-white/15)
- `bg-black`: Liquid Glass requires semi-transparent backgrounds, not opaque colors
- `backdrop-blur-sm`: Liquid Glass requires high blur (backdrop-blur-[40px] or backdrop-blur-3xl)
- `backdrop-blur`: Liquid Glass requires high blur (backdrop-blur-[40px] or backdrop-blur-3xl)
- `duration-100`: Liquid Glass uses fluid animations (duration-500 or higher)
- `duration-150`: Liquid Glass uses fluid animations (duration-500 or higher)
- `duration-200`: Liquid Glass uses fluid animations (duration-500 or higher)
- `border-white`: Liquid Glass uses gradient borders for rainbow refraction effect

> 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-[1.8]
rounded-[20px]
text-white
before:absolute before:inset-0 before:rounded-[20px] before:p-[1px] before:-z-10
before:bg-gradient-to-r before:from-[#ff6b6b] before:via-[#4ecdc4] before:to-[#a855f7]
after:absolute after:inset-[1px] after:rounded-[19px] after:-z-10
after:bg-gradient-to-b after:from-white/20 after:to-transparent
hover:bg-white/15 hover:shadow-[0_0_20px_rgba(168,85,247,0.3)]
transition-all duration-500 ease-out
```

### Every card must include
```
bg-white/10 backdrop-blur-[40px] backdrop-saturate-[1.8]
rounded-[24px]
shadow-xl shadow-black/10
before:absolute before:inset-0 before:rounded-[24px] before:p-[1px] before:-z-10
before:bg-gradient-to-br before:from-[#ff6b6b] before:via-[#4ecdc4] before:to-[#a855f7]
after:absolute after:inset-[1px] after:rounded-[23px] after:-z-10
after:bg-gradient-to-b after:from-white/15 after:to-transparent
[box-shadow:inset_0_1px_0_rgba(255,255,255,0.4)]
```

### Every input must include
```
bg-white/10 backdrop-blur-[40px] backdrop-saturate-[1.8]
border border-white/20
rounded-[16px]
text-white placeholder-white/50
focus:outline-none focus:bg-white/15
focus:border-transparent
focus:shadow-[0_0_0_2px_rgba(168,85,247,0.5),0_0_20px_rgba(168,85,247,0.2)]
transition-all duration-500 ease-out
```

---

## [COMPARE] Apple Liquid Glass 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-[1.8] rounded-[20px] text-white before:absolute before:inset-0 before:rounded-[20px] before:p-[1px] before:-z-10 before:bg-gradient-to-r before:from-[#ff6b6b] before:via-[#4ecdc4] before:to-[#a855f7] after:absolute after:inset-[1px] after:rounded-[19px] after:-z-10 after:bg-gradient-to-b after:from-white/20 after:to-transparent hover:bg-white/15 hover:shadow-[0_0_20px_rgba(168,85,247,0.3)] transition-all duration-500 ease-out bg-gradient-to-r from-[#ff2d92] to-[#a855f7] text-white font-bold">
  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/10 backdrop-blur-[40px] backdrop-saturate-[1.8] rounded-[24px] shadow-xl shadow-black/10 before:absolute before:inset-0 before:rounded-[24px] before:p-[1px] before:-z-10 before:bg-gradient-to-br before:from-[#ff6b6b] before:via-[#4ecdc4] before:to-[#a855f7] after:absolute after:inset-[1px] after:rounded-[23px] after:-z-10 after:bg-gradient-to-b after:from-white/15 after:to-transparent [box-shadow:inset_0_1px_0_rgba(255,255,255,0.4)] p-6 md:p-8">
  <h3 class="font-black bg-gradient-to-r from-[#a855f7] via-[#ff2d92] to-[#a855f7] bg-clip-text text-transparent 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/10 backdrop-blur-[40px] backdrop-saturate-[1.8] border border-white/20 rounded-[16px] text-white placeholder-white/50 focus:outline-none focus:bg-white/15 focus:border-transparent focus:shadow-[0_0_0_2px_rgba(168,85,247,0.5),0_0_20px_rgba(168,85,247,0.2)] transition-all duration-500 ease-out" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Apple Liquid Glass 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/10 backdrop-blur-[40px] backdrop-saturate-[1.8] text-white border border-white/20 px-6 md:px-8">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-6">
    <a href="/" class="font-black bg-gradient-to-r from-[#a855f7] via-[#ff2d92] to-[#a855f7] bg-clip-text text-transparent 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-gradient-to-br from-[#1a1a2e] via-[#16213e] to-[#0f0f23] text-white py-16 md:py-24 px-6 md:px-8">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-black bg-gradient-to-r from-[#a855f7] via-[#ff2d92] to-[#a855f7] bg-clip-text text-transparent text-5xl md:text-7xl lg:text-8xl">
      {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-[1.8] rounded-[20px] text-white before:absolute before:inset-0 before:rounded-[20px] before:p-[1px] before:-z-10 before:bg-gradient-to-r before:from-[#ff6b6b] before:via-[#4ecdc4] before:to-[#a855f7] after:absolute after:inset-[1px] after:rounded-[19px] after:-z-10 after:bg-gradient-to-b after:from-white/20 after:to-transparent hover:bg-white/15 hover:shadow-[0_0_20px_rgba(168,85,247,0.3)] transition-all duration-500 ease-out bg-gradient-to-r from-[#ff2d92] to-[#a855f7] text-white font-bold">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-white/10 backdrop-blur-[40px] backdrop-saturate-[1.8] text-white py-16 md:py-24 px-6 md:px-8">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-black bg-gradient-to-r from-[#a855f7] via-[#ff2d92] to-[#a855f7] bg-clip-text text-transparent text-3xl md:text-4xl">{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/10 backdrop-blur-[40px] backdrop-saturate-[1.8] rounded-[24px] shadow-xl shadow-black/10 before:absolute before:inset-0 before:rounded-[24px] before:p-[1px] before:-z-10 before:bg-gradient-to-br before:from-[#ff6b6b] before:via-[#4ecdc4] before:to-[#a855f7] after:absolute after:inset-[1px] after:rounded-[23px] after:-z-10 after:bg-gradient-to-b after:from-white/15 after:to-transparent [box-shadow:inset_0_1px_0_rgba(255,255,255,0.4)] p-6 md:p-8">
        <h3 class="font-black bg-gradient-to-r from-[#a855f7] via-[#ff2d92] to-[#a855f7] bg-clip-text text-transparent 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/10 backdrop-blur-[40px] backdrop-saturate-[1.8] border border-white/20 rounded-[16px] text-white placeholder-white/50 focus:outline-none focus:bg-white/15 focus:border-transparent focus:shadow-[0_0_0_2px_rgba(168,85,247,0.5),0_0_20px_rgba(168,85,247,0.2)] transition-all duration-500 ease-out" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-white/15 backdrop-blur-[40px] backdrop-saturate-[1.8] 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-black bg-gradient-to-r from-[#a855f7] via-[#ff2d92] to-[#a855f7] bg-clip-text text-transparent text-xl md:text-2xl">{LOGO_TEXT}</span>
        <p class="text-white/80 text-xs">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-black bg-gradient-to-r from-[#a855f7] via-[#ff2d92] to-[#a855f7] bg-clip-text text-transparent text-xl md:text-2xl">{COLUMN_TITLE}</h4>
        <ul class="text-white/80 text-xs">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Apple Liquid Glass 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-[1.8] rounded-[20px] text-white before:absolute before:inset-0 before:rounded-[20px] before:p-[1px] before:-z-10 before:bg-gradient-to-r before:from-[#ff6b6b] before:via-[#4ecdc4] before:to-[#a855f7] after:absolute after:inset-[1px] after:rounded-[19px] after:-z-10 after:bg-gradient-to-b after:from-white/20 after:to-transparent hover:bg-white/15 hover:shadow-[0_0_20px_rgba(168,85,247,0.3)] transition-all duration-500 ease-out`
- [ ] Card includes: `bg-white/10 backdrop-blur-[40px] backdrop-saturate-[1.8] rounded-[24px] shadow-xl shadow-black/10 before:absolute before:inset-0 before:rounded-[24px] before:p-[1px] before:-z-10 before:bg-gradient-to-br before:from-[#ff6b6b] before:via-[#4ecdc4] before:to-[#a855f7] after:absolute after:inset-[1px] after:rounded-[23px] after:-z-10 after:bg-gradient-to-b after:from-white/15 after:to-transparent [box-shadow:inset_0_1px_0_rgba(255,255,255,0.4)]`
- [ ] Input includes: `bg-white/10 backdrop-blur-[40px] backdrop-saturate-[1.8] border border-white/20 rounded-[16px] text-white placeholder-white/50 focus:outline-none focus:bg-white/15 focus:border-transparent focus:shadow-[0_0_0_2px_rgba(168,85,247,0.5),0_0_20px_rgba(168,85,247,0.2)] transition-all duration-500 ease-out`

### 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-[0px_0px_0px`

### Style rule check
- [ ] Hero titles use thick stroke -webkit-text-stroke: 3px #4ecdc4
- [ ] Hero titles use 3D offset shadow text-shadow: 4px 4px 0 rgba(0,0,0,0.5)
- [ ] Hero titles use gradient fill bg-gradient-to-r from-[#a855f7] via-[#ff2d92] to-[#a855f7]
- [ ] Subtitles use cyan glow text-shadow: 0 0 20px rgba(78, 205, 196, 0.8)
- [ ] Use ultra-high blur values backdrop-blur-[40px] or backdrop-blur-3xl

### Style drift check
- [ ] Does not violate: No plain white titles (must use gradient + thick stroke + 3D shadow)
- [ ] Does not violate: No omitting 3D offset shadow (4px 4px is mandatory)
- [ ] Does not violate: No thin strokes (Hero must be 3px, h1/h2 at least 2px)
- [ ] Does not violate: No omitting text glow effects (loses neon feel)
- [ ] Does not violate: No low blur values backdrop-blur-sm (too weak)

### 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 Apple Liquid Glass

## Absolute Bans (Match and Refuse)

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

- plain white titles (must use gradient + thick stroke + 3D shadow)
- omitting 3D offset shadow (4px 4px is mandatory)
- thin strokes (Hero must be 3px, h1/h2 at least 2px)
- omitting text glow effects (loses neon feel)
- low blur values backdrop-blur-sm (too weak)
- omitting saturation enhancement (colors will appear dull)
- No right angles or small rounded corners (rounded-none, rounded-sm)
- fast transitions (duration-100, duration-150)

## 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
- [ ] no plain white titles (must use gradient + thick stroke + 3D shadow)
- [ ] no omitting 3D offset shadow (4px 4px is mandatory)
- [ ] no thin strokes (Hero must be 3px, h1/h2 at least 2px)
- [ ] no omitting text glow effects (loses neon feel)
- [ ] no low blur values backdrop-blur-sm (too weak)