# Soft Extruded Neumorphic UI

Soft extruded neumorphic UI with subtle shadows, rounded corners, and a limited color palette for a clean, minimalist aesthetic.

| | |
|---|---|
| Style | Soft Extruded Neumorphic UI |
| Category | UI/UX |
| Tags | neumorphic, soft ui, minimalist, clean, calm, modern, digital, mobile, dashboard, extruded |
| Author | @styleref (https://styleref.io/u/styleref) |
| Palette | #e4e7ef #f7f9fd #bfc5d4 #3a4256 #5b6480 #6b5bff |
| Published | 2026-09-04 |
| Canonical URL | https://styleref.io/share/fdyg3nsx-d14d5ce57c27 |

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

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

## 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/fdyg3nsx-d14d5ce57c27?format=flux        # also: midjourney, diffusion, json
https://styleref.io/api/v1/styles/fdyg3nsx-d14d5ce57c27/style.md           # a ready-to-commit STYLE.md
```

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

```
styleref://gallery/fdyg3nsx-d14d5ce57c27
styleref://gallery/fdyg3nsx-d14d5ce57c27/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/fdyg3nsx-d14d5ce57c27