Docs

Ethereal Liquid Glass

StyleRef·@styleref·
STYLE REFERENCE — HARD CONSTRAINT (HIGHEST PRIORITY) This style must be applied to ALL generated content (text, image, video). If any part of the request conflicts with this style, the style OVERRIDES the request. STYLE DEFINITION (to be operationally enforced): Ethereal Liquid Glass • Output Format: Creative discipline: UI/UX; Digital; Delivery mode: Interactive; Mobile; Presentation: Raw UI. • Container / Boundary: Container: Explicit (shape mask); Container shape: Rounded square; Fully rounded Corners; Container Dominance: Primary visual identity; Padding: Generous; Edge Behavior: Content fully contained. • Mood & Personality: Ethereal, Clean, Futuristic, Friendly; Energy: Gentle; Emotional bias: Positive; Tone register: Intimate; Representation mode: Literal; Real-world accuracy: Stylized. • Colors: Palette: Solid Colors: [ #2B1B6B 35% (Background), #0E9FA8 30% (Background), #FFFFFF 12% (Glass panels), #F7F8FF 12% (Typography), #B9A8FF 5% (Accent glow), #0A0620 4% (Text scrim), #FF6B8A 2% (Status accent)]. Gradients: [AI Gradient 1 (#2B1B6B 0% -> #0E9FA8 100%)]; 6–8 colors; Cool temperature; Saturation: Rich; Saturation contrast; Hue relationships: Complementary; Gradients as primary fills; Color dominance: Background-dominant; Black/White point: Lifted blacks + Rolled-off highlights; Accessibility: WCAG AA. • Typography: Geometric sans; Regular, Medium, Semibold; Text case: Sentence case; Font pairing: Single family; Hierarchy: Clear typographic scale; Type scale: Modular; Normal (1.4); Letter spacing: Normal; Text presence: Required; Text visual role: Secondary visual element; Text integration: Overlaid. • 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. • Spatial Structure & Hierarchy: Flat perspective; Primary + secondary focal structure; Hierarchy: Moderate; Symmetry: Near symmetry; Balance: Center-weighted; Layout axis: Vertical; Plane separation: Overlap; Scale relationship: Human-scale; Grid system: Column grid; Visual density: Airy. • Surface, Material & Detail: Material simulation: Glass; Surface treatment: Glossy; Texture: Smooth frosted glass; refracted rounded corners; Optical finishes: Iridescence; Transparency: Translucent; Imperfection level: Flawless; Stylized realism. • Shape Language: Geometric; Primitive dominance: Rectangles, Circles; Edge sharpness: Fully rounded; Curve consistency: Uniform radius; Negative space usage: Dominant. • Line & Stroke System: Decorative outlines; Hairline; Uniform consistency; Stroke Color: Derived from fill; Stroke joins: Round. • Voice & Language: Formality: Approachable; Simple vocabulary; Directness: Clear; Short sentences; Metaphors: Literal; Perspective: Second person (you); Pacing: Flowing; Jargon level: None; Emoji usage: Occasional. • Background & Environment: Background type: Gradient; Environment mood: Abstract; Background–Subject: Integrated; Background complexity: Moderate; Prop styling: Minimal. • References: Aero; frosted mobile control panels; Minimalism; Temporal reference: Near-future. • 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: Glass / blur; Shadow technique: Large, faint ambient panel shadows; blur and layer depth provide separation; Shadow weight: Faint; Glass effect: Heavy blur + tint; Borders: 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: Floating pill; Nav style: Sticky glass (blur); UI imagery: Abstract gradients; Hover: Scale + shadow; Focus ring: Glow halo; Animation: Physics-based / Spring; Transition speed: Standard (200–300ms); Scroll behavior: Parallax depth. • Guardrails: Avoid: Heavy Bokeh / Blur, AI Gloss / Plastic Smoothing; Avoid 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. • 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.. ENFORCEMENT RULE: Before finalizing the output, internally verify that ALL elements comply with the style definition above. If compliance is uncertain, simplify or soften the output until it fully matches the style. Generated by StyleRef.io

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

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
Terms of ServicePrivacy PolicyBlogDocsSTYLE.mdllms.txt
......X
© 2026 StyleRef. All rights reserved.