Material Lab

Neumorphic & Skeuomorphic Design System

Design Language

Elevations laboratory

Core States

Fundamental neumorphic states

Flat
Raised
Sunk
Pressed

Depth Scale

Consistent depth levels (1-5)

Depth 1
Depth 2
Depth 3
Depth 4
Depth 5

Geometric

Shape-aware depth treatments

Radial Raised
Radial Sunk
Extrude
Impress

Components

Pre-styled UI components

Button
Card
Input
Alert

Shapes

Square
Circle
Rectangle
Pill
Rounded
Squircle
Donut
Asymmetric

Special Materials

Glass (Clear)
Glass (Frosted)
12:34
LCD Display
Potion Tubes CSS technique adapted from CodePen by Nilesh Kurrey

Lines & Dividers

Flat
Impressed
Expressed