---
name: liquid-glass-os
description: Use when building any UI — web pages, iOS views, components, layouts, dashboards, forms, or styling. Applies the liquid glass design system to all frontend work including HTML, CSS, Tailwind, SwiftUI, and UIKit.
---


# Liquid Glass OS

## x0

The foundation. Near-black base `#050507`. No solid backgrounds. No heavy shadows. No noise overlays. Glass IS the decoration.

## ang3l

Every single interactive UI element gets translucent glass treatment — cards, buttons, inputs, bubbles, modals, nav bars, everything.

### Core Rules

- Glass on **everything** interactive
- Outline-only icons with animated gradient overlays
- Ultra-minimal empty states: one uppercase word, ultralight font
- Remove avatars, labels, noise textures
- Tight and breathable spacing
- Animated flowing mesh gradients as backgrounds

### iOS

| Element | Treatment |
|---------|-----------|
| Background | `MeshGradient` — animated, flowing |
| Glass | Native `.glassEffect()` on all interactive elements |
| Active icons | Animated `AngularGradient` tracing |
| Buttons | Interactive bounce + shimmer |
| Tab bars | Floating icons only, no labels |
| Empty states | One uppercase word, `.ultraLight` font |

### Web

| Element | Treatment |
|---------|-----------|
| Background | Animated CSS gradients on `#050507` base |
| Glass | `backdrop-filter: blur(40px)`, `rgba(255,255,255,0.04)` to `0.06` fill |
| Icons | Outline-only, animated gradient overlay via `background-clip: text` |
| Spacing | Tailwind utilities, tight but breathable |
| Shadows | None. Glass blur IS the depth cue |
| Borders | `1px solid rgba(255,255,255,0.08)` max |

### Quick Reference — Tailwind Tokens

```
bg:        bg-[#050507]
glass-bg:  bg-white/[0.04] to bg-white/[0.06]
blur:      backdrop-blur-[40px]
border:    border-white/[0.08]
text:      text-white, text-white/60 (secondary)
empty:     text-xs uppercase tracking-[0.2em] font-extralight text-white/30
```

### What NOT to Do

- No solid background colors on interactive elements
- No box-shadow for depth — use blur only
- No noise/grain texture overlays
- No avatar images
- No text labels on icon bars
- No heavy borders or dividers