Material Design is Google's cross-platform design system, organizing interfaces around a 'material' metaphor: components are layered sheets of paper, elevation shadows express hierarchy, and dynamic color (Material You) derives themes from the user's wallpaper. Its token system spans light/dark theming and motion specs, with explicit rules for shape, state layers, and ripple feedback. Made for Android ecosystems and systematic product teams.
EnterpriseMinimal
Prompt Template
Base Template
Design a Material Design-inspired interface. Colors: #C8B3FD, #16A34A, #D97706, #DC2626 with #16A34A accent. Typography: #6442D6.
Variant Prompts
📱 Mobile
Design a mobile app with Material Design aesthetics. Use Material Design color identity with #16A34A accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Material Design style. Use Material Design color identity with #16A34A accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Material Design design language. Use Material Design color identity with #16A34A accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Material Design visual identity. Use Material Design color identity with #16A34A accents. Compelling, conversion-focused.
Usage Examples
Material Design App
WebBuild a web app with Material Design design language and #16A34A color system.
Material Design Dashboard
DashboardCreate a dashboard using Material Design style with data visualization and #6442D6 typography.
✅ Best For
- Enterprise
- Consistent cross-platform product systems
- Android ecosystem apps and sites
❌ Avoid For
- Anti-polish brutalist sites
- Strong-personality art pages
DESIGN.md File
A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.