liquid-glasslisted
Install: claude install-skill wzyxdwll/ccgx-workflow
# Liquid Glass Design System
Apple-inspired translucent glass UI with depth, refraction, and ambient light response.
## Core Principles
1. **Translucency** — Surfaces reveal layered content beneath via backdrop blur
2. **Depth** — Elements float on distinct z-layers with realistic shadows
3. **Ambient Response** — Glass tints shift based on underlying content color
4. **Minimal Chrome** — Borders are subtle; shape and blur define boundaries
5. **Motion** — Transitions feel physical: spring-based, with inertia
## Usage
Import the token file in your CSS:
```css
@import 'references/tokens.css';
```
## CSS Tokens Reference
All tokens are defined in `references/tokens.css`. Key categories:
| Category | Prefix | Example |
|---|---|---|
| Glass backgrounds | `--lg-bg-*` | `--lg-bg-primary` |
| Blur | `--lg-blur-*` | `--lg-blur-md` |
| Borders | `--lg-border-*` | `--lg-border-color` |
| Shadows | `--lg-shadow-*` | `--lg-shadow-elevated` |
| Radius | `--lg-radius-*` | `--lg-radius-lg` |
| Animation | `--lg-duration-*` | `--lg-duration-normal` |
## Component Patterns
### Glass Card
```css
.glass-card {
background: var(--lg-bg-primary);
backdrop-filter: blur(var(--lg-blur-md));
-webkit-backdrop-filter: blur(var(--lg-blur-md));
border: 1px solid var(--lg-border-color);
border-radius: var(--lg-radius-lg);
box-shadow: var(--lg-shadow-elevated);
transition: transform var(--lg-duration-normal) var(--lg-easing-spring);
}
.glass-card:hover {
transform: translateY(-