# Mesh Gradient Interface

Futuristic UI/UX design with vibrant mesh gradients, clean typography, and glassmorphic elements for an optimistic digital experience.

| | |
|---|---|
| Style | Mesh Gradient Interface |
| Category | UI/UX |
| Tags | futuristic, gradient, minimalist, dark mode, glassmorphism, abstract, neon, tech, modern, clean |
| Author | @styleref (https://styleref.io/u/styleref) |
| Palette | #0b0a1f #5b2be0 #e63bb0 #ff7a59 #ffffff #141230 |
| Published | 2026-08-30 |
| Canonical URL | https://styleref.io/share/r88m1qfu-a3a7fc0bd1a6 |

## Specification

Paste this into any AI tool. Keep the attribution line and the canonical URL.

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

## Other formats and live access

The specification above is the portable default. Tool-specific builds and a
ready-to-commit STYLE.md are available without a login:

**REST** (anonymous, read-only)

```
https://styleref.io/api/v1/styles/r88m1qfu-a3a7fc0bd1a6?format=flux        # also: midjourney, diffusion, json
https://styleref.io/api/v1/styles/r88m1qfu-a3a7fc0bd1a6/style.md           # a ready-to-commit STYLE.md
```

**MCP** (Streamable HTTP at `https://styleref.io/api/mcp`)

```
styleref://gallery/r88m1qfu-a3a7fc0bd1a6
styleref://gallery/r88m1qfu-a3a7fc0bd1a6/style.md
```

Or call the `get_style` tool with `ref` set to the slug above, and
`apply_style_to_prompt` to wrap a request for a specific tool.

Attribution: this style was created by @styleref. Keep the `Generated by StyleRef.io`
line and the canonical URL when you use a compiled spec, and credit the author.

Source: https://styleref.io/share/r88m1qfu-a3a7fc0bd1a6