# Liquid Glass — AI design spec

> Edge-lit glass with refraction — depth without drop shadows.
>
> Style page: https://www.aiwebstyle.com/styles/liquid-glass.html · Live preview: https://www.aiwebstyle.com/previews/liquid-glass.html
>
> Drop this file at the root of a project and point your coding agent at it. Every value is copied from the working stylesheet, not estimated.

## 1. What this style is

Liquid Glass is the successor to glassmorphism. Where glassmorphism only blurred what sat behind a panel, this style bends it: edges catch a bright rim, the surface refracts slightly, and layers appear to float at genuinely different depths rather than sitting on one plane. The visual work is done by three things working together — a blurred backdrop, a specular top edge, and a subtle inner highlight that reads as thickness. Remove any one and it collapses back into a flat translucent rectangle.

**Signature rules**

- blur: 24px
- saturate: 160%
- radius: 24px
- rim: 1px top-lit
- inset highlight: 1px
- max 2 layers

## 2. Tokens

### Page surface

| Token | Value | Purpose |
|---|---|---|
| `--page-bg` | `#0b1020` | Page background (solid fallback) |
| `--page-bg-gradient` | `radial-gradient(circle at 25% 10%, #2b3fa0, transparent 55%), radial-gradient(circle at 80% 80%, #7a2f9e, transparent 55%)` | Page background gradient; overrides the solid unless `none` |

### Text

| Token | Value | Purpose |
|---|---|---|
| `--text-color` | `#e8eefc` | Body text |
| `--heading-color` | `#ffffff` | Headings |

### Links

| Token | Value | Purpose |
|---|---|---|
| `--link-color` | `#9fc2ff` | Link and inline accent |

### Borders

| Token | Value | Purpose |
|---|---|---|
| `--border-color` | `rgba(255, 255, 255, .28)` | Dividers and input borders |

### Cards

| Token | Value | Purpose |
|---|---|---|
| `--card-bg` | `rgba(255, 255, 255, .10)` | Card surface |
| `--card-border-radius` | `24px` | Card corner radius |
| `--card-shadow` | `inset 0 1px 0 rgba(255, 255, 255, .55)` | Card at rest |
| `--card-hover-shadow` | `inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 30px -18px rgba(0, 0, 0, .8)` | Card on hover |

### Header

| Token | Value | Purpose |
|---|---|---|
| `--header-bg` | `rgba(11, 16, 32, .55)` | Sticky header surface |
| `--header-text-color` | `#ffffff` | Header text and nav links |

### Buttons

| Token | Value | Purpose |
|---|---|---|
| `--button-bg` | `rgba(255, 255, 255, .92)` | Primary button fill |
| `--button-text-color` | `#0b1020` | Primary button label |
| `--button-hover-bg` | `#ffffff` | Primary button hover fill |

### Code / prompt block

| Token | Value | Purpose |
|---|---|---|
| `--prompt-bg` | `rgba(255, 255, 255, .12)` | Code / prompt block surface |
| `--prompt-text-color` | `#dbe6ff` | Code / prompt block text |

### Type

| Token | Value | Purpose |
|---|---|---|
| `--base-font` | `var(--font-inter)` | Body font stack |
| `--heading-font` | `var(--font-inter)` | Heading font stack |

## 3. Do

- Drive every color, radius and shadow from the tokens below. No literal hex values in component code.
- Reuse the `--card-*` tokens for any elevated surface (card, panel, modal, dropdown) so elevation stays consistent.
- Keep header and footer on `--header-*` / `--footer-*` even when the page background is a gradient.
- Media-rich hero sections where a photograph or video sits behind the interface.
- Overlay surfaces — command palettes, floating toolbars, media controls — where context must stay visible.
- Product showcases for spatial or AR-adjacent software.

## 4. Don't

- Do not blend tokens from another style in this library — one page, one token set.
- Do not invent a hover state: every interactive element has a `*-hover-*` token above.
- Long text pages. Blur behind paragraphs constrains reading speed and hurts contrast.
- Low-end mobile devices: stacked backdrop-filter layers are one of the most expensive effects in CSS.
- Any surface where the user must read dense data — a table on glass is unreadable by design.

## 5. Using this with a coding agent

Place this file at the project root as `DESIGN.md`, then instruct the agent:

> Follow `DESIGN.md` for all UI. Every color, radius and shadow comes from its token table. If you need a state that is not listed, derive it from the nearest listed token and add the new token to `DESIGN.md` instead of hard-coding a value.

If the project already has a token layer (Tailwind config, CSS custom properties, a theme file), map these tokens onto it one-to-one and keep the names unchanged.

## 6. Original prompt

```text
Design a Liquid Glass interface layer. Panels use backdrop-filter: blur(24px) saturate(160%) over a saturated, slightly out-of-focus background.
```

---

*Generated from the `liquid-glass` theme in `style.css`. Token values are verbatim — regenerate rather than edit by hand.*