2020–present
Neomorphism
Soft machines. Interfaces you want to touch.
Principles
Extruded, Not Flat
Every element is pushed out of the background or pressed into it. There is no flat surface — only raised buttons and sunken inputs. The interface has physical depth.
This is achieved entirely through shadow: a light shadow on one side, a dark shadow on the other. The background color is the same everywhere — only light reveals the form.
Monochromatic Surface
Background and foreground share the same color. There is no 'card' with a different background — only the same surface, sculpted by light and shadow into different elevations.
This constraint is radical: color cannot create hierarchy. Only shadow can.
Tactile Interaction
Buttons look pressable. When clicked, they should appear to sink into the surface. The raised state becomes a pressed state — shadows invert.
This creates a physical metaphor stronger than any other digital style: you are not clicking pixels, you are pressing soft material.
Minimal Color
Color is used only for accent — a single hue that marks interactive or important elements. Everything else is gray, sculpted by light.
Why This Style Exists
Neomorphism (a portmanteau of 'new' and 'skeuomorphism') emerged in late 2019 when designer Alexander Plyuto posted a concept on Dribbble that went viral. It proposed a middle ground between flat design and skeuomorphism.
The style asks: what if we kept flat design's simplicity but brought back physical depth? Not through realistic textures (old skeuomorphism) but through pure light and shadow.
Where it appeared
- Dribbble concepts (2019–2020) — the style exploded as a design exercise
- Smart home interfaces — physical controls rendered as soft, pressable surfaces
- Dashboard UIs — data visualization with tactile, raised cards
Legacy
Neomorphism proved controversial — beautiful in mockups, problematic in production (accessibility issues with low-contrast borders). But it expanded the vocabulary of digital depth.
Its influence lives on in subtle ways: soft shadows, monochromatic surfaces, and the idea that interfaces can feel tactile without being skeuomorphic.
Typography
Neomorphism typography is clean and geometric. The font must not compete with the shadow effects — it should feel embedded in the surface, part of the same material.
- Geometric sans-serif — clean, modern, unobtrusive.
- Medium weights — not too bold (would feel heavy), not too thin (would feel disconnected from the tactile surface).
- Subtle color difference — text is darker than the surface but not black. It feels printed on the material.
Colors
Neomorphism color is almost no color. The entire interface is one hue at different shadow levels. The accent color is the only exception — and it must be used sparingly.
- Single background hue — everything is the same color. Depth comes from shadow, not from color difference.
- Light and dark shadows — white shadow on one side, dark shadow on the other. This creates the 3D illusion.
- One accent — a single saturated color for interactive elements.
Shapes
Neomorphism shapes are defined entirely by shadow, not by border. There are no visible borders — only the interplay of light and dark shadows that make elements appear raised or sunken.
The border-radius is generous (matching the soft shadow aesthetic) and consistent across all elements.
- No borders — borders are replaced by shadow pairs. The edge is implied, not drawn.
- Consistent radius — 12px to 20px everywhere. Uniformity reinforces the 'single material' illusion.
- Dual shadows — every raised element has a light shadow (top-left) and dark shadow (bottom-right).
- Inset for pressed states — interactive elements use inset shadows when active.
Contrast
Neomorphism contrast is shadow-based. Not color contrast (like Memphis), not value contrast (like Dark Luxury). Here, the only contrast is between raised and sunken — between light shadow and dark shadow.
Light shadow and dark shadow
The fundamental pair. A white shadow on one side, a dark shadow on the other. Together they create the illusion of a surface pushed out from (or pressed into) the background. This is the only contrast mechanism.
Raised and pressed
A button in its default state is raised (outset shadows). When clicked, it becomes pressed (inset shadows). The contrast between these two states is the entire interaction language.
Surface and accent
The monochrome surface against a single saturated accent color. The accent is the only 'real' color — everything else is gray sculpted by light. This makes the accent extraordinarily powerful.
Rhythm
Neomorphism rhythm is uniform and calm. Every element has the same shadow treatment. Every card has the same radius. The rhythm comes from repetition of identical forms — like tiles on a wall.
The tile grid
Elements repeat at regular intervals with identical proportions. The rhythm is architectural — like bricks, like tiles, like a relief sculpture. Each element is the same shape, the same size, the same shadow.
Shadow consistency
Every raised element has the same shadow offset, the same blur, the same colors. This absolute consistency is what creates the 'single material' illusion. One inconsistent shadow breaks everything.
Generous gaps
Elements need space between them — not for breathing (like Nordic) but for shadow room. Shadows need space to render. Tight spacing causes shadow collisions that destroy the 3D illusion.
Hierarchy
Neomorphism hierarchy is the most constrained on this site. Without color variation and without border variation, hierarchy must come from shadow depth and size alone.
Shadow depth
Larger shadows = more elevated = more important. A card with 8px shadow offset is 'higher' than one with 4px. The hierarchy is literally physical — closer to the viewer means more important.
Size
Larger elements are more important. This is the simplest possible hierarchy — and in neomorphism, simplicity is mandatory. The style cannot support complex hierarchical systems.
The accent color
The single accent color marks the most important interactive element. Because it is the only color, it carries enormous weight. Use it once per view — never twice.
Signature Traits
Neomorphism is identified by its material illusion — the sense that the interface is carved from a single piece of soft material.
The dual shadow
Light shadow (top-left) + dark shadow (bottom-right). This pair is the entire visual system. Without it, neomorphism does not exist. With it, flat rectangles become three-dimensional objects.
Monochrome surface
Background and foreground are the same color. This is the radical constraint. No card has a different background. No panel is lighter or darker. Depth comes only from shadow, never from color.
Single light source
All shadows point the same direction — implying a single light source (typically top-left). Change the direction on one element and the physical metaphor collapses. Consistency is non-negotiable.
The accessibility problem
Neomorphism's greatest weakness is also its signature: low contrast. Same-colored surfaces with only shadow for separation can be difficult to perceive for users with visual impairments. This is not a flaw to hide — it is a limitation to acknowledge. The style is beautiful but not universally accessible.
Space
Space in neomorphism must be generous — the shadows need room to breathe. Elements too close together create shadow collisions that break the 3D illusion. Each raised element needs clear air around it.
Light
Light in neomorphism comes from a consistent direction — typically top-left. This single light source creates the shadow pairs that define every element. Change the light direction and the entire interface must change with it.
How This Style Breaks
Neomorphism is the most fragile style in this collection. Small mistakes destroy the illusion completely.
Different background colors for cards
The moment a card has a different background than its container, the 'single material' illusion breaks. Everything must be the same color — only shadow creates separation.
Visible borders
A border says 'this is a separate element.' Neomorphism says 'this is the same surface, raised.' These are contradictory messages.
Inconsistent light direction
If one element has light from the top-left and another from the bottom-right, the physical metaphor collapses. One light source, always.
Low contrast text
The biggest accessibility problem. Text on a same-colored background with only shadow for separation can be hard to read. Ensure sufficient contrast ratios.