Ethereal Liquid Glass

StyleRef·@styleref·

Extract your style to start building your Style Board.

Made with this StyleRef

Same style, different prompts.

A campaign— campaign, palette strip and a billboard.

A hero built around a large product object, with avatars and a partner card.

A single list screen: two stacked program cards over a fixed bottom navigation.

A product landing page where oversized type sits behind the hero object.

A control room: a live terrain map ringed by rails, threat panels and readiness meters.

Description

Translucent panels that pick up what sits behind them — blur, tint, a bright specular edge and real refraction at the rounded corners. Depth comes from stacked glass, not from shadows.

Colors

#2B1B6B35%Usage: Background

#0E9FA830%Usage: Background

#FFFFFF12%Usage: Glass panels

#F7F8FF12%Usage: Typography

#B9A8FF5%Usage: Accent glow

#0A06204%Usage: Text scrim

#FF6B8A2%Usage: Status accent

AI Gradient 1

#2B1B6B0%

#0E9FA8100%

Palette Size

6–8 colors

Color Temperature

Cool

Saturation Range

Rich

Contrast Strategy

Saturation contrast

Hue Relationships

Complementary

Gradient Policy

Gradients as primary fills

Color Dominance

Background-dominant

Black & White Point

Lifted blacks + Rolled-off highlights

Accessibility Level

WCAG AA

Output Format

Creative Discipline

UI/UX

Medium

Digital

Delivery Mode

Interactive

Platform

Mobile

Presentation Context

Raw UI

Mood & Personality

Ethereal, Clean, Futuristic, Friendly

Energy Level

Gentle

Emotional Bias

Positive

Tone Register

Intimate

Representation Mode

Literal

Real-world Accuracy

Stylized

Surface, Material & Detail

Material Simulation

Glass

Surface Treatment

Glossy

Surface Texture Style

Smooth frosted glass; refracted rounded corners

Optical Finishes

Iridescence

Transparency / Opacity

Translucent

Imperfection Level

Flawless

Abstraction Level

Stylized realism

Background & Environment

Background Type

Gradient

Environment Mood

Abstract

Background–Subject Relationship

Integrated

Background Complexity

Moderate

Prop / Set Styling

Minimal

Custom Style Items

Glass Opacity

White panels at 8–16% opacity over saturated ground.

Edge Refraction

Refract and bend the background at every rounded corner.

Panel Highlighting

Bright 1px inner top-edge highlight; darker inner bottom line; top-left specular sweep.

Layered Blur

Slightly overlap unequal panels with visibly different blur depths.

Content Legibility

Content remains fully opaque; use a dark inner scrim beneath low-contrast text.

Press Response

On press, panels scale slightly and deepen blur; sheets slide upward with visible ground refraction.

UI & Web

Color Theme

Dark

Background Tone

Near-black

Accent Strategy

Single functional accent

Semantic Colors

Full set (error / warning / success / info)

Layout Archetype

Feed

Content Width

Narrow container (≤1100px)

Density

Comfortable

Surface Layers

Three-layer (page + card + elevated)

Elevation Approach

Glass / blur

Shadow Technique

Large, faint ambient panel shadows; blur and layer depth provide separation

Shadow Weight

Faint

Glass / Blur Effect

Heavy blur + tint

Border Philosophy

Hairline (0.5–1px, low opacity)

Corner Radius Scale

Large (16–24px)

Card Style

Glass

Button Shape

Full pill

Button Hierarchy

Primary + Secondary + Ghost

Input Field Style

Borderless on surface

Icon Style

Rounded filled

Icon Weight

Medium (2px)

Navigation Pattern

Floating pill

Navigation Style

Sticky glass (blur)

UI Imagery

Abstract gradients

Hover Treatment

Scale + shadow

Focus Ring Style

Glow halo

Animation Philosophy

Physics-based / Spring

Transition Speed

Standard (200–300ms)

Scroll Behavior

Parallax depth

Light & Shadow

Lighting Presence

Explicit

Lighting Mood Style

Ethereal

Key Light Style

Diffused

Lighting Direction

Upper-left

Shadow Type

Diffuse

Shadow Density

Faint

Bloom / Glow Usage

Subtle

Line & Stroke System

Stroke Usage

Decorative outlines

Stroke Weight

Hairline

Stroke Consistency

Uniform

Stroke Color

Derived from fill

Stroke Joins

Round

Guardrails

Common Artifacts to Avoid

Heavy Bokeh / Blur, AI Gloss / Plastic Smoothing

Avoided Visuals

grey translucent panels over grey ground; translucent body text; excessive stacked glass; hard drop shadows; undifferentiated blur

Allowed Visuals

saturated violet-teal ground; one or two glass planes; opaque text content; faint ambient shadows; rounded filled icons

Typography

Regular, Medium, Aa, Bb, Typography

Font FamilyGeometric sans

Line HeightNormal

Font WeightsRegular, Medium, Semibold

Letter SpacingNormal

Type ScaleModular

Text Case

Sentence case

Font Pairing Strategy

Single family

Hierarchy

Clear typographic scale

Text Presence

Required

Text Visual Role

Secondary visual element

Text Integration

Overlaid

Voice & Language

Formality

Approachable

Vocabulary Level

Simple

Directness

Clear

Sentence Length

Short

Metaphor Density

Literal

Writing Perspective

Second person (you)

Copy Pacing

Flowing

Jargon / Technical Level

None

Emoji Usage

Occasional

Container / Boundary

Container presence

Explicit (shape mask)

Container shape

Rounded square

Corner treatment

Fully rounded

Container Dominance

Primary visual identity

Padding rules

Generous

Edge behavior

Content fully contained

Spatial Structure & Hierarchy

Perspective Style

Flat

Focal Structure

Primary + secondary

Hierarchy Clarity

Moderate

Symmetry

Near symmetry

Balance Type

Center-weighted

Layout Axis

Vertical

Plane Separation Method

Overlap

Scale Relationship

Human-scale

Grid System

Column grid

Visual Density

Airy

Shape Language

Shape Basis

Geometric

Primitive Dominance

Rectangles, Circles

Edge Sharpness

Fully rounded

Curve Consistency

Uniform radius

Negative Space Usage

Dominant

References

Cultural References

Aero; frosted mobile control panels; Minimalism

Temporal Reference

Near-future

......X