Neumorphism 2.0 Design System
Optimized for Apple Retina & Liquid Retina XDR Displays (2025-2026)
Buttons
Button Variants
Button Sizes
Icon Buttons
Interactive Buttons
Cards
Standard Card
Default neumorphic card
This is a standard card with neumorphic shadow effects. It has soft shadows and a tactile feel.
Glass Card
Glassmorphism variant
Glass card with backdrop blur and transparency. Perfect for overlay elements.
Raised Card
More depth
Raised card with more pronounced shadow for emphasis and hierarchy.
Interactive Card
This card responds to clicks and hovers with smooth animations and visual feedback.
Form Elements
Input Fields
Checkboxes & Radios
Toggle Switches
Navigation & Badges
Navigation
Glass Navigation
Badges
Progress & Loading
Progress Bars
Spinners
Skeleton Loading
Neumorphic Surfaces
Standard Surface
Default neumorphic effect
Raised Surface
More pronounced depth
Pressed Surface
Inset appearance
Glass Hierarchy
Background Layer
More blur (z-index: 1)
Middle Layer
Medium blur (z-index: 5)
Front Layer
Less blur (z-index: 10)
Micro Interactions
Pulse
Breathe
Shimmer
Spin (click)
Tooltips
Typography
Heading 1 - 2.5rem
Heading 2 - 2rem
Heading 3 - 1.75rem
Heading 4 - 1.5rem
Heading 5 - 1.25rem
Heading 6 - 1rem
Regular paragraph text with optimal line-height for readability. The Inter variable font provides excellent rendering on all Apple displays.
Secondary text color for less prominent information.
Accent color text for highlights and links.
Design Constitution
This design system follows the Neumorphism 2.0 Constitution, optimized for Apple Retina and Liquid Retina XDR displays. Every component embodies principles of soft light, tactile illusion, and minimal cognitive load.