Design for AI

Liquid glass: UI design prompt

Palette, type rules and a pasteable prompt for liquid glass. Also called Apple liquid glass, iOS 26 glass, refractive UI, lensing glass. 2025 onward (Apple WWDC 2025).

Traits

  • glass that behaves like a lens: edges refract and brighten, the middle stays clear
  • specular highlight along the top edge, subtle dark rim on the bottom
  • panels are pill or capsule shaped, and float over content instead of framing it
  • controls morph and merge (a tab bar becomes a single pill when scrolling)
  • background is real content (photos, maps), not decorative blobs
  • very high radius (full pills), thin type, tight controls
  • motion is fluid and physics-based: springy, quick, with slight overshoot

Palette

content-driven, but chrome uses rgba(255,255,255,0.18) fill, rgba(255,255,255,0.6) top highlight, rgba(0,0,0,0.12) bottom rim, #0a84ff accent, #ffffff text on dark, #1c1c1e text on light

Type

system sans (SF Pro on Apple; use Geist as free stand-ins); labels 500 at 13-15px, titles 600 at 22-34px; letter-spacing slightly negative on titles

Do

  • layer glass controls over rich imagery; the effect lives on the refraction of what is behind it
  • build the highlight with two inset box-shadows (light top, dark bottom) plus a faint outer glow
  • use spring easing (cubic-bezier(0.34,1.56,0.64,1)) at 350-450ms for morphs

Don't

  • do not use it for large containers; liquid glass is for controls and floating bars, not page sections
  • do not drop legibility for effect; add a dim scrim under text when the background is busy
  • do not fake it with a flat 10% white; the edge treatment is the entire style

Known for it: Apple iOS 26 / macOS Tahoe, Apple Music and Maps toolbars

CSS seed
:root {
  --bg: #101418;
   --fg: #ffffff;
   --accent: #0a84ff;
   --glass: rgba(255,255,255,0.18);
   --hi: rgba(255,255,255,0.6);
   --rim: rgba(0,0,0,0.14);
   --radius: 999px;
   --font: 'Geist',sans-serif
}
Prompt

Build the site in Apple liquid glass style. Content is full-bleed photography or a map; all chrome floats over it in capsule-shaped panels (border-radius 999px for bars, 28px for sheets). Glass recipe: background rgba(255,255,255,0.18), backdrop-filter blur(24px) saturate(180%), box-shadow inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.14), 0 10px 30px rgba(0,0,0,0.25); add a 1px outer border rgba(255,255,255,0.25). Accent #0a84ff for the active tab and primary button. Font Geist: titles 600 at 28-34px with -0.02em tracking, labels 500 at 14px. Bottom tab bar collapses into a single pill on scroll with a 400ms spring (cubic-bezier(0.34,1.56,0.64,1)). Keep glass for controls only; page sections stay solid. Respect prefers-reduced-motion by disabling the morph.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site in Apple liquid glass style. Content is full-bleed photography or a map; all chrome floats over it in capsule-shaped panels (border-radius 999px for bars, 28px for sheets). Glass recipe: background rgba(255,255,255,0.18), backdrop-filter blur(24px) saturate(180%), box-shadow inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.14), 0 10px 30px rgba(0,0,0,0.25); add a 1px outer border rgba(255,255,255,0.25). Accent #0a84ff for the active tab and primary button. Font Geist: titles 600 at 28-34px with -0.02em tracking, labels 500 at 14px. Bottom tab bar collapses into a single pill on scroll with a 400ms spring (cubic-bezier(0.34,1.56,0.64,1)). Keep glass for controls only; page sections stay solid. Respect prefers-reduced-motion by disabling the morph.

## Tokens
:root { --bg:#101418; --fg:#ffffff; --accent:#0a84ff; --glass:rgba(255,255,255,0.18); --hi:rgba(255,255,255,0.6); --rim:rgba(0,0,0,0.14); --radius:999px; --font:'Geist',sans-serif }

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.

Snippets in this style

B 111Blob morph