Week 17 · Aesthetic Movements

One Material, Two States

Same segmented control, three renders. Flat and Material both tell you which mode is on before you've thought about it. The neumorphic one is drawn from exactly the same colour, twice — try to find it.

Predict

In a neumorphic control, is the active state raised further out of the surface, or pressed further in?

Experience

The Extrusion Bench

Four sliders, one card, two numbers. One is how convex the shape reads. The other is how far apart the card’s own colour sits from the page behind it. Move every slider you can and watch whether the second number ever follows the first.

It won’t. The card starts at the dossier’s own canonical recipe — an 8px offset, 16px blur, and a ΔL of zero, meaning the card is, by definition, the same colour as the page it sits on. Its measured boundary contrast at that setting is exactly 1.00:1 — not close to the 3:1 floor, not almost there, just flatly outside the part of the scale contrast is even being measured on. Push the offset and blur sliders as far as they go and that number will not move, because nothing you just changed touched a single pixel’s colour.

The Extrusion Bench

Tune the shadows — watch depth and contrast move on their own

Perceived depth · modelled: 40; 0–100 scale
Boundary contrast · measured: 1.00:1; below the 3:1 floor
Non-text floor · 3:1: Fail
ΔL (element vs. page): 0; Rule 1: keep ≤ 5 to stay "one material"

Light-shadow offset8px

FlushDeep

Dark-shadow offset8px

FlushDeep

Blur16px

HardSoft

Surface vs. background ΔL0

Same materialVisibly separate

Perceived depth is modelled, not measured: it rewards equal-and-opposite shadow offsets and a blur near twice the offset (the recipe’s own ratio), because those are the two invariants the dossier itself says the shape-from-shading illusion depends on. Boundary contrast is measured — the real WCAG relative-luminance formula, run on the card’s and page’s actual rendered colours. The two live on different axes on purpose.

Concept

A Trend Born in a Feed

In late 2019, Ukrainian designer Alexander Plyuto posted a thought experiment to Dribbble: a banking app imagined for a dimension where skeuomorphism never died, rendered as if the whole screen were molded from one sheet of soft, matte plastic. It was never built. It was never meant to be.

In the shot’s comments, a designer named Jason Kelley proposed a name — a portmanteau of “new” (or, by another telling, “neo”) and skeuomorphism. Michal Malewicz respelled it, dropping an “o”, and propagated the word through his December 2019 essay. Get the credit in order: Plyuto made the artifact, Kelley proposed the name, Malewicz respelled and popularised it — not, as some later retellings simplify it, Malewicz alone.

It spread on Dribbble because Dribbble rewards exactly one thing: a static image that stops a scrolling thumb, on a screen with no low-vision users, no glare, no one waiting for a train. Every failure the style later exhibited in production was invisible in the artifact that made it famous — which is the entire lesson of evaluating a trend against the medium it was presented in versus the medium it was for.

It works well when it can be removed without any loss for the product.

Michal Malewicz, “Neumorphism in user interfaces”

That line is Malewicz’s own verdict on the style he named — read as the discipline this whole essay argues for, not as false modesty. His separate 2021 claim that the trend’s lasting legacy is the rehabilitation of inset shadows is graded differently below: plausible, but it is also the claim of the one person with the strongest incentive to find one.

Deconstruction

Which Channel Does the Eye Read?

One control below never changes: its Rest state. Its Active state is built from three independent switches. Turn them off one at a time and watch which ones the readout below actually cares about.

Which channel does the eye actually read?

Rest never changes. Only Active carries the three switches below.

Rest

Active

Shadow only, correctly lit: the active state carves in, and if you look closely you can tell — but at 1.40:1, well under the 3:1 floor, "closely" is doing all the work.

Boundary contrast · measured: 1.40:1; Superdesign's audited figure for a shadow-only edge
Reads as pressed? · modelled: Ambiguous

Real World

Few of These Shipped

