popular

Liquid Glass

Refraction and a springing specular, a control center under a finger.

Best for: iOS controls, lock-screen widgets, translucent system layers

Not for: Long forms, dense dashboards, low-end-first apps

---
version: alpha
name: Liquid Glass
description: Refraction and a springing specular, a control center under a finger.
colors:
  primary: "#007AFF"
  secondary: "#8E8E93"
  tertiary: "#64D2FF"
  background: "#D6E6FF"
  surface: rgba(255,255,255,0.42)
  onPrimary: "#F4F4F5"
  onSecondary: "#F4F4F5"
  onTertiary: "#18181B"
  onBackground: "#0B1220"
  onSurface: "#0B1220"
  outline: rgba(255,255,255,0.6)
  muted: "#3C3C43"
  success: "#34C759"
  warning: "#FF9F0A"
  error: "#FF3B30"
typography:
  h1:
    fontFamily: -apple-system
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -0.03em
  h2:
    fontFamily: -apple-system
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.02em
  h3:
    fontFamily: -apple-system
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.01em
  body:
    fontFamily: -apple-system
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0em
  label:
    fontFamily: -apple-system
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.02em
  caption:
    fontFamily: -apple-system
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  mono:
    fontFamily: JetBrains Mono
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.45
    letterSpacing: 0em
rounded:
  sm: 14px
  md: 20px
  lg: 28px
  xl: 36px
  full: 999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
components:
  navbar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.onBackground}"
  hero:
    backgroundColor: "{colors.background}"
    textColor: "{colors.onBackground}"
  icon-row:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.lg}"
  slider:
    backgroundColor: "{colors.primary}"
    rounded: "{rounded.full}"
  toggle:
    backgroundColor: "{colors.primary}"
    rounded: "{rounded.full}"
    size: 51px
  notice:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.onSurface}"
    rounded: "{rounded.lg}"
  footer:
    backgroundColor: "{colors.background}"
    textColor: "{colors.muted}"
---

# Liquid Glass

## Overview

Refraction and a springing specular, a control center under a finger. The atmosphere is daily-app balanced, offset and asymmetric, with cinematic choreography. Tone: liquid, refractive, system. Density 4/10, variance 6/10, motion 9/10. Material: Frosted glass plus refraction (MeshTransmissionMaterial or SVG displacement). Specular edge springs with drag. No static translucent rectangles.

How to use: Place this file at the repository root. Tell Cursor / Claude Code / Codex: read DESIGN.md and obey its tokens and Do/Don'ts.

## Colors

Semantic roles for the light theme. Keep a single accent; do not introduce a second brand hue.

- **primary** (`#007AFF`)
- **secondary** (`#8E8E93`)
- **tertiary** (`#64D2FF`)
- **background** (`#D6E6FF`)
- **surface** (`rgba(255,255,255,0.42)`)
- **outline** (`rgba(255,255,255,0.6)`)
- **muted** (`#3C3C43`)
- **success** (`#34C759`)
- **warning** (`#FF9F0A`)
- **error** (`#FF3B30`)
- **onSurface** (`#0B1220`)
- **onBackground** (`#0B1220`)
- **onPrimary** (`#F4F4F5`)
- **onSecondary** (`#F4F4F5`)
- **onTertiary** (`#18181B`)

## Typography

Hierarchy comes from weight and size, not from shouting. Body line length stays near 65 characters.

- **h1**: -apple-system 600 / 32px / 1.12 / -0.03em
- **h2**: -apple-system 600 / 24px / 1.2 / -0.02em
- **h3**: -apple-system 600 / 20px / 1.3 / -0.01em
- **body**: -apple-system 400 / 16px / 1.55 / 0em
- **label**: -apple-system 500 / 13px / 1.3 / 0.02em
- **caption**: -apple-system 400 / 12px / 1.4 / 0em
- **mono**: "JetBrains Mono" 500 / 13px / 1.45 / 0em

## Layout

Spacing scale: xs=4px, sm=8px, md=16px, lg=24px, xl=32px, 2xl=48px, 3xl=64px.

iOS: 44pt targets, respect Safe Area and Dynamic Type, SF Symbols, Large Titles and grouped lists.

Web: mobile-first, single column below 768px, body ≥ 16px, clamp() headlines, max-width 1120–1400px, min-h-[100dvh] for full-height sections.

Every element occupies its own spatial zone. No overlapping hero text. Collapse multi-column layouts below 768px.

## Elevation & Depth

- sm: `0 8px 24px rgba(10,20,40,0.12)`
- md: `0 16px 40px rgba(10,20,40,0.16)`
- lg: `0 28px 60px rgba(10,20,40,0.2)`
- surface: `liquid-glass`
- blur: `28px`
- saturate: `1.85`
- recipe: Frosted glass plus refraction (MeshTransmissionMaterial or SVG displacement). Specular edge springs with drag. No static translucent rectangles.

Tint shadows toward the background hue. High-density layouts may replace cards with hairline dividers.
Never fake glass with an opaque slab: require backdrop-filter, and put a mesh or photo behind it.

## Shapes

Radius scale: sm=14px, md=20px, lg=28px, xl=36px, full=999px.

## Components

- **Navbar** (`web.navbar` / default / md): Desktop nav with logo, icon links, and one primary CTA.
- **Hero** (`web.hero` / split / lg): Hero uses split layout, one CTA, no "Scroll to explore".
- **Icon Row** (`icon-row` / grid / md): Control-center tiles; icons from the catalog.
- **Slider** (`slider` / default / md): Volume/brightness slider; track and thumb use primary.
- **Slider** (`slider` / default / md): Volume/brightness slider; track and thumb use primary.
- **Toggle** (`toggle` / on / md): Capsule switch; on-state uses primary.
- **Notice** (`notice` / default / md): Notice row: icon, title, timestamp.
- **Footer** (`web.footer` / default / md): Quiet footer with clear link groups.

## Do's and Don'ts

### Do
- Use semantic color tokens, never raw hex in components.
- Keep a single accent; hierarchy comes from type weight and space.
- Define default, hover, focus-visible, pressed, disabled, and loading states.
- Meet WCAG 2.2 AA contrast for body text and interactive labels.
- Touch targets are at least 44×44pt on iOS and 44px on web.
- Frosted glass must sit over a moving or photographic field so refraction is visible.
- Use spring physics for fold/tilt; never linear opacity fades as the primary motion.

### Don't
- Do not use Inter as the display face for premium work.
- Do not use pure black #000000 for large surfaces.
- Do not add neon outer glows or custom mouse cursors.
- Do not ship three equal feature cards as the default layout.
- Do not hide focus rings or drop below AA contrast.
- Do not fake liquid glass with a flat semi-transparent rectangle and no blur.
- Do not freeze the background into a solid brand color behind the glass.