Soft Extruded Neumorphic UI

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.

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