dev-manager Cockpit

Performance Issues and Potential Memory Leak in Learning Workspace

Created: 8h 29m ago Last Active: 7m ago Rescue: nudge Next Rescue: just now

plan and design then implement Icon Composer enhancements to offer interface, functionality and quality that produces various design style including Liquid glass. see attached and https://developer.apple.com/icon-composer/ use stitch to help you out but i don't think it is familiar with the Liquid glass design concept yet so share the image and the following skill --- name: liquid-glass-style version: 1.0.0 description: Platform-neutral skill for designing and implementing a Liquid Glass visual language: translucent, refractive, luminous, layered, tactile interface surfaces with strong legibility and restrained use. --- # Liquid Glass Style Skill ## Purpose Use this skill when a user asks for a UI, icon, component, dashboard, landing page, app mockup, design system, theme, prompt, or implementation that should feel like **Liquid Glass**. Liquid Glass is a **look and feel**, not a single framework feature. It combines translucent material, soft refraction, luminous highlights, depth, adaptive blur, rounded geometry, and calm motion. The result should feel polished, modern, fluid, premium, and tactile without becoming noisy, illegible, or decorative for its own sake. The agent should treat this as a **cross-platform visual system**. Do not assume any specific operating system, programming language, vendor SDK, or native UI framework unless the user explicitly asks for one. ## Core intent Liquid Glass should feel like: - a floating material layer above content - softly transparent but still readable - dimensional without heavy skeuomorphism - luminous at the edges - refractive, not merely blurred - calm, smooth, and slightly fluid - minimal, spacious, and premium - adaptive to light, dark, colorful, and photographic backgrounds It should not feel like: - a generic flat glassmorphism card pasted on top of a background - a heavy acrylic blur with no depth - a frosted rectangle with text that is hard to read - glossy plastic from early-2000s UI - overloaded neon cyberpunk glass - translucent everything everywhere - a platform clone or brand imitation ## Non-goals Do not make this skill vendor-specific. Avoid leading with: - specific operating system names - proprietary design terms - proprietary API names - platform-only code samples - framework-specific component names - brand-specific implementation instructions You may provide platform-specific notes only if the user asks for them. Otherwise, keep the skill conceptual, token-based, and implementation-agnostic. ## When to apply Liquid Glass Use this style for: - floating panels - navigation surfaces - toolbar clusters - bottom bars - compact controls - hero cards - modals and sheets - notification toasts - media controls - dashboards - status widgets - icon systems - onboarding screens - ambient background interfaces - premium product UI - futuristic but calm visual concepts Use sparingly for: - dense tables - long-form reading surfaces - forms with many fields - enterprise admin screens - accessibility-critical flows - legal, medical, or financial content - areas with tiny text - backgrounds with high visual noise Avoid for: - primary body text surfaces - content that must be scanned quickly - data-heavy charts where translucency reduces precision - every element on the page - nested glass on glass - low-contrast text over busy imagery ## Design principles ### 1. Glass is a surface, not a decoration Liquid Glass should have a functional role. It should hold controls, group actions, create hierarchy, or separate content. Do not add it merely because it looks cool. A good glass surface answers: - What does this group contain? - Why is it floating? - What content does it reveal beneath? - How does it improve focus or hierarchy? ### 2. Content remains the hero The background, imagery, map, media, canvas, or document should remain important. Glass should frame and mediate the content, not dominate it. Use glass to create a soft interaction layer. Use solid surfaces when the interface itself is the content. ### 3. Readability beats transparency Transparent material is only successful when text, icons, and controls remain clear. If readability suffers, increase one or more of: - blur strength - tint opacity - darkening or lightening overlay - local contrast scrim - surface opacity - text weight - text size - shadow separation - background dimming Reduce one or more of: - background saturation - transparency - excessive highlights - internal reflections - animated distortion ### 4. Edges create the glass illusion The most convincing glass surfaces usually come from edge treatment, not from the center fill. Prioritize: - thin bright edge highlights - subtle inner shadow - directional specular lines - soft rim lighting - shape-aware gradients - edge glow only where light would catch Do not rely only on `backdrop blur` or opacity. ### 5. The material should adapt Liquid Glass is not one fixed color. It should respond to: - light mode - dark mode - bright backgrounds - dark backgrounds - colorful backgrounds - reduced transparency preferences - high contrast preferences - interaction state - depth/elevation - content density ### 6. Motion should feel viscous, not bouncy The motion language should feel smooth, fluid, and slightly elastic, but not cartoonish. Use: - gentle morphing - soft settling - subtle parallax - highlight shifts - slow refraction movement - press compression - hover lift Avoid: - wobbling jelly - excessive bounce - continuous distracting animation - dramatic distortion - motion that changes layout unpredictably ### 7. Use fewer, better glass objects A single well-tuned glass surface is more premium than twenty translucent panels. Prefer: - one floating toolbar - one elevated card - one clear icon lens - one focused modal Avoid: - glass backgrounds behind every button - glass nested inside glass nested inside glass - transparent surfaces competing at multiple depths - high blur on every layer ## Visual anatomy of a Liquid Glass surface A convincing surface is usually built from multiple subtle layers. ### Layer 1: Backdrop interaction The material should sample or visually respond to what sits behind it. Typical treatment: - background blur - mild saturation adjustment - mild brightness adjustment - optional local contrast compression - optional color wash from the environment Goal: make the surface feel like it belongs in the scene. ### Layer 2: Translucent body The central body provides the mass of the material. Typical treatment: - semi-transparent fill - soft white, dark, or tinted overlay - very low-noise grain to avoid flatness - gradient wash from one side to another Goal: make the surface readable without becoming opaque. ### Layer 3: Refraction cue A true liquid-glass feel needs a hint that light bends through the material. Typical treatment: - subtle offset highlight - directional glow - soft lens-like gradient - curved highlight band - background displacement where possible - brightening near corners and edges Goal: imply thickness and optical bending. ### Layer 4: Specular edge This is the crispest part of the material. Typical treatment: - 1px or hairline highlight stroke - stronger highlight on top-left or light-facing edges - lower-opacity edge on shadow-facing edges - occasional bright glint on corners Goal: show the object has polished edges. ### Layer 5: Inner shadow and thickness Glass should feel like it has depth, not like a flat overlay. Typical treatment: - inner shadow on lower or far edge - faint inner rim - small inset gradient - darker edge where material bends away from light Goal: make the surface feel physically thick. ### Layer 6: Cast shadow The object should separate from the background. Typical treatment: - broad soft shadow - low-opacity dark shadow - slight colored ambient shadow when background is saturated - stronger shadow for floating panels - smaller shadow for controls Goal: establish elevation without heaviness. ### Layer 7: Content layer Text, icons, and controls sit above the glass. Typical treatment: - solid text color, not translucent text - strong contrast - crisp icons - slight text shadow only when needed - careful spacing from edges - no tiny low-contrast glyphs Goal: keep the interface usable. ## Material modes Use these modes to pick the right treatment. ### Frosted glass Best for panels, cards, sheets, and readable surfaces. Characteristics: - medium blur - medium body opacity - moderate tint - subtle highlights - reliable text contrast Use for: - modals - sidebars - tool panels - settings panels - notification cards - readable overlays Avoid making it too transparent when text is present. ### Clear glass Best for small controls, icon lenses, decorative capsules, and media overlays. Characteristics: - stronger edge highlights - lower body opacity - more visible background - stronger specular effect - minimal text Use for: - icon tiles - small buttons - floating controls - media scrubbers - decorative badges - compact status chips Avoid for paragraphs, labels, or dense content. ### Tinted glass Best when the interface needs brand color, state, or accent. Characteristics: - colored translucent fill - colored glow or shadow - hue inherited from surrounding content or theme - highlights remain mostly neutral or white Use for: - active states - selected tabs - call-to-action surfaces - status pills - feature cards Avoid over-saturated fills. Tinted glass should still feel luminous and translucent. ### Dark glass Best on bright, colorful, or photographic backgrounds. Characteristics: - charcoal or deep neutral body - blur behind surface - white or light text - subtle cool highlights - stronger shadow separation Use for: - media controls - image overlays - video UI - maps - dashboards on bright backgrounds Avoid pure black unless the design intentionally wants high drama. ### Light glass Best on dark or saturated backgrounds. Characteristics: - milky white body - soft blue, violet, or neutral tint - high blur - dark text when opacity is high enough - white highlights and subtle gray shadows Use for: - cards over gradients - search bars - floating panels - light-themed dashboards Avoid washed-out white-on-white combinations. ### Solid fallback Best for accessibility, print, screenshots, low-power devices, or unsupported renderers. Characteristics: - opaque or near-opaque surface - same rounded geometry - retained shadow and border hierarchy - no dependence on backdrop blur Use whenever transparency or blur is unavailable or harms readability. ## Recommended token system Use design tokens so the effect can be tuned consistently across platforms. ### Core tokens ```text liquid.radius.xs 8px liquid.radius.sm 12px liquid.radius.md 18px liquid.radius.lg 28px liquid.radius.xl 40px liquid.radius.pill 999px liquid.blur.subtle 8px liquid.blur.medium 18px liquid.blur.strong 32px liquid.blur.extreme 48px liquid.opacity.clear 0.12-0.24 liquid.opacity.frosted 0.28-0.56 liquid.opacity.readable 0.58-0.82 liquid.opacity.solid 0.90-1.00 liquid.edge.hairline 1px liquid.edge.soft 1.5px liquid.edge.bold 2px liquid.shadow.low soft, short, low opacity liquid.shadow.medium broad, medium opacity liquid.shadow.high broad, layered, elevated liquid.noise.none 0 liquid.noise.subtle 0.015-0.035 liquid.noise.visible 0.04-0.07 ``` ### Light-mode material tokens ```text liquid.light.body rgba(255,255,255,0.38) liquid.light.bodyStrong rgba(255,255,255,0.64) liquid.light.edgeTop rgba(255,255,255,0.82) liquid.light.edgeBottom rgba(255,255,255,0.22) liquid.light.innerShadow rgba(30,40,70,0.16) liquid.light.castShadow rgba(20,30,60,0.18) liquid.light.textPrimary rgba(15,20,30,0.96) liquid.light.textSecondary rgba(15,20,30,0.68) ``` ### Dark-mode material tokens ```text liquid.dark.body rgba(20,24,32,0.42) liquid.dark.bodyStrong rgba(20,24,32,0.68) liquid.dark.edgeTop rgba(255,255,255,0.32) liquid.dark.edgeBottom rgba(255,255,255,0.10) liquid.dark.innerShadow rgba(0,0,0,0.30) liquid.dark.castShadow rgba(0,0,0,0.42) liquid.dark.textPrimary rgba(255,255,255,0.96) liquid.dark.textSecondary rgba(255,255,255,0.70) ``` ### Accent material tokens ```text liquid.accent.blue rgba(70,145,255,0.32) liquid.accent.cyan rgba(70,220,255,0.28) liquid.accent.violet rgba(150,105,255,0.28) liquid.accent.green rgba(80,220,150,0.24) liquid.accent.warm rgba(255,180,90,0.24) ``` Keep accent tints transparent enough to feel optical, not painted. ## Surface recipes ### Floating glass card Use for a hero metric, feature module, compact information cluster, or overlay card. Recommended recipe: ```text shape: rounded rectangle radius: 24-36px body opacity: 0.38-0.62 backdrop blur: 18-36px edge highlight: top and upper corners inner shadow: lower edge cast shadow: broad and soft padding: generous text: fully opaque ``` Design notes: - Let the background show through, but not enough to compete with the text. - Use a subtle top-left highlight and bottom-right shade. - Keep content simple: title, one key value, one action, or one small group. ### Compact glass button Use for floating controls and primary interface actions. Recommended recipe: ```text shape: pill or rounded rectangle radius: pill / 14-22px body opacity: 0.24-0.48 backdrop blur: 12-24px edge highlight: clear hairline pressed state: reduce brightness, compress scale slightly hover state: increase edge highlight, slight lift ``` Design notes: - Use simple icons or short labels. - Make active state visible through tint, not only opacity. - Keep button text/icon solid and high-contrast. ### Glass toolbar Use for grouped actions floating over content. Recommended recipe: ```text shape: capsule or rounded bar radius: 24-999px body opacity: 0.32-0.58 backdrop blur: 20-40px internal dividers: very subtle selected item: tinted glass capsule inside bar shadow: medium, wide ``` Design notes: - Treat the toolbar as one glass container with small controls inside. - Avoid giving every child its own heavy glass treatment. - Use spacing and selected-state tint for hierarchy. ### Bottom navigation glass Use for mobile-style navigation or compact app shells. Recommended recipe: ```text shape: floating rounded bar position: above edge with safe padding body opacity: 0.44-0.70 backdrop blur: 24-44px active item: luminous capsule or dot icons: solid, high contrast labels: optional, avoid tiny low-contrast labels ``` Design notes: - Separate it from the screen edge so it feels like a floating object. - Increase opacity over busy content. - Keep inactive icons calm. ### Side panel glass Use for navigation, filters, file trees, and tool palettes. Recommended recipe: ```text shape: large rounded panel or edge-attached slab radius: 20-32px when floating, 0-24px when edge-attached body opacity: 0.56-0.82 backdrop blur: 24-48px edge highlight: visible but subtle shadow: low if edge-attached, medium if floating ``` Design notes: - Side panels often contain many labels, so use stronger opacity. - Use translucent section backgrounds only sparingly inside the panel. - Favor readable hierarchy over maximum transparency. ### Modal or sheet glass Use for focused tasks and overlays. Recommended recipe: ```text shape: rounded sheet/card body opacity: 0.66-0.88 backdrop blur: 28-52px page backdrop: dim or blur slightly edge highlight: subtle shadow: high, soft ``` Design notes: - The modal should be among the most readable glass surfaces. - Dim or soften the page behind it. - Avoid clear glass for forms or long text. ### Search field glass Use for search, command palettes, quick filters, and input pills. Recommended recipe: ```text shape: pill or rounded rectangle body opacity: 0.48-0.78 backdrop blur: 18-32px inner highlight: top edge inner shadow: bottom edge placeholder: medium contrast input text: solid high contrast ``` Design notes: - Inputs require stronger readability than decorative controls. - Cursor and selection states must remain visible. - Add subtle focus ring or glow when active. ### Notification toast glass Use for transient messages. Recommended recipe: ```text shape: rounded capsule/card body opacity: 0.56-0.82 backdrop blur: 20-36px icon area: optional tinted lens shadow: medium motion: slide/fade/settle, not bounce-heavy ``` Design notes: - Toasts must be readable quickly. - Keep text short. - Avoid strong refraction behind multiple text lines. ### Icon tile or app icon glass Use for icons, badges, launcher tiles, and visual identity objects. Recommended recipe: ```text shape: rounded square, squircle, circle, or custom glyph vessel body: layered translucent gradients edge: bright rim with inner shadow center: soft lens highlight foreground glyph: bold and simplified background: blurred color fields or soft abstract forms ``` Design notes: - Icons need fewer details and stronger silhouettes. - Use bolder foreground shapes than you would on flat icons. - Use several soft color blobs rather than complex illustrations. - The glass effect should enhance recognition, not obscure it. ### Glass badge or chip Use for status labels, filters, tags, and compact metadata. Recommended recipe: ```text shape: pill body opacity: 0.36-0.66 blur: 10-22px edge highlight: light text: short, solid, medium weight state color: subtle tint ``` Design notes: - Keep labels short. - Do not use clear glass for tiny text on busy backgrounds. - Use icon + text only when space allows. ### Media control glass Use over images, videos, music artwork, and immersive content. Recommended recipe: ```text shape: floating capsules and panels body: dark glass or adaptive glass blur: 20-44px shadow: medium-high icons: white or high-contrast progress track: translucent rail with solid active fill ``` Design notes: - Media backgrounds are usually busy; use darkened glass or strong scrims. - Keep controls large enough to read and tap. - Avoid overly complex reflections over already-complex imagery. ## Color guidance ### Preferred palettes Liquid Glass works best with restrained luminous palettes. Good base palettes: - ice blue - soft cyan - pale violet - neutral white - graphite - smoky navy - pearl gray - misty lavender - cool aqua - muted teal Good accent palettes: - electric blue used sparingly - cyan glow - violet edge light - mint status tint - warm peach highlight - soft magenta for active states Avoid: - too many saturated colors at once - muddy semi-transparent browns - flat gray overlays with no light direction - neon everywhere - pure white text on light clear glass - black text on very transparent bright backgrounds ### Backgrounds Liquid Glass needs a background to interact with. Best backgrounds: - soft gradients - blurred abstract shapes - large color fields - photography with controlled contrast - maps with local scrims - animated but slow ambient color - dark canvas with luminous accents Hard backgrounds: - dense text - high-frequency patterns - checkerboards - thin line art - noisy photos - charts with many labels - tables When background is hard, increase surface opacity and reduce transparency. ## Shape language Use shapes that feel soft, smooth, and tactile. Preferred shapes: - rounded rectangles - capsules - squircles - large radius cards - circular icon lenses - soft segmented controls - pill-shaped bars Guidelines: - Larger surfaces need larger radii. - Small controls can use pill geometry. - Nested shapes should have related radii. - Avoid sharp 90-degree corners unless intentionally contrasting. - Avoid overly organic blobs for standard UI; reserve them for art or decorative backgrounds. Radius relationship: ```text outer radius = inner radius + padding distance ``` This keeps nested glass elements optically consistent. ## Depth and elevation Liquid Glass depends on a clear depth model. ### Suggested elevation levels ```text Level 0: content background Level 1: subtle surface / inline chip Level 2: floating card / toolbar Level 3: modal / active panel Level 4: transient overlay / menu / tooltip ``` ### Elevation changes As elevation increases: - shadow gets broader - blur can increase - edge highlight becomes more visible - body opacity may increase for readability - motion can include more lift - background dimming may increase Do not create more than four or five visual elevations in one screen. ## Lighting model Choose a consistent light direction. Default recommendation: ```text main light: top-left or top-center secondary glow: soft ambient from background shadow direction: downward and slightly right ``` Rules: - Top edges are usually brighter. - Lower edges are usually darker or more shadowed. - Corners catch small glints. - Active elements can emit a subtle colored glow. - Do not put highlights on every edge equally unless the object is meant to feel like a lens. ## Refraction and distortion Refraction should be suggested, not overdone. Use: - subtle lens gradients - slight displacement on decorative surfaces - background shift near edges - bright arcs or curved highlights - soft bloom at corners Avoid: - heavy warping behind text - distorted paragraphs - warped tables - large moving distortion near controls - visual effects that make the UI feel unstable Safe rule: ```text Use visible refraction around the edge, not under important text. ``` ## Typography guidance Text on glass needs discipline. Use: - medium or semibold weights for labels - clear hierarchy - slightly larger text than flat UI where needed - high contrast text colors - short labels on transparent controls - generous line height Avoid: - thin text on clear glass - low-opacity text over blur - long paragraphs on transparent cards - multiple muted text levels on a busy background - tiny labels inside heavily refractive objects For readable panels: ```text primary text opacity: 0.90-1.00 secondary text opacity: 0.62-0.78 tertiary text opacity: avoid unless background is controlled ``` ## Iconography guidance Icons should be crisp and simple. Use: - solid or slightly heavier strokes - simple silhouettes - clear fill/stroke contrast - no excessive internal detail - subtle active glow or tint Avoid: - hairline icons on transparent material - multi-color icon clutter inside small glass controls - icons whose edges disappear into highlights - complex illustrations behind glass without simplification ## Layout guidance Liquid Glass needs space. Use: - generous padding - clear grouping - fewer objects per row - stronger spacing between depth layers - floating surfaces offset from screen edges - consistent alignment Avoid: - crowded glass cards - dense data grids inside transparent panels - tiny controls with too many effects - overlapping glass surfaces unless carefully composed Recommended padding: ```text small chip: 8-12px horizontal button: 12-18px horizontal toolbar: 8-14px internal gap card: 20-32px panel: 24-40px modal: 28-48px ``` ## Interaction states Each interactive glass object should have clear states. ### Default - calm body opacity - visible edge highlight - readable content - subtle shadow ### Hover or focus - slightly brighter edge - slight lift - small increase in saturation or tint - visible focus ring when keyboard-focused ### Pressed - slight scale compression - reduced shadow - darker body or stronger inner shadow - highlight shifts inward ### Active or selected - tinted fill - stronger glow - higher contrast icon/text - optional inner capsule for segmented controls ### Disabled - reduced saturation - lower contrast, but still legible - no strong highlight - no interactive glow ### Loading - avoid aggressive shimmer - use slow highlight sweep or gentle pulsing - keep motion subtle and optional ## Motion language Liquid Glass motion should feel like a smooth material responding to touch. Recommended durations: ```text micro hover: 120-180ms press response: 80-140ms release settle: 180-260ms panel enter: 240-420ms modal enter: 280-480ms large morph: 360-650ms ambient highlight: 6-16s ``` Recommended easing: ```text enter: ease-out with soft deceleration exit: ease-in or ease-in-out press: quick ease-out morph: spring-like but restrained ambient: linear or very gentle ease-in-out ``` Motion ideas: - highlight follows pointer slightly - surface lifts on hover - active capsule morphs between items - modal grows from source object - glass panel blurs in as it appears - background dims and softens behind focus layers - icon lens catches a moving glint Avoid: - constant busy shimmer - strong parallax during reading - gelatinous wobble - motion that delays task completion - animations that ignore reduced-motion settings ## Accessibility requirements ### Contrast Glass must not reduce legibility. Checklist: - Text has sufficient contrast against the final rendered surface. - Icons remain visible over all expected backgrounds. - Focus indicators are clear. - Disabled states are distinguishable without becoming unreadable. - Important controls are not communicated by transparency alone. ### Reduced transparency Provide a reduced-transparency mode. In reduced transparency: - replace backdrop blur with solid or near-solid fill - keep rounded geometry - keep hierarchy through border, shadow, and spacing - reduce refraction effects - maintain the same layout ### Increased contrast Provide a high-contrast mode. In high contrast: - increase body opacity - strengthen text/icon color - simplify internal gradients - reduce decorative highlights - make borders more visible - avoid low-contrast secondary labels ### Reduced motion Provide a reduced-motion mode. In reduced motion: - remove parallax - remove continuous shimmer - replace morphing with simple fade/scale - keep press feedback minimal - avoid moving blur fields ### Touch targets and pointer targets Do not shrink controls just because the material looks delicate. Guidelines: - Keep interactive areas generous. - Use visible affordances. - Separate neighboring glass controls enough to avoid mistakes. - Make hit areas larger than the visual glyph when needed. ## Performance guidance Blur, transparency, and shadows can be expensive. Optimize by: - limiting the number of backdrop-blurred surfaces - avoiding large full-screen live blur when not needed - reusing material tokens - using static blurred backgrounds when possible - reducing blur behind fast-scrolling content - simplifying shadows on low-power devices - reducing nested filters - avoiding animated blur radius changes on many elements - using opacity and transform animations instead of layout animations Performance fallback: ```text High capability: live blur + refraction + layered highlights Medium capability: blur + simple border + shadow Low capability: translucent fill + border + shadow Minimal capability: solid fill + border + shadow ``` ## Background adaptation algorithm When placing glass over unknown content, evaluate the local background. ### Step 1: Estimate background brightness If background is very light: - use darker text - increase body opacity - add subtle shadow or dark scrim - avoid white-only edge treatment If background is very dark: - use light text - add white edge highlights - allow lower body opacity - use glow carefully ### Step 2: Estimate background complexity If background is busy: - increase blur - increase body opacity - reduce refraction - simplify highlights - add local dimming behind the surface If background is calm: - allow clearer material - use more visible refraction - reduce body opacity ### Step 3: Estimate background saturation If background is highly saturated: - use neutral body tint - reduce accent color intensity - avoid competing colored glows If background is neutral: - introduce subtle accent tint - use background-derived hue sparingly ### Step 4: Validate content Render the actual text and icons, then adjust. Never approve the material based only on an empty card mockup. ## Layering rules ### Do - put glass above content, not behind everything - use one primary glass layer per region - use solid content inside glass when needed - group controls into a shared glass container - create hierarchy with elevation and opacity ### Do not - stack multiple translucent panes directly on top of each other - place glass panels over glass panels without solid separation - use transparency as the only selected-state indicator - put tiny text over clear material - mix many unrelated blur strengths in one view ## Implementation-neutral material model Define a Liquid Glass material as a structured object rather than one visual property. ```text Material LiquidGlass { shape radius backdropBlur bodyFill bodyOpacity saturationAdjustment brightnessAdjustment edgeHighlight innerShadow refractionCue castShadow noise contentContrast motionProfile fallback } ``` Each UI component should choose a material variant rather than hand-authoring random blur and opacity values. ## Example material variants ### `glass.clear.control` ```text radius: pill or 16-24px backdropBlur: 16-24px bodyOpacity: 0.16-0.32 edgeHighlight: strong innerShadow: medium castShadow: low-medium content: icon or short label only fallback: frosted control ``` ### `glass.frosted.card` ```text radius: 24-36px backdropBlur: 20-36px bodyOpacity: 0.42-0.68 edgeHighlight: medium innerShadow: subtle castShadow: medium content: readable labels and simple groups fallback: opaque card ``` ### `glass.readable.panel` ```text radius: 24-32px backdropBlur: 28-48px bodyOpacity: 0.64-0.86 edgeHighlight: subtle innerShadow: subtle castShadow: medium-high content: navigation, forms, settings, mixed text fallback: solid panel ``` ### `glass.accent.selected` ```text radius: pill or component-matched backdropBlur: 12-28px bodyOpacity: 0.32-0.58 accentTint: 0.18-0.36 edgeHighlight: medium-high glow: low, color-matched content: selected icon/text fallback: solid accent fill ``` ### `glass.dark.media` ```text radius: 18-32px backdropBlur: 24-44px bodyOpacity: 0.46-0.72 dark neutral edgeHighlight: cool white low opacity innerShadow: dark medium castShadow: high content: light icons/text fallback: opaque dark surface ``` ## Optional CSS-like reference implementation This is not a required platform. It is a neutral way to describe the visual stack for environments that support CSS-like rendering. ```css .liquid-glass { position: relative; border-radius: var(--liquid-radius, 28px); background: linear-gradient( 135deg, rgba(255,255,255,0.46), rgba(255,255,255,0.18) ); backdrop-filter: blur(var(--liquid-blur, 28px)) saturate(1.25); box-shadow: 0 24px 60px rgba(0,0,0,0.18), inset 0 1px 1px rgba(255,255,255,0.72), inset 0 -1px 2px rgba(0,0,0,0.12); border: 1px solid rgba(255,255,255,0.38); overflow: hidden; } .liquid-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient( circle at 28% 12%, rgba(255,255,255,0.78), rgba(255,255,255,0.18) 28%, rgba(255,255,255,0) 54% ), linear-gradient( 135deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 45% ); mix-blend-mode: screen; opacity: 0.72; } .liquid-glass::after { content: ""; position: absolute; inset: 1px; border-radius: calc(var(--liquid-radius, 28px) - 1px); pointer-events: none; box-shadow: inset 0 0 18px rgba(255,255,255,0.18), inset 0 -18px 28px rgba(20,30,60,0.08); } .liquid-glass > * { position: relative; z-index: 1; } ``` Important: tune the values for each context. This example is a starting point, not a universal recipe. ## Icon design recipe A Liquid Glass icon usually needs separate background, material, and foreground layers. ### Recommended icon layers ```text 1. base color field 2. blurred abstract color shapes 3. translucent glass tile or lens 4. inner glow and edge highlight 5. foreground glyph or symbol 6. small specular highlight 7. optional shadow or depth layer ``` ### Icon rules - Use a simple, memorable silhouette. - Keep the main glyph bold. - Avoid thin line details. - Make the icon recognizable at small sizes. - Use clear depth between background and foreground. - Make highlights support the shape, not cover it. - Test against light, dark, and monochrome contexts. ### Icon prompt pattern Use this prompt pattern for visual generation or design direction: ```text Create a premium liquid glass icon with a rounded square translucent lens, soft blue-cyan-violet gradients, luminous edge highlights, subtle inner shadow, gentle refraction, and a bold centered glyph. The icon should feel clear, modern, tactile, and dimensional. Keep the silhouette readable at small sizes. Avoid text, clutter, harsh neon, and excessive reflections. ``` ## Screen design recipe For a full UI screen: 1. Create a calm background with large soft color fields. 2. Place one or two main glass surfaces above the content. 3. Use solid readable text and icons. 4. Apply stronger glass only to controls and panels that need emphasis. 5. Add specular edge highlights to top-facing edges. 6. Use subtle shadows to separate depth layers. 7. Keep motion slow, smooth, and optional. 8. Test readability over the busiest background area. 9. Add reduced-transparency and high-contrast fallbacks. ## Design prompt patterns ### General UI prompt ```text Design a platform-neutral Liquid Glass interface. Use translucent frosted surfaces, soft refraction, luminous edge highlights, rounded geometry, layered depth, subtle shadows, and calm fluid motion. Keep text and icons crisp and high contrast. Use the effect sparingly on functional floating panels and controls. Avoid brand-specific UI, heavy skeuomorphism, neon clutter, and low-contrast text. ``` ### Dashboard prompt ```text Create a modern dashboard with a Liquid Glass visual language: soft gradient background, floating frosted cards, luminous rim highlights, clear hierarchy, readable data, subtle depth, and restrained accent color. Make the glass panels feel premium and tactile while keeping metrics, labels, and charts easy to read. ``` ### Landing page prompt ```text Create a premium landing page using a Liquid Glass aesthetic: atmospheric gradient background, floating translucent hero card, glossy but subtle highlights, soft shadows, rounded call-to-action controls, and clean typography. The result should feel elegant, calm, luminous, and futuristic without copying any specific platform. ``` ### Mobile app prompt ```text Design a mobile app screen with a Liquid Glass style: floating bottom navigation, frosted content cards, clear icon buttons, soft blur, refractive edges, and spacious layout. Prioritize usability, contrast, and restrained effects. Avoid translucent body text areas and avoid making every component glass. ``` ### Icon prompt ```text Design a Liquid Glass icon: rounded square transparent material, soft internal color gradients, bright rim lighting, subtle refraction, inner shadow, and a bold readable foreground symbol. Make it glossy, tactile, and modern, but not noisy or overly reflective. ``` ## Component decision table | Component | Recommended material | Notes | |---|---|---| | Primary card | Frosted glass | Use readable opacity and medium blur. | | Hero card | Frosted or tinted glass | Can be more expressive if text remains readable. | | Floating button | Clear or tinted glass | Keep icon/label solid. | | Navigation bar | Frosted glass | Active item can be tinted. | | Bottom nav | Frosted/dark glass | Float above edge; keep contrast high. | | Search field | Frosted readable glass | Stronger opacity for input clarity. | | Modal | Readable frosted glass | Use background dimming. | | Sheet | Readable frosted glass | Avoid transparent forms. | | Toast | Frosted/dark glass | Must be readable at a glance. | | Tooltip | Frosted or solid fallback | Small text needs contrast. | | Table | Usually solid | Use glass only for outer container if needed. | | Long article | Solid or near-solid | Avoid clear glass behind paragraphs. | | Icon tile | Clear/tinted glass | Emphasize edge, lens, and glyph. | | Badge/chip | Tinted glass | Keep labels short. | | Media controls | Dark glass | Works well over photos/videos. | ## Quality checklist Before final delivery, verify: - The effect is functional, not purely decorative. - Text is readable over expected backgrounds. - Important icons are crisp. - There is a clear light direction. - Edges have subtle highlight and thickness. - The material has body, not just blur. - Shadows establish believable elevation. - The background supports the glass effect. - There are not too many glass surfaces. - Nested glass is avoided or carefully separated. - Hover, focus, pressed, active, and disabled states are defined. - Accessibility fallbacks exist. - Reduced transparency mode still looks intentional. - Reduced motion mode is calm and usable. - Performance fallback exists for low-capability environments. - The design does not look like a platform clone. ## Common failure modes and fixes ### Failure: Text is hard to read Fix: - increase body opacity - increase blur - add local scrim - use darker or lighter text - simplify background - reduce refraction under text ### Failure: It looks like ordinary glassmorphism Fix: - add edge highlights - add inner shadow - add directional light - add subtle lens/refraction cue - improve depth and elevation - use more intentional shape and motion ### Failure: It looks too glossy or toy-like Fix: - reduce specular intensity - reduce saturation - soften highlights - use fewer glints - increase neutral body fill - reduce contrast of internal gradients ### Failure: It feels noisy Fix: - remove unnecessary glass surfaces - simplify background - reduce number of accent colors - reduce shadow layers - remove animated shimmer - use one primary focal surface ### Failure: It feels flat Fix: - add top highlight - add inner bottom shadow - add soft cast shadow - increase background blur slightly - add subtle gradient body fill - increase corner radius consistency ### Failure: It performs poorly Fix: - reduce number of live blur surfaces - lower blur radius - replace nested blur with static surfaces - remove animated filter changes - use solid fallback on low-power contexts ### Failure: It looks like a specific platform clone Fix: - change geometry slightly - use a custom color palette - avoid vendor-specific components - avoid copied icon shapes - design unique navigation patterns - focus on the general material language, not the source UI ## Delivery format for agents When asked to implement or design Liquid Glass, respond with: 1. A short interpretation of the desired vibe. 2. A material system with tokens. 3. Component-level recipes. 4. Accessibility and fallback notes. 5. Implementation guidance appropriate to the user's environment. 6. A review checklist. Avoid over-explaining brand history. Keep the response focused on look, feel, usability, and implementation choices. ## Agent behavior rules The agent must: - keep guidance platform-neutral unless asked otherwise - describe the style as a visual language, not a brand feature - prioritize legibility over transparency - recommend restrained use - define fallbacks for accessibility and performance - include states for interactive components - avoid proprietary API-first answers - avoid copying any single platform's exact layouts - make the effect adaptable to the user's product identity The agent should ask for more detail only when necessary. If the user provides a target environment, adapt the implementation to that environment. If no environment is provided, use tokens, pseudo-code, and design recipes. ## Minimal implementation summary For any Liquid Glass element, create this stack: ```text 1. rounded shape 2. blurred/adaptive backdrop 3. translucent body fill 4. soft gradient tint 5. bright top/edge rim 6. subtle inner shadow 7. soft cast shadow 8. solid readable content 9. reduced-transparency fallback ``` This is the essence of the style. ## Final review rubric Rate the result from 1 to 5 in each category: ```text Readability: Is the content easy to read? Material quality: Does it feel like layered glass, not just blur? Depth: Are elevation and shadows believable? Restraint: Is glass used only where it helps? Adaptability: Does it work on multiple backgrounds? Accessibility: Are fallbacks and contrast handled? Performance: Is the effect practical to render? Originality: Does it avoid cloning a specific platform? ``` A good Liquid Glass implementation scores at least 4 in readability, accessibility, and restraint. Visual beauty does not compensate for poor usability. reference: https://developer.apple.com/icon-composer/

Created: 3h 35m ago Last Active: 12m ago