Apple Liquid Glass

version: alpha
name: Liquid-Glass-Dashboard
description: |
  Apple's Liquid Glass material language applied to an analytics dashboard. Translucent
  glass panels float over a living, colorful wallpaper; content reads through layered
  blur and saturation, with specular highlights tracing every edge. Depth is real —
  each panel is a physical sheet of glass, not a flat card with a shadow. Controls
  adapt to what's behind them: the brighter the backdrop, the deeper the glass tint.

colors:
  primary: "#007aff"
  primary-pressed: "#0064d2"
  on-glass: "#1d1d1f"
  on-glass-muted: "#6e6e73"
  on-glass-subtle: "#aeaeb2"
  on-dark-glass: "#f5f5f7"
  glass-light: "rgba(255, 255, 255, 0.55)"
  glass-light-strong: "rgba(255, 255, 255, 0.72)"
  glass-dark: "rgba(28, 28, 30, 0.55)"
  glass-tint-blue: "rgba(0, 122, 255, 0.16)"
  glass-tint-green: "rgba(52, 199, 89, 0.16)"
  glass-tint-red: "rgba(255, 59, 48, 0.14)"
  specular: "rgba(255, 255, 255, 0.65)"
  hairline-on-glass: "rgba(255, 255, 255, 0.35)"
  positive: "#34c759"
  negative: "#ff3b30"
  wallpaper-glow-1: "#7aa8ff"
  wallpaper-glow-2: "#c58bff"
  wallpaper-glow-3: "#ffd479"

typography:
  hero-display:
    fontFamily: "SF Pro Display, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.8px
  display-lg:
    fontFamily: "SF Pro Display, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.5px
  title:
    fontFamily: "SF Pro Display, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.3px
  body:
    fontFamily: "SF Pro Text, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: -0.1px
  body-strong:
    fontFamily: "SF Pro Text, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.45
    letterSpacing: -0.1px
  stat-number:
    fontFamily: "SF Pro Display, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.6px
  caption:
    fontFamily: "SF Pro Text, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0
  micro:
    fontFamily: "SF Pro Text, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.2px

rounded:
  sm: 12px
  md: 20px
  lg: 28px
  pill: 999px

spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px

components:
  glass-panel:
    backgroundColor: "{colors.glass-light}"
    textColor: "{colors.on-glass}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    backdropFilter: "blur(24px) saturate(180%)"
    border: "1px solid {colors.hairline-on-glass}"
    padding: "{spacing.lg}"
  glass-sidebar:
    backgroundColor: "{colors.glass-dark}"
    textColor: "{colors.on-dark-glass}"
    rounded: "{rounded.lg}"
    backdropFilter: "blur(32px) saturate(180%)"
    width: 240px
  glass-stat:
    backgroundColor: "{colors.glass-light}"
    textColor: "{colors.on-glass}"
    typography: "{typography.stat-number}"
    rounded: "{rounded.md}"
    backdropFilter: "blur(24px) saturate(180%)"
    padding: "{spacing.lg}"
  glass-button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    typography: "{typography.body-strong}"
    rounded: "{rounded.pill}"
    padding: "10px 20px"
  glass-button-plain:
    backgroundColor: "{colors.glass-light-strong}"
    textColor: "{colors.on-glass}"
    typography: "{typography.body-strong}"
    rounded: "{rounded.pill}"
    padding: "10px 20px"
    border: "1px solid {colors.hairline-on-glass}"
  glass-input:
    backgroundColor: "rgba(255, 255, 255, 0.4)"
    textColor: "{colors.on-glass}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: "9px 16px"
    border: "1px solid {colors.hairline-on-glass}"
  delta-pill-up:
    backgroundColor: "{colors.glass-tint-green}"
    textColor: "{colors.positive}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: "3px 10px"
  delta-pill-down:
    backgroundColor: "{colors.glass-tint-red}"
    textColor: "{colors.negative}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: "3px 10px"

Overview

Liquid Glass is Apple's material-first design language: the interface is made of glass, literally. Panels are translucent sheets floating above a colorful, alive backdrop; their fill is a light-scattering blur (backdrop-filter: blur + saturate), their edges catch a specular highlight, and their corners are generously rounded. Nothing is flat. Depth communicates hierarchy — the more important a surface, the closer it floats to the viewer, and the brighter its glass.

On a dashboard this produces an unusual effect for the genre: data stress without visual stress. Dense KPIs, charts, and tables sit on glass cards that let the wallpaper glow through, so the page stays luminous instead of boxy. Numbers are set in SF Pro Display at bold weights with tight tracking; labels and metadata stay quiet in muted ink. Accent color is used surgically — Apple blue for primary actions and selection, semantic green/red only for deltas.

Key Characteristics:

