Mesh Gradient Interface

StyleRef·@styleref·

Extract your style to start building your Style Board.

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

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

......X