Applying a Neumorphism visual direction

What “Neumorphism” means here

Neumorphism makes controls look extruded from, or pressed into, one continuous surface. The surface and controls share a mid-luminance fill; paired light and dark shadows provide the relief. Its central constraint is non-negotiable: relief is material language, never the only evidence that text or a control exists.

Recommendations

• Choose one mid-tone background and use it for its controls and containers.
• Use exactly two opposing shadows, with one consistent light direction across the whole interface.
• Show both raised resting controls and recessed selected or pressed states.
• Give wellness metrics and essential controls high-contrast text, labels, and indicators independent of the shadows.
• Keep rounding generous and nesting shallow so the continuous material remains believable.

Avoid

• White or black grounds, borders, gradients, and controls filled differently from their background.
• More than one light source or a third shadow used as decoration.
• Small, low-contrast labels or controls discoverable only through soft relief.
• Deeply nested raised surfaces, which turn the page into unrelated cards.

A working order

1. Set the mid-tone material and calculate text contrast against it before styling depth.
2. Decide the global light direction and define the two corresponding shadows once.
3. Arrange the wellness controls as one shallow surface, not a card stack.
4. Assign raised and recessed states to meaningful wellbeing actions.
5. Add direct labels, icons, or fill cues wherever relief alone would be ambiguous.
6. Recheck every state at narrow width and with shadows mentally removed.

How to check your own work

• Do controls and their container share the same fill?
• Does every relief use exactly two shadows with opposite offsets?
• Can someone identify every essential action without seeing shadows?
• Are raised and recessed states both visibly present?

Neumorphism — Specification

Definition

Neumorphism is a web-interface design style in which elements appear extruded from, or pressed into, a single continuous surface. The element and its container share one fill color, and separation is produced entirely by a pair of opposing shadows — one lighter than the surface, one darker — with no borders present. Because depth is the sole visual separator, the style is only shippable when contrast requirements are satisfied independently of the shadows.

Core principles

• One continuous material. Elements are not placed on the surface; they are formed from it.
• Paired opposing shadows. A light and a dark shadow, offset in opposite directions, produce the extrusion.
• A single light source. One consistent light direction across the page keeps the surface reading as continuous.
• Two states only. Raised and recessed are the style’s vocabulary, and both must be visibly present.
• Depth is not contrast. Legibility and control discoverability are established by something other than the shadow.

Visual characteristics

• A mid-luminance solid background, never white or black.
• Controls and panels filled with exactly the background color.
• Two shadows per surface: one pale, one dark, offset oppositely.
• No borders, outlines, or hard edges anywhere.
• Inset shadows expressing pressed or selected states.
• Generous rounding, which strengthens the impression of moulded material.

Rules

1. Shared fill. Elements and their container use the same color. Acceptance criterion: The computed background-color of each control differs from its containing surface by 3% or less in relative luminance.

2. Paired opposing shadows. Extrusion is produced by exactly two shadows. Acceptance criterion: Each neumorphic surface has a box-shadow containing exactly two shadows whose offsets are opposite in sign, one lighter and one darker than the background color.

3. No borders. Separation never uses an edge. Acceptance criterion: Computed border-width is 0 on every neumorphic surface.

4. Mid-luminance ground. The background leaves room for both shadows. Acceptance criterion: The page background is a solid color with a relative luminance between 0.15 and 0.85.

5. Single light direction. The surface reads as continuous. Acceptance criterion: Every light shadow on the page shares the same sign of offset on both axes.

6. Raised and recessed both exist. The interaction model is expressed spatially. Acceptance criterion: The pressed or selected state uses an inset shadow while the resting state does not, and both states are present in the interface.

7. Contrast independent of relief. Legibility does not depend on the shadow. Acceptance criterion: All text measures at least 4.5:1 and every essential control boundary or indicator measures at least 3:1 against the background, with shadows excluded from the measurement.

8. Shallow surface hierarchy. Relief does not stack into unrelated cards. Acceptance criterion: No raised surface is nested inside more than one other raised surface.

9. Direct control labels. Essential actions are named independently of material depth. Acceptance criterion: Every essential control includes visible text or a high-contrast icon with an adjacent text label.

10. Measured state change. Selection is spatial and remains identifiable without color. Acceptance criterion: A selected control changes from outset to inset relief and includes a visible text, icon, or position cue.

11. Generous touch separation. Controls do not need borders to remain individually findable. Acceptance criterion: Adjacent controls have at least 8px of visible gap at every breakpoint.

Avoid

• White or black backgrounds, which eliminate one of the two shadows.
• Elements filled differently from their container.
• Borders, outlines, or hard edges used to reinforce separation.
• More than one light direction on a page.
• Shadow alone signalling that an element is interactive.
• Small or fine text, which the low ambient contrast makes disproportionately hard to read.
• Extruded surfaces nested more than one level deep.

Acceptance criteria

• Rule 1: Controls and their containers differ by 3% or less in luminance.
• Rule 2: Every surface has exactly two opposing shadows, one lighter and one darker.
• Rule 3: No neumorphic surface has a border.
• Rule 4: The page background luminance falls between 0.15 and 0.85.
• Rule 5: All light shadows share one offset direction.
• Rule 6: Pressed states use inset shadows and resting states do not.
• Rule 7: Text meets 4.5:1 and control indicators meet 3:1 excluding shadows.
• Rule 8: Raised hierarchy never nests deeper than one level.
• Rule 9: Essential controls have direct visible labels.
• Rule 10: Selected controls are inset and retain a non-color cue.
• Rule 11: Adjacent controls retain an 8px visible gap.

Blocking failures

• A control’s only indication that it is interactive is its shadow, measured below 3:1, leaving it undiscoverable for readers who cannot resolve soft two-tone depth. This is the defining failure of the style and the reason Rule 7 exists.
• Text falls below 4.5:1 against the surface, which the low ambient contrast of the style makes easy to miss and impossible to compensate for with relief.
• No pressed state exists, so activation is unconfirmed and the style’s only interaction affordance is absent.

These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.

Responsive adaptation guidance

• Shadow offset and blur may scale down proportionally at narrower viewports, but both shadows remain present; dropping to a single shadow flattens the surface and ends the style.
• Rule 7 is re-verified at every breakpoint and at increased text scaling, since smaller rendered text on a low-contrast surface is where the style fails first.
• Rounding may reduce at narrow widths without affecting any rule.
• The shared-fill (Rule 1), border-free (Rule 3), and single-light-direction (Rule 5) rules hold unchanged at every breakpoint.
• Where a narrow viewport forces controls close together, spacing is increased rather than adding separators, since a separator line would violate Rule 3.