• Every surface is glass: translucent fill + backdrop-filter: blur(24–32px) saturate(180%) + 1px white specular edge.
• A colorful wallpaper (mesh-glow style) is a structural requirement — glass reads only against something worth blurring.
• Two glass modes: light glass ({colors.glass-light}, dark ink) for content zones, dark glass ({colors.glass-dark}, light ink) for the navigation shell.
• Tinted glass ({colors.glass-tint-*}) marks semantic states — a green wash for gains, red for losses — never for decoration.
• Concentric corner radii: outer panels {rounded.md/md+}, inner elements one step tighter, pills for actions.
• Elevation = blur amount + specular intensity + soft ambient shadow; no hard borders, no heavy drop-shadows.

Colors

Source language: Apple's Liquid Glass material system (iOS 26 / macOS Tahoe era), adapted to a light-mode analytics dashboard.

Accent

• System Blue ({colors.primary} — #007aff): the single interactive tint. Primary buttons, active nav, selection states, chart series. Pressed state deepens to {colors.primary-pressed}.
• Accent color lives on glass (as fills or small chips), never as panel backgrounds — the glass itself is the surface.

Glass Fills

• Light Glass ({colors.glass-light} — rgba(255,255,255,0.55)): default content panel. Always paired with blur(24px) saturate(180%).
• Strong Glass ({colors.glass-light-strong} — rgba(255,255,255,0.72): plain buttons and inputs — more opacity so controls stay legible over any backdrop.
• Dark Glass ({colors.glass-dark} — rgba(28,28,30,0.55)): sidebar and chrome shells, with {colors.on-dark-glass} text. The contrast between light content glass and dark chrome glass creates the layout's figure/ground.

Ink on Glass

• On-Glass Ink ({colors.on-glass} — #1d1d1f): headlines and numbers on light glass.
• Muted ({colors.on-glass-muted} — #6e6e73): labels, captions, secondary rows.
• Subtle ({colors.on-glass-subtle} — #aeaeb2): the quietest tier — timestamps, axis ticks.
• On dark glass, ink inverts to {colors.on-dark-glass} (#f5f5f7) with white at 60% for secondary items.

Semantic Tints

• Positive ({colors.positive} — #34c759) washed as {colors.glass-tint-green} for up-deltas; Negative ({colors.negative} — #ff3b30) washed as {colors.glass-tint-red} for down-deltas. Semantic color appears only as small pills and chart deltas — never as large surfaces.

Wallpaper Glows

The backdrop is part of the palette: soft mesh glows in periwinkle ({colors.wallpaper-glow-1}), lilac ({colors.wallpaper-glow-2}), and warm amber ({colors.wallpaper-glow-3}) over a light base. Glass neutralizes whatever sits behind it, so the wallpaper must be colorful for the material to read.

Typography

Font Family

• Display / numbers: SF Pro Display, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif — headlines and stat numerals.
• Text / UI: SF Pro Text, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif — labels, table cells, buttons.

Hierarchy

Token	Size	Weight	Tracking	Use
{typography.hero-display}	44px	700	-0.8px	Page greeting / hero number
{typography.display-lg}	28px	700	-0.5px	Chart titles, section heads
{typography.title}	20px	600	-0.3px	Card titles
{typography.stat-number}	32px	700	-0.6px	KPI values
{typography.body}	15px	400	-0.1px	Table cells, descriptions
{typography.body-strong}	15px	600	-0.1px	Button labels, emphasized cells
{typography.caption}	13px	500	0	Labels, deltas, metadata
{typography.micro}	11px	500	+0.2px	Timestamps, axis ticks, footnotes

Principles

• Negative tracking only at ≥ 20px. Small sizes track neutral or slightly positive for legibility on translucent fills.
• Numbers are display type. KPI values use {typography.stat-number} — data is the hero content of a dashboard.
• Legibility rule: if text sits on glass over a busy backdrop region, step the fill up to {colors.glass-light-strong} before shrinking the type.

Font Substitutes

Off Apple platforms, the stack resolves through system-ui; Inter is the closest open substitute — tighten tracking by -0.01em at display sizes to match SF Pro.

Layout

Spacing System

• Base unit 8px; tokens {spacing.xxs} 4 · {spacing.xs} 8 · {spacing.sm} 12 · {spacing.md} 16 · {spacing.lg} 24 · {spacing.xl} 32 · {spacing.xxl} 48.
• Outer gutters are generous (24–32px) so glass panels read as floating sheets; inner card padding is {spacing.lg} (24px).
• Panel-to-panel gap: {spacing.md} (16px) — glass layers sit close, like stacked panes.

Grid & Container

• Shell: fixed-width dark glass sidebar (240px) + fluid content region over the wallpaper.
• Content column: max 1200px. KPI row: 4 equal glass cards. Main row: chart panel (2fr) + breakdown panel (1fr). Table spans full width below.
• The wallpaper spans the entire viewport; panels never tile edge-to-edge — air between them is what sells the float.

Elevation & Depth

Level	Treatment	Use
Wallpaper	Fixed, full-viewport, colorful	The world behind the glass
Content glass	blur(24px) saturate(180%) + {colors.glass-light} + 1px {colors.hairline-on-glass}	Cards, chart panel, table
Chrome glass	blur(32px) saturate(180%) + {colors.glass-dark}	Sidebar, top bar
Specular edge	inset 0 1px 0 {colors.specular} on every glass panel	The light-catching top rim
Ambient shadow	0 8px 32px rgba(0,0,0,0.12)	Optional float cue under panels

Depth philosophy. Elevation is expressed as material, not shadow: blur radius = proximity to the viewer. Controls (top bar, buttons) use stronger glass than content; modals would use stronger still. Shadows are soft and wide, only confirming what the blur already says.

Shapes

Token	Value	Use
{rounded.sm}	12px	Inner chips, table row highlights, thumbnails
{rounded.md}	20px	Content panels, stat cards
{rounded.lg}	28px	Sidebar, large composite panels
{rounded.pill}	999px	Buttons, inputs, delta pills, nav items

Concentric rule: an inner element's radius = outer radius − padding. A 20px panel with 16px padding hosts 4–12px inner chips; pills are reserved for actions and inputs.

Components

Shell

glass-sidebar — Dark glass rail, 240px, blur(32px). Logo mark top; nav items as full-width pills — active item takes {colors.primary} fill with white text, inactive items are transparent with 60% white text. Bottom cluster: user chip + settings. glass-topbar — Light glass bar (or dark, matching the chrome) holding a {component.glass-input} search field, date caption, and a circular avatar. Sticky over the wallpaper.

Cards & Data

glass-stat — KPI card: caption label in {typography.caption} muted, value in {typography.stat-number}, and a {component.delta-pill-up} / {component.delta-pill-down} for period-over-period change. Fill {colors.glass-light}, radius {rounded.md}. glass-panel — Generic content surface for charts and tables: {typography.title} header row + content. Chart series use {colors.primary} with a soft gradient area fill fading to transparent. Table rows — No zebra striping; rows separate with hairline rgba(0,0,0,0.06) and highlight on hover with {colors.glass-light-strong} at {rounded.sm}.

Controls

glass-button-primary — Apple blue pill, white label. glass-button-plain — strong-glass pill with hairline edge for secondary actions. glass-input — pill field at 40% white fill. All controls are pills; rectangular buttons do not exist in this language.

Do's and Don'ts

Do

• Give every glass panel its full material stack: translucent fill + backdrop blur + specular inset edge.
• Keep the wallpaper colorful and fixed; glass with nothing behind it is just gray.
• Use dark glass for chrome (sidebar/top bar) and light glass for content — the mode split is the layout's skeleton.
• Reserve semantic tints for deltas and states; accent blue for actions and selection.
• Use concentric radii and pills for all controls.
• Put data in display type — KPI numbers are the loudest element on the page.

Don't

• Don't stack glass directly on glass with the same fill — adjacent panels need a gap or a mode change to stay legible.
• Don't use hard borders or heavy shadows; the material does the separating.
• Don't place long body text over the busiest wallpaper regions — step the fill to {colors.glass-light-strong} first.
• Don't introduce a second accent hue; the color comes from the wallpaper and semantic tints.
• Don't flatten the design: no opaque white cards, no flat gray panels.

Responsive Behavior

Width	Changes
≥ 1200px	Full shell: sidebar + 4-up KPI + chart/breakdown row + table
900–1199px	KPI 2×2; breakdown panel stacks under chart
640–899px	Sidebar collapses to icon rail (72px); KPI 2×2
≤ 639px	Icon rail becomes bottom glass bar; KPI 1-col; table hides low-priority columns

Touch targets stay ≥ 44px; pills grow, never shrink below that.

Iteration Guide

1. One component at a time; reference YAML keys ({component.glass-stat}, {component.glass-sidebar}).
2. Variants live as separate components: entries.
3. Use {token.refs} everywhere — never inline hex or inline rgba in body text.
4. Default and pressed/active states only; never document hover.
5. When adding a surface, choose its glass mode first (light/dark), then its blur tier — never invent a third fill.

Known Gaps

• Dark-mode wallpaper variants and adaptive tint inversion are not specified here; the documented system is the light-wallpaper variant.
• Charts beyond the area/line family (heatmaps, scatter) were not tokenized.
• The exact blur/saturation values are platform baselines (saturate(180%) blur(24px)); Apple's production material uses dynamic adaptive values not formalized as tokens.
• Drag-and-drop affordances and multi-window metaphors from the OS are out of scope for a web dashboard.