Hub

Neumorphism

Depth through light and shadow only. Every element shares the same surface color.

Music Player

Soft Horizons

The Neumorphs

1:472:51
Volume 72%

Smart Home

22°
Temp
65%
Humidity
Living Room
Bedroom
Kitchen

Weather

24°
Partly Cloudy
48%
Humidity
12 km/h
Wind
UV 3
Index

Clock

10:24
Wednesday, March 6

Progress

72%
CPU
50%
RAM
27%
Disk
Download 83%
Upload 41%

Form Elements

Statistics

1,284
Users
96.7%
Uptime
3.2s
Avg Load

Shadow Depth Palette

One color, four depths — all #e0e5ec

Flat
Raised
Concave
Convex

AI Request Prompt

Design a landing page in Neumorphism style — monochromatic surfaces where depth comes entirely from light and shadow embossing on a single background color.

COLOR TOKENS:
--bg: #e0e5ec
--text: #344055
--text-muted: #8a96a8
--accent: #1a73e8
--shadow-dark: rgba(163,177,198,0.6)
--shadow-light: rgba(255,255,255,0.5)
No other colors. Background, cards, and buttons all use #e0e5ec.

TYPOGRAPHY:
Font family: 'Poppins', sans-serif. Weights: 300 (light), 400 (regular), 600 (semibold).
h1: font-weight: 600, font-size: clamp(2.5rem, 5vw, 4rem), letter-spacing: -0.02em.
h2: text-transform: uppercase, font-size: 1.1rem, letter-spacing: 2px, color: #8a96a8.
Body: font-size: 1.2rem, color: #8a96a8.
Panel text: font-size: 0.9rem.

UI:
Hero section: background #e0e5ec, border-radius: 40px, padding: 50px, text-align: center.
Inset panels: background #e0e5ec, border-radius: 20px, padding: 30px, text-align: left.
Buttons: background #e0e5ec, border-radius: 30px, padding: 10px 20px (nav) / 15px 40px (CTA), font-weight: 600, color: #1a73e8.
No visible borders on any element.

LAYOUT:
Page container: width: min(1000px, 92vw), margin: 0 auto, padding: 40px 0 80px.
Panel grid: display: grid, grid-template-columns: 1fr 1fr, gap: 40px, margin-top: 40px.

SHADOW SYSTEM (critical — the only depth mechanism):
Raised (convex): 10px 10px 20px rgba(163,177,198,0.6), -10px -10px 20px rgba(255,255,255,0.5).
Inset (concave): inset 8px 8px 16px rgba(163,177,198,0.6), inset -8px -8px 16px rgba(255,255,255,0.5).
Button raised: 6px 6px 12px rgba(163,177,198,0.6), -6px -6px 12px rgba(255,255,255,0.5).
Button active (pressed): inset 4px 4px 8px rgba(163,177,198,0.6), inset -4px -4px 8px rgba(255,255,255,0.5).

MOTION:
Button hover: slight scale increase, transition: 0.2s.
Button :active: switches from raised to inset shadow + transform: translateY(2px), transition: 0.2s.
No other animations.

RESPONSIVE:
≤768px: panel grid collapses to grid-template-columns: 1fr (single column).
≥1000px: page width caps at 1000px, 2-column panel grid maintained.

FORBIDDEN:
- border property on any element (depth from box-shadow only)
- Colorful or gradient backgrounds (monochromatic #e0e5ec only)
- Dark mode or dark backgrounds
- Visible outlines or dividers
- Drop shadows with color tints

OUTPUT:
1) CSS custom properties for raised/inset shadow pairs and color tokens
2) Hero section (centered) + inset panel grid (2 columns) + button set
3) Single-file HTML/CSS with responsive support