Interface systems Illustrative reference Copy-ready LLM prompt

Material Design

A systematic interface language built around surfaces, elevation, bold color, clear hierarchy, and purposeful motion.

Illustrative project dashboard with structured surfaces, elevation, and role-based color inspired by Material Design principles.
Original illustrative recreation—not a generated result or proprietary product screenshot. Original HTML/CSS illustration; no Google assets

Copy-ready LLM prompt

Material Design: Copy-ready LLM prompt

Use this as a starting brief, then adapt the content, brand, and interaction requirements for your project.

Create an original interface informed by Material Design principles: structured surfaces, a clear elevation hierarchy, role-based color tokens, legible typography, consistent spacing, and recognizable component states. Include a top app bar, cards, buttons, navigation, and feedback patterns without copying a Google product screen or using Google branding. Specify responsive behavior, keyboard focus, reduced-motion behavior, and light/dark theme tokens.

Recognition traits

How to recognize this style

A systematic interface language built around surfaces, elevation, bold color, clear hierarchy, and purposeful motion.

  1. 01 Elevation
  2. 02 Color roles
  3. 03 Structured grid
  4. 04 Clear states