CRED built Synth, a full production neumorphic design system, and put it in front of millions of real banking users starting in 2020. In April 2022 — roughly two years later — CRED replaced it with NeoPOP, a hard-edged, high-contrast system, and open-sourced the components.

That is the industry’s verdict, run by the adopter with the most reason to make the soft style work: a luxury brand, a dedicated systems team, full control of a native rendering stack. Apple never adopted it as a system at all — macOS Big Sur (November 2020) borrowed the soft extrusions only for decorative icons and chrome, keeping hard contrast everywhere a user actually had to find something. Drag the panel below to see the two positions this style actually settled into: the one that shipped, and the mitigated one that a handful of teams built instead.

Wi-Fi

Bluetooth

Sign out

Every row, same material — which one is on?

Wi-Fi

Bluetooth

Sign out

Same mood, real fills — on, off and destructive, all legible

The style did not vanish — it retreated to a genuine survivor niche: Home Assistant smart-home dashboards and Apple Watch/Wear OS faces, each with a small, owner-configured, low-stakes control set. That whitelist — few controls, high familiarity, single device, low stakes — is the dossier’s own Part 8 decision framework, and it is a short list. Most screens fail it on the first question.

Experiment

Find the States

Five real controls below, five true states, none of them told to you. Mark what you believe each one is set to, then compare your own error rate to a prediction built from nothing but which legibility channel each control was given.

Find the states

Wi-Fi

Bluetooth

Do Not Disturb

Low Power Mode

Airplane Mode

The modelled error rate is this build’s own construction, not a measured finding: colour-carried controls are modelled near-ceiling, shadow-only controls near chance (the dossier’s own ~1.4:1 measured figure is sub-threshold, not zero-signal), and a scrambled light source is modelled below chance — a wrong shape cue can actively suggest the opposite state.

Challenge

Pay the Debt

One card, one active state, one accent to spend. Clear 3:1 against the page and against the card’s own resting colour — without ever letting the blur fall below 8px, or you haven’t fixed neumorphism, you’ve just quietly become Material.

Challenge · Tune the card

Open

Make the active state distinguishable from both the page and the resting card at 3:1 or better — without dropping the blur below 8px.

Resting

Active

Accent strength15%

NoneFull

Shadow blur16px

HardSoft

Active vs. page: 1.18:1
Active vs. resting: 1.18:1
Shadow blur: 16px; keep ≥ 8px — the soft look

Resting and the page share one colour by Rule 1 — that is the whole single-material claim — so these two numbers move together. There was only ever one number to solve for.

Raise the accent strength — a light tint is not enough, this style has no other channel to spend.

Insight

A shadow is not a signifier until it clears the contrast floor.

Every number on this page that computed convex-versus-concave came from the shadow. Every number that computed whether a stranger could actually find the state came from somewhere else entirely — colour, a border, a label. Neumorphism is not wrong for feeding the first mechanism; shape-from-shading is real, and a correctly-lit extrusion genuinely feels pressable. It is wrong only when it lets the same shadow answer a question it was never built to answer.

Mental model

Whenever a surface signals its own state through a shadow alone,

look for the measured boundary contrast at that edge, not how convincing the shape looks under your own studio lighting,

because depth and legibility are rendered from different variables, and improving one has never once, on this page, moved the other.

TomorrowFind one soft-shadow surface in a product you use — a card, a toggle, a slider track — and ask whether you could describe its current state to someone who cannot see it. If the answer depends on the shadow, it is not an answer yet.

End of experience

← Back to the constellation

One Material, Two States

The Extrusion Bench

A Trend Born in a Feed

Which Channel Does the Eye Read?

Few of These Shipped

Find the States

Pay the Debt

Where this idea goes next

One Material, Two States

The Extrusion Bench

A Trend Born in a Feed

Which Channel Does the Eye Read?

Few of These Shipped

Find the States

Pay the Debt