Neomorphism Dashboard

Create a neomorphism (soft UI) dashboard. Elements should look moulded from one soft material — raised out of the surface or pressed into it — rather than placed on top of it.

Brief

Subject: Hearth — a home energy and climate dashboard for a family house with solar panels and a heat pump

Fill the dashboard with realistic data for this subject: units, time ranges, device and room names, alerts. The data is what makes it believable

Design Requirements

Surface: One flat matte colour (#e0e5ec) for the page and every component — depth comes only from light and shadow

Raised: box-shadow: 8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff

Pressed / inset: box-shadow: inset 4px 4px 8px #a3b1c6, inset -4px -4px 8px #ffffff — for inputs, the active nav item and toggled controls

Accent: #e8590c only for live values, active states and chart lines

Typography: Manrope; large tabular numerals for key readings, labels in sentence case

Contrast: Soft UI fails accessibility easily — text stays at least 4.5:1 against the base, and state is never shown by shadow alone

Sections to Include

Sidebar Navigation — Icon + label nav; the current page is pressed in

Top Bar — Inset search field, notifications, profile

Stats Cards Row — Four raised tiles with the subject's most important readings, each with a trend and a comparison

Chart Section — Area or line chart (inline SVG) in a raised panel, with a pressed segmented control for the time range

Recent Activity — Event list with timestamps

Quick Actions — Circular dials, toggles and sliders that press in when active

Technical Details

CSS custom properties for the whole shadow system so the base colour can be swapped

Controls really toggle between raised and pressed on click (200ms transition)

Charts drawn in inline SVG — no chart libraries

Responsive: the sidebar becomes a bottom bar on mobile

Visible focus ring in the accent colour; honour prefers-reduced-motion

No ALL-CAPS labels or decorative gradients — let the shadows carry the style