Soft Extruded Neumorphic UI

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):

Soft Extruded Neumorphic UI

 • Output Format: Creative discipline: UI/UX; Digital; Delivery mode: Interactive; Mobile; Presentation: Single device mockup.
 • Container / Boundary: Container: Implicit (visual edges only); Container shape: Rounded square; Fully rounded Corners; Padding: Generous; Edge Behavior: Content fully contained.
 • Mood & Personality: Calm, Minimalist, Clean, Gentle; Energy: Mellow; Emotional bias: Neutral; Tone register: Intimate; Representation mode: Literal; Real-world accuracy: Stylized.
 • Colors: Palette: Solid Colors: [ #E4E7EF 62% (Page and control surface),  #F7F9FD 12% (Highlight shadows),  #BFC5D4 12% (Dark shadows),  #3A4256 7% (Primary text and icons),  #5B6480 3% (Secondary text),  #6B5BFF 3% (Active accent),  #D4586A 1% (Error state)]; 6–8 colors; Cool temperature; Saturation: Bleached; Low surface contrast; high text and icon contrast against the base surface; Hue relationships: Analogous; Subtle gradients only; Color dominance: Single dominant color; Black/White point: Lifted blacks + Rolled-off highlights; Accessibility: WCAG AA.
 • Typography: Geometric sans; Medium, Semibold; Text case: Sentence case; Font pairing: Single family; Hierarchy: Subtle contrast; Type scale: Modular; Relaxed (1.6); Letter spacing: Normal; Text visual role: Purely functional; Text integration: Separate.
 • Light & Shadow: Lighting presence: Explicit; Lighting mood style: High-key; Key light style: Diffused; Artificial; Lighting direction: Fixed upper-left source; Light source count: Single; Shadow type: Diffuse; Shadow density: Faint.
 • Spatial Structure & Hierarchy: Grid system: Column grid; Visual density: Airy; Hierarchy: Moderate; Layout axis: Vertical; Symmetry: Near symmetry; Balance: Center-weighted; Flat perspective; Plane separation: Shadow.
 • Surface, Material & Detail: Material simulation: Sanded plaster or thermoformed plastic; Surface treatment: Matte; Texture: Smooth; Transparency: Opaque; Imperfection level: Flawless.
 • Camera and Motion: Easing: Spring; Animation duration: Snappy; Transition: Extrusion inversion; no fades.
 • Shape Language: Geometric; Primitive dominance: Rectangles, Circles; Edge sharpness: Fully rounded; Curve consistency: Uniform radius; Negative space usage: Dominant; Angle usage: None.
 • Line & Stroke System: No stroke (fill-only).
 • Voice & Language: Formality: Relaxed; Simple vocabulary; Directness: Suggestive; Short sentences; Metaphors: Literal; Perspective: Second person (you); Pacing: Flowing; Jargon level: None.
 • Background & Environment: Background type: Solid color; Environment mood: Abstract; Background–Subject: Integrated; Background complexity: Minimal.
 • References: Soft UI / Neumorphism, Minimalism; Temporal reference: 2010s.
 • UI & Web: Color theme: Light; Background tone: Cool light gray; Accent strategy: Single functional accent; Semantic colors: Error only; Layout archetype: Dashboard; Density: Comfortable; Surface layers: Flat (one background); Elevation: Shadow-based; Shadow technique: Paired outer shadows for raised surfaces; paired inset shadows for pressed surfaces; Shadow weight: Soft; Borders: Borderless; Corner radius scale: Large (16–24px); Card style: Shadowed; Button shape: Rounded (8–16px); Button hierarchy: Primary + Secondary; Input field style: Borderless on surface; Icon style: Rounded filled; Icon weight: Medium (2px); Navigation: Bottom tab bar; Data display: List rows; Data visualization: Minimal (no gridlines); Hover: Shadow lift; Animation: Physics-based / Spring; Transition speed: Fast (80–150ms); Focus ring: Colored outline.
 • Guardrails: Avoid: AI Gloss / Plastic Smoothing; Avoid Visuals: hard-edged shadows; borders; excessive extrusion; glossy surfaces; visible texture; fade transitions; Avoid Colors: low-contrast grey text; pure white shadows; pure black shadows; Avoid Words: urgent; now; exclamation marks; Allowed Visuals: large soft paired shadows; rounded controls; inset pressed states; deep slate text; saturated functional accent; generous whitespace.
 •  Flat Typography: Text remains flat on the surface; never apply extrusion, embossing, or shadows to type., Shadow Spacing: Cluster controls with large gaps so adjacent paired shadows never collide., Extrusion Logic: Raised controls use pale top-left and darker bottom-right shadows; pressed controls invert both as inset shadows., Shadow Calibration: Large blur, low opacity, base-derived shadow hues; readable at arm's length rather than under magnification., Recessed Imagery: Use imagery sparingly; mask it into rounded recessed wells with an inner shadow and monochrome base-hue illustration., Interaction Motion: Press transitions from raised to inset in a short spring; toggles slide with a small overshoot..


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.

Search, onboarding illustration and a booking flow across three healthcare screens.

Card, keypad and balance — the style handling money, numerals and dense history.

The style under a dense desktop dashboard: KPIs, a chart and a data card.

Description

Controls extruded from a single background color using paired light and dark shadows, so nothing has an edge — buttons swell out of the surface and inputs press into it. One surface color, two shadows, and a great deal of restraint.

Colors

#E4E7EF62%Usage: Page and control surface

#F7F9FD12%Usage: Highlight shadows

#BFC5D412%Usage: Dark shadows

#3A42567%Usage: Primary text and icons

#5B64803%Usage: Secondary text

#6B5BFF3%Usage: Active accent

#D4586A1%Usage: Error state

Palette Size

6–8 colors

Color Temperature

Cool

Saturation Range

Bleached

Contrast Strategy

Low surface contrast; high text and icon contrast against the base surface

Hue Relationships

Analogous

Gradient Policy

Subtle gradients only

Color Dominance

Single dominant color

Black & White Point

Lifted blacks + Rolled-off highlights

Accessibility Level

WCAG AA

Light & Shadow

Lighting Presence

Explicit

Lighting Mood Style

High-key

Key Light Style

Diffused

Light Source Type

Artificial

Lighting Direction

Fixed upper-left source

Light Source Count

Single

Shadow Type

Diffuse

Shadow Density

Faint

Container / Boundary

Container presence

Implicit (visual edges only)

Container shape

Rounded square

Corner treatment

Fully rounded

Padding rules

Generous

Edge behavior

Content fully contained

Spatial Structure & Hierarchy

Grid System

Column grid

Visual Density

Airy

Hierarchy Clarity

Moderate

Layout Axis

Vertical

Symmetry

Near symmetry

Balance Type

Center-weighted

Perspective Style

Flat

Plane Separation Method

Shadow

Shape Language

Shape Basis

Geometric

Primitive Dominance

Rectangles, Circles

Edge Sharpness

Fully rounded

Curve Consistency

Uniform radius

Negative Space Usage

Dominant

Angle Usage

None

Line & Stroke System

Stroke Usage

No stroke (fill-only)

UI & Web

Color Theme

Light

Background Tone

Cool light gray

Accent Strategy

Single functional accent

Semantic Colors

Error only

Layout Archetype

Dashboard

Density

Comfortable

Surface Layers

Flat (one background)

Elevation Approach

Shadow-based

Shadow Technique

Paired outer shadows for raised surfaces; paired inset shadows for pressed surfaces

Shadow Weight

Soft

Border Philosophy

Borderless

Corner Radius Scale

Large (16–24px)

Card Style

Shadowed

Button Shape

Rounded (8–16px)

Button Hierarchy

Primary + Secondary

Input Field Style

Borderless on surface

Icon Style

Rounded filled

Icon Weight

Medium (2px)

Navigation Pattern

Bottom tab bar

Data Display Style

List rows

Data Visualization Style

Minimal (no gridlines)

Hover Treatment

Shadow lift

Animation Philosophy

Physics-based / Spring

Transition Speed

Fast (80–150ms)

Focus Ring Style

Colored outline

Surface, Material & Detail

Material Simulation

Sanded plaster or thermoformed plastic

Surface Treatment

Matte

Surface Texture Style

Smooth

Transparency / Opacity

Opaque

Imperfection Level

Flawless

References

Cultural References

Soft UI / Neumorphism, Minimalism

Temporal Reference

2010s

Background & Environment

Background Type

Solid color

Environment Mood

Abstract

Background–Subject Relationship

Integrated

Background Complexity

Minimal

Guardrails

Common Artifacts to Avoid

AI Gloss / Plastic Smoothing

Avoided Visuals

hard-edged shadows; borders; excessive extrusion; glossy surfaces; visible texture; fade transitions

Avoided Colors

low-contrast grey text; pure white shadows; pure black shadows

Avoided Words

urgent; now; exclamation marks

Allowed Visuals

large soft paired shadows; rounded controls; inset pressed states; deep slate text; saturated functional accent; generous whitespace

Typography

Medium, Aa, Bb, Typography

Font FamilyGeometric sans

Line HeightRelaxed

Font WeightsMedium, Semibold

Letter SpacingNormal

Type ScaleModular

Text Case

Sentence case

Font Pairing Strategy

Single family

Hierarchy

Subtle contrast

Text Visual Role

Purely functional

Text Integration

Separate

Output Format

Creative Discipline

UI/UX

Medium

Digital

Delivery Mode

Interactive

Platform

Mobile

Presentation Context

Single device mockup

Mood & Personality

Calm, Minimalist, Clean, Gentle

Energy Level

Mellow

Emotional Bias

Neutral

Tone Register

Intimate

Representation Mode

Literal

Real-world Accuracy

Stylized

Voice & Language

Formality

Relaxed

Vocabulary Level

Simple

Directness

Suggestive

Sentence Length

Short

Metaphor Density

Literal

Writing Perspective

Second person (you)

Copy Pacing

Flowing

Jargon / Technical Level

None

Camera and Motion

Easing Function

Spring

Animation Duration Feel

Snappy

Transition Type

Extrusion inversion; no fades

Custom Style Items

Flat Typography

Text remains flat on the surface; never apply extrusion, embossing, or shadows to type.

Shadow Spacing

Cluster controls with large gaps so adjacent paired shadows never collide.

Extrusion Logic

Raised controls use pale top-left and darker bottom-right shadows; pressed controls invert both as inset shadows.

Shadow Calibration

Large blur, low opacity, base-derived shadow hues; readable at arm's length rather than under magnification.

Recessed Imagery

Use imagery sparingly; mask it into rounded recessed wells with an inner shadow and monochrome base-hue illustration.

Interaction Motion

Press transitions from raised to inset in a short spring; toggles slide with a small overshoot.

......X