Docs

Mesh Gradient Interface

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): Mesh Gradient Interface • Output Format: Creative discipline: UI/UX; Digital; Delivery mode: Interactive; Web; Presentation: Raw UI. • Container / Boundary: Container: Explicit (shape mask); Fully rounded Corners; Padding: Generous; Edge Behavior: Intentional bleed. • Mood & Personality: Futuristic, Optimistic, Clean, Minimalist; Energy: Active; Emotional bias: Positive; Representation mode: Metaphorical; Real-world accuracy: Stylized. • Colors: Palette: Solid Colors: [ #0B0A1F 38% (Background), #5B2BE0 16% (Blend point), #E63BB0 15% (Blend point), #FF7A59 14% (Blend point), #FFFFFF 9% (Content), #141230 6% (Surface), #39E0C8 2% (Accent)]; 6–8 colors; Mixed temperature; Saturation: Lush; Saturation contrast; Hue relationships: Analogous; Gradients as primary fills; Color dominance: Background-dominant; Shadow Color: Hue-shifted; Accessibility: WCAG AA. • Typography: Geometric sans; Regular, Medium, Semibold; Font pairing: Weight contrast; Hierarchy: Strong contrast; Type scale: Responsive; Letter spacing: Tight; Text integration: Overlaid. • Light & Shadow: Lighting mood style: Ethereal; Lighting presence: Implied; Shadow type: Diffuse; Bloom / Glow usage: Subtle. • Spatial Structure & Hierarchy: Grid system: Column grid; Visual density: Airy; Hierarchy: Strong; Layout axis: Vertical; Balance: Center-weighted. • Surface, Material & Detail: Surface treatment: Satin; Texture: Fine low-opacity noise dither across the gradient; Texture usage: Subtle noise; Transparency: Semi-transparent; Ultra-abstract. • Camera and Motion: Camera movement: Static; Motion intensity: Fluid; Loop: Seamless loop; Animation duration: Leisurely; Transition: Dissolve, Slide. • Shape Language: Negative space usage: Dominant. • Voice & Language: Formality: Approachable; Conversational vocabulary; Directness: Clear; Medium sentences; Perspective: Second person (you); Pacing: Flowing; Jargon level: Light industry terms. • Background & Environment: Background type: Gradient; Environment mood: Abstract; Background–Subject: Integrated. • References: Minimalism; Temporal reference: Near-future. • UI & Web: Color theme: Dark; Background tone: Near-black; Accent strategy: Multi-tonal palette; Layout archetype: Marketing page; Content width: Narrow container (≤1100px); Density: Spacious; Surface layers: Three-layer (page + card + elevated); Elevation: Mixed; Glass effect: Subtle tint overlay; Corner radius scale: Extra-large (28px+); Card style: Glass; Button shape: Full pill; Button hierarchy: Primary + Secondary + Ghost; Icon style: Duotone; Navigation: Floating pill; Nav style: Sticky glass (blur); UI imagery: Abstract gradients; Focus ring: Glow halo; Animation: Expressive; Transition speed: Deliberate (350–500ms); Scroll behavior: Scroll-triggered reveals. • Guardrails: Avoid: Film Grain / Noise; Avoid Visuals: two-stop linear gradients; visible gradient banding; body copy on busy blends; muddy complementary color intersections; gradients on every element; Allowed Visuals: three or four off-centre blend points; full-bleed mesh ground; calm solid or frosted surfaces; sampled mesh accents; restrained white or near-black content. • Mesh Construction: Use 3–4 off-centre adjacent-hue points at very large blur radii; preserve distinct luminous fields without hard boundaries., Legibility Rule: Set headings directly on calm gradient areas; place all body copy on solid or lightly frosted neutral surfaces., Light Logic: Treat bright mesh points as light sources; lighten nearby surfaces and tint soft shadows to their nearest hue., Accent Sampling: Derive buttons, glows, and duotone icons from fully saturated colors sampled from the mesh., Motion Signature: Drift mesh points continuously on long slow loops; use restrained fade-and-rise scroll entrances for content.. 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.

One workout home screen — greeting, summary, program card and bottom navigation.
Training analytics: session bars, a portrait card, ranked teams and a track chart.
A banking landing page with card objects, an app preview and analytics below.
An AI workspace: navigation, three action cards, a prompt composer and chat history.

Description

Multi-point color fields that blend across the whole screen, with content floating on top in white and near-black. The gradient is the layout's ground, its brand and its light source at once.

Mood & Personality

Mood & Personality
Futuristic, Optimistic, Clean, Minimalist
Energy Level
Active
Emotional Bias
Positive
Representation Mode
Metaphorical
Real-world Accuracy
Stylized

Voice & Language

Formality
Approachable
Vocabulary Level
Conversational
Directness
Clear
Sentence Length
Medium
Writing Perspective
Second person (you)
Copy Pacing
Flowing
Jargon / Technical Level
Light industry terms

Container / Boundary

Container presence
Explicit (shape mask)
Corner treatment
Fully rounded
Padding rules
Generous
Edge behavior
Intentional bleed

Spatial Structure & Hierarchy

Grid System
Column grid
Visual Density
Airy
Hierarchy Clarity
Strong
Layout Axis
Vertical
Balance Type
Center-weighted

Custom Style Items

Mesh Construction
Use 3–4 off-centre adjacent-hue points at very large blur radii; preserve distinct luminous fields without hard boundaries.
Legibility Rule
Set headings directly on calm gradient areas; place all body copy on solid or lightly frosted neutral surfaces.
Light Logic
Treat bright mesh points as light sources; lighten nearby surfaces and tint soft shadows to their nearest hue.
Accent Sampling
Derive buttons, glows, and duotone icons from fully saturated colors sampled from the mesh.
Motion Signature
Drift mesh points continuously on long slow loops; use restrained fade-and-rise scroll entrances for content.

UI & Web

Color Theme
Dark
Background Tone
Near-black
Accent Strategy
Multi-tonal palette
Layout Archetype
Marketing page
Content Width
Narrow container (≤1100px)
Density
Spacious
Surface Layers
Three-layer (page + card + elevated)
Elevation Approach
Mixed
Glass / Blur Effect
Subtle tint overlay
Corner Radius Scale
Extra-large (28px+)
Card Style
Glass
Button Shape
Full pill
Button Hierarchy
Primary + Secondary + Ghost
Icon Style
Duotone
Navigation Pattern
Floating pill
Navigation Style
Sticky glass (blur)
UI Imagery
Abstract gradients
Focus Ring Style
Glow halo
Animation Philosophy
Expressive
Transition Speed
Deliberate (350–500ms)
Scroll Behavior
Scroll-triggered reveals

Camera and Motion

Camera Movement
Static
Motion Intensity
Fluid
Loop Behavior
Seamless loop
Animation Duration Feel
Leisurely
Transition Type
Dissolve, Slide

Shape Language

Negative Space Usage
Dominant

Surface, Material & Detail

Surface Treatment
Satin
Surface Texture Style
Fine low-opacity noise dither across the gradient
Texture Usage
Subtle noise
Transparency / Opacity
Semi-transparent
Abstraction Level
Ultra-abstract

Background & Environment

Background Type
Gradient
Environment Mood
Abstract
Background–Subject Relationship
Integrated

Colors

#0B0A1F38%Usage: Background
#5B2BE016%Usage: Blend point
#E63BB015%Usage: Blend point
#FF7A5914%Usage: Blend point
#FFFFFF9%Usage: Content
#1412306%Usage: Surface
#39E0C82%Usage: Accent
Palette Size
6–8 colors
Color Temperature
Mixed
Saturation Range
Lush
Contrast Strategy
Saturation contrast
Hue Relationships
Analogous
Gradient Policy
Gradients as primary fills
Color Dominance
Background-dominant
Shadow Color
Hue-shifted
Accessibility Level
WCAG AA

Typography

Regular, Medium, Aa, Bb, Typography
Font FamilyGeometric sans
Font WeightsRegular, Medium, Semibold
Letter SpacingTight
Type ScaleResponsive
Font Pairing Strategy
Weight contrast
Hierarchy
Strong contrast
Text Integration
Overlaid

Output Format

Creative Discipline
UI/UX
Medium
Digital
Delivery Mode
Interactive
Platform
Web
Presentation Context
Raw UI

Light & Shadow

Lighting Mood Style
Ethereal
Lighting Presence
Implied
Shadow Type
Diffuse
Bloom / Glow Usage
Subtle

References

Cultural References
Minimalism
Temporal Reference
Near-future

Guardrails

Common Artifacts to Avoid
Film Grain / Noise
Avoided Visuals
two-stop linear gradients; visible gradient banding; body copy on busy blends; muddy complementary color intersections; gradients on every element
Allowed Visuals
three or four off-centre blend points; full-bleed mesh ground; calm solid or frosted surfaces; sampled mesh accents; restrained white or near-black content
Terms of ServicePrivacy PolicyBlogDocsSTYLE.mdllms.txt
......X
© 2026 StyleRef. All rights reserved.