Material Design

# Visual style: Material Design

Google's design system based on the metaphor of paper and ink, emphasizing hierarchy, motion, bold colors, and responsive interactions -- the standard for modern mobile design.

## Philosophy
Material Design is Google's cross-platform design language, introduced in 2014 and still evolving. Its founding insight was deceptively simple: treat the interface as a physical material -- paper with real thickness, resting on a stage with real light.

That metaphor drives every rule in the system. Surfaces have elevation, elevation casts shadows, and shadows communicate hierarchy. A dialog floats above a card; a card floats above the page. Users never need to learn a legend to know what sits on top of what.

Core principles:
- Material metaphor: Surfaces are sheets of paper. They have edges, they can be stacked, folded and moved, but they never pass through one another
- Elevation and light: A single light source from above casts shadows whose size encodes height -- a resting card sits at elevation 1, a floating action button at elevation 6
- Bold color: A primary and a secondary color carry the entire identity, applied flat and full-bleed rather than as outlines or effects
- Meaningful motion: Animation exists to explain spatial relationships -- where a surface came from, where it went -- never as decoration
- Responsive grid: An 8dp baseline grid and a 12/8/4-column responsive layout keep rhythm consistent from watch to desktop

In practice the language shows up as rectangular surfaces with subtle rounded corners (4dp in the classic spec, 16-28dp in Material 3), filled buttons that use color rather than borders, and a type scale built on Roboto -- or the platform's own face under Material You. The signature move is restraint: one accent, one elevation language, and no shadow that does not correspond to a real stack.

Suitable for: Android and cross-platform products, admin dashboards and settings screens, design systems that must scale to hundreds of contributors, and any interface where clarity of hierarchy matters more than novelty.

## Do
- Use elevation shadow system to express hierarchy
- Apply ripple effects as click feedback
- Use bold vivid colors
- Maintain 8dp spacing grid
- Use Roboto font
- Add meaningful micro-animations
- Precise dual-layer elevation shadows: hover from dp2 to dp8, shadow-[0_1px_3px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.24)] to shadow-[0_14px_28px_rgba(0,0,0,0.25),0_10px_10px_rgba(0,0,0,0.22)] (Elevation Physics)
- Use Material standard easing curve ease-[cubic-bezier(0.4,0,0.2,1)] duration-[250ms] (Deceleration Curve)
- Button active:scale-[0.98] (Pseudo-Ripple, finger press ripple prelude)
- Card hover:-translate-y-1 paired with elevation shadow upgrade (Z-axis physical lift feel)

## Don't
- Do NOT use inconsistent shadow depths
- Do NOT use overly soft color schemes
- Do NOT omit interaction feedback
- Do NOT break the 8dp grid system
- Do NOT omit active:scale-[0.98] on buttons (Material Pseudo-Ripple is core to tactile authenticity)
- Do NOT use non-Material standard easing curves (must use cubic-bezier(0.4,0,0.2,1))
- Do NOT keep card shadows unchanged on hover (elevation change is a Material physics rule, cannot be omitted)

## Rules for the AI
You are a Material Design frontend development expert. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Using inconsistent shadow depths
- Using overly soft muted color schemes
- Omitting interaction feedback effects
- Breaking the 8dp grid system

## Must Follow

- Elevation shadows shadow-[0_1px_3px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.24)]
- Primary color bg-[#6200ee] text-white
- Accent color bg-[#03dac6]
- Rounded cards rounded-xl
- Uppercase button text uppercase tracking-wider

## Color Palette

- Primary: #6200ee (purple)
- Primary variant: #3700b3
- Secondary: #03dac6 (cyan)
- Background: #fafafa
- Surface: #ffffff
- Error: #b00020

## Spacing

- Based on 8dp grid
- p-2 (8px), p-4 (16px), p-6 (24px), p-8 (32px)

## Animation & Interaction Rules

- Elevation Physics: Hover lifts from low to high elevation shadow, optionally paired with slight -translate-y-1 to enhance Z-axis feel.
- Pseudo-Ripple: Active state must include at least active:scale-[0.98] or brightness press feedback, simulating touch ripple prelude.
- Deceleration Curve: Interaction transitions prefer ease-[cubic-bezier(0.4,0,0.2,1)], duration 200-300ms.
- Input Float: On input focus, label must smoothly float up and shrink, with border highlight transitioning in sync.