liquid-glass

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