Neomorphic Dashboard

# Neomorphic Dashboard Page

Create a soft UI dashboard with extruded elements that appear to push out from the background, using subtle dual shadows for depth.

## Design Specifications

**Style**: Neumorphism / Soft UI
**Typography**: Clean, medium weight sans-serif
**Layout**: Dashboard with sidebar, cards, and data displays
**Colors**: Light gray background with subtle shadow play

## Prompt for AI Code Generation

```
Build a neomorphic dashboard with these characteristics:

LAYOUT:
- Fixed sidebar navigation (240px wide)
- Main content area with card grid
- Stats cards at top
- Chart area and activity list below

NEUMORPHIC EFFECT:
- Background: #e0e5ec (light gray)
- Raised elements:
  box-shadow: 8px 8px 16px #b8bec7, -8px -8px 16px #ffffff
- Inset/pressed elements:
  box-shadow: inset 4px 4px 8px #b8bec7, inset -4px -4px 8px #ffffff
- Smaller elements use proportionally smaller shadows

TYPOGRAPHY:
- Labels: 12px, uppercase, tracking wide, muted color
- Values: 24-32px, font-weight 600
- Body: 14px, regular weight

COLORS:
- Background: #e0e5ec
- Shadow dark: #b8bec7
- Shadow light: #ffffff
- Text: #4a5568 (primary), #718096 (secondary)
- Accent: #6366f1 (indigo for active states)

INTERACTIONS:
- Buttons: raised by default, inset on active/pressed
- Cards: subtle hover lift
- Toggle switches with inset track, raised knob
- Progress bars with inset background

SECTIONS TO INCLUDE:
1. Sidebar with logo, nav items, user profile
2. Top stats row (4 metric cards)
3. Revenue chart area (placeholder)
4. Recent activity list
5. Project progress bars
6. Quick action buttons

TECHNICAL:
- Use inline styles for complex shadows (Tailwind can't do multi-shadow)
- Consistent shadow sizing (8/16 for large, 4/8 for small)
- No harsh borders - shadows define edges
- Soft border-radius (12-16px)
```

## Example React Component Structure

```tsx
const neuShadow = '8px 8px 16px #b8bec7, -8px -8px 16px #ffffff';
const neuInset = 'inset 4px 4px 8px #b8bec7, inset -4px -4px 8px #ffffff';

export default function NeomorphicDashboard() {
  return (
    <div className="flex min-h-screen w-full bg-[#e0e5ec]">
      {/* Sidebar */}
      <aside className="flex w-60 flex-col p-6" style={{ boxShadow: neuShadow }}>
        <div className="mb-8 rounded-xl p-4" style={{ boxShadow: neuShadow }}>
          <span className="font-bold text-gray-600">Dashboard</span>
        </div>

        {['Dashboard', 'Analytics', 'Users'].map((item) => (
          <button
            key={item}
            className="mb-2 rounded-xl px-4 py-3 text-left text-gray-600"
            style={{ boxShadow: item === 'Dashboard' ? neuInset : 'none' }}
          >
            {item}
          </button>
        ))}
      </aside>

      {/* Main */}
      <main className="flex-1 p-8">
        <div className="mb-8 grid grid-cols-4 gap-6">
          {['Revenue', 'Users', 'Orders', 'Conversion'].map((stat) => (
            <div key={stat} className="rounded-2xl p-6" style={{ boxShadow: neuShadow }}>
              <div className="mb-2 text-xs tracking-wider text-gray-500 uppercase">{stat}</div>
              <div className="text-2xl font-semibold text-gray-700">$24,500</div>
            </div>
          ))}
        </div>
      </main>
    </div>
  );
}
```

## CSS Variables

```css
:root {
  --neu-bg: #e0e5ec;
  --neu-shadow-dark: #b8bec7;
  --neu-shadow-light: #ffffff;
  --neu-raised: 8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light);
  --neu-inset:
    inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light);
  --border-radius: 16px;
  --color-text: #4a5568;
  --color-accent: #6366f1;
}

.neu-raised {
  box-shadow: var(--neu-raised);
}

.neu-inset {
  box-shadow: var(--neu-inset);
}
```

## Key Principles

1. **Soft edges**: No hard borders, shadows define all edges
2. **Consistent lighting**: Light comes from top-left always
3. **Subtle depth**: Elements feel extruded, not floating
4. **Muted colors**: No saturated colors, everything is soft
5. **Interactive feedback**: Pressed states use inset shadows