Material-Design-Web-App

Create a Material Design 3 inspired web application. Follow Google's design system principles with elevation, shape, color, and motion.

Design Requirements

Elevation System: Use box-shadow levels (0-5) to create visual hierarchy

- Level 0: flat, Level 1: subtle shadow, Level 3: prominent shadow

Color System: Primary (#6750a4), secondary (#625b71), surface (#fffbfe), with tonal variations

Shape: Rounded corners using Material's shape scale (4px, 8px, 12px, 16px, 28px)

Typography: Roboto with Material's type scale (display, headline, title, body, label)

Components to Build

Top App Bar — Elevated or flat, with title, navigation icon, action icons

Navigation Drawer — Side drawer with sections, active state with primary tonal fill

Cards — Elevated, filled, and outlined variants

Buttons — Filled, tonal, outlined, and text button variants

FAB (Floating Action Button) — Primary action button with shadow

Chips — Filter chips, suggestion chips with selection state

Text Fields — Outlined and filled variants with floating labels

Page Layout

Dashboard with navigation drawer, top app bar

Main content area with card grid showing data

Detail view with full Material component showcase

Technical Details

CSS custom properties for the entire color/elevation/shape system

Ripple effect on buttons and interactive elements (CSS or JS)

Responsive: drawer becomes bottom nav on mobile

Smooth transitions following Material motion guidelines