N · 14 / 26

N — Neumorphism

Controls pressed from the surface itself.

The style

Shaped from the surface.

At the end of 2019 a Dribbble concept for a banking app, by the designer Alexander Plyuto, was shared everywhere. Its cards and buttons were not drawn on the screen; they seemed pushed up out of it. Within weeks the look had a name: neumorphism, new plus skeuomorphism, the old habit of making software look like physical things.

The method is narrow. One surface colour runs through everything. A single light sits up and to the left, so every element casts a dark shadow on one side and catches a pale highlight on the other. Raise an element and it can be pressed; sink it and it reads as on, or full.

The softness is also the weakness. Edges made of shadow almost vanish, and pressed can be hard to tell from raised, which is why the style is hard to make accessible. It works best small: a few physical controls, a thermostat or a player, with text and state carried by contrast and colour.

In use

A home, run from one surface.

A smart-home phone screen at full density: rooms, a dial, lights, energy and a weekly schedule. Turn the dial, change rooms, switch things on.

HomeSaturday, 10 October · 14° outside
21.5°Living target

Heating up to 21.5° · now 20.4°

Humidity
46%
Lights
2 on

Lights

  • Ceiling
  • Floor lamp
  • Shelf strip
Energy today8.4 kWh−12% on last Saturday
62%Solar

Schedule

  • Weekdays21.5°06:30–08:00, 17:30–22:30
    Weekdays schedule
  • Saturday21.0°08:00–23:00
    Saturday schedule
  • Sunday21.0°09:00–22:00
    Sunday schedule
  • Holiday17.0°All day
    Holiday schedule
  1. Raised can be pressedThe room buttons, the stepper, every card that opens.
  2. Sunk is on, chosen or fullThe room you are in, the lights that are on, the dial’s well.
  3. Ink and blue carry the stateNumbers, labels and the blue dot say it first. The shadow repeats it.
  4. One light for the whole phoneTop left, everywhere, so the screen reads as one moulded object.
The kit

Every part, every state.

The parts that screen is built from, in every state. The rows of states hold still for comparison; everything else works.

Button

Disabled drops the shadow and the contrast

Raised 9px at rest, 12px on hover, pressed 6px into the surface.

Text field

Focus ring is always visible, 2px at 6px

Select

The chosen option sinks and turns blue

Switch, checkbox, radio

Eco
Night mode
Fan

Slider

Icon sizes 16, 20, 24

Progress

Firmware update64%
68%Charged
A ring sits in a well, never on top of the surface

Connecting to the hub…

Segments and tabs

3 rooms, 7 lights, 21.5° average.

List rows

Default room
Rows 60 high, 12 apart; icons 16, 20, 24

Card and loading

Living roomUpdated just now
Temp
21.5°
Humidity
46%
Lights
2 on
Loading the Bedroom card
Loading: sunk blanks, a light passing over

Toast

Scene saved
Stays until dismissed; read out politely

Modal

The highest shadow on screen, 24px; the page behind softens

Steps

  1. Done: Room
  2. 2Device
  3. 3Schedule
  4. 4Done
Done sinks, current lifts with a ring, ahead waits

Badges and avatars

  • Eco
  • 3 on
  • Away
  • Offline
33 alerts
  • Mina K., home
  • Joon S., home
  • Ara L., out
Counts and presence in blue, never in shadow
Signature

Move the light.

The whole style is one rule: a single light. Turn the sun round the dial and lower it, and every shadow on this page follows. Then switch on Fix it to see what the style needs before it is accessible.

Light from the upper left, halfway up. Every shadow on the page has moved with it.

Fix it: add what accessibility needs
Edge of a raised card
1.5:1, shadow only
On against off
Shadow only
Secondary text
6.1:1
Tokens

The system, in numbers.

Eight colours, four shadow levels from one recipe, five radii and a spacing scale. Copy them as custom properties.

Palette
  • --surface · #e4e9f0Everything is made of this
  • --shadow · #b8c0ccThe side away from the light
  • --highlight · #ffffffThe side facing it
  • --ink · #2e3440Text and values, 10.2:1
  • --ink-2 · #4c566aLabels and notes, 6.1:1
  • --accent · #4253e8On, chosen, focus, 4.7:1
  • --danger · #b3261eErrors, 5.4:1
  • --edge · #76818fFix it edges, 3.2:1
Typeface · Outfit
  • Pressed, not printed.Extrabold 800
  • Pressed, not printed.Medium 500
  • Pressed, not printed.Light 300
Shadow levels
  • Sunkinset 7px
  • Flat0
  • Raised9px
  • Card16px
  • Lifted24px

One recipe: offset along the light, blur twice the offset, a dark side and a white side.

Radius
  • 14
  • 20
  • 28
  • 36
  • Pill
Spacing
  • 4
  • 8
  • 12
  • 16
  • 24
  • 32
  • 40
:root {
  --surface: #e4e9f0;
  --shadow: #b8c0cc;
  --highlight: #ffffff;
  --ink: #2e3440;
  --ink-2: #4c566a;
  --accent: #4253e8;
  --danger: #b3261e;
  --edge: #76818f;

  /* One light, upper left. Offset × light, blur = 2 × offset. */
  --raise-sm: 9px 9px 18px var(--shadow), -9px -9px 18px var(--highlight);
  --raise: 16px 16px 32px var(--shadow), -16px -16px 32px var(--highlight);
  --raise-lg: 24px 24px 48px var(--shadow), -24px -24px 48px var(--highlight);
  --well: inset 7px 7px 14px var(--shadow), inset -7px -7px 14px var(--highlight);

  --radius-control: 14px;
  --radius-well: 20px;
  --radius-card: 28px;
  --radius-panel: 36px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --press: 0.35s var(--ease);
}

Do

  • One surface, one light. Every shadow agrees on where the light is.
  • Raise what can be pressed. Sink what is on, chosen or full.
  • Carry text and state with contrast and colour, never with shadow alone.
  • Keep it to a few controls. A whole page of soft shadow reads as fog.

Don’t

  • State by shadow alone

    Off or on? Without the blue dot and a label, nobody can tell.

  • Pale text on the surface

    1.9:1. Text needs 4.5:1; this page’s ink is 10.2:1.

  • Everything raised

    Nine equal pillows. With nothing sunk, nothing stands out.

In the wild

Where the style shows up outside this page.

  • 2012

    iOS 6

    Apple
    The skeuomorphism it remixes: buttons with real bevels and soft shadows.
  • 2019

    Skeuomorph Mobile Banking

    Alexander Plyuto
    The Dribbble shot that started it: controls pressed out of the background itself.
  • 2019

    Neumorphism in user interfaces

    Michał Malewicz
    The article that took the shot seriously, then named the catch: buttons this soft barely stand out.
  • 2020

    Neumorphism.io

    Adam Giebl
    The whole style as one panel: a colour, a corner for the light, and the shadow pair it writes as CSS.