Approach · 2014–present · Google; international adoption
Material Design
A system of surfaces, roles, and behaviour.
What is Material Design?
Material Design is Google’s evolving design system, not a synonym for every interface with cards and shadows. Its early visual metaphor treated digital surfaces as layered material, combining strong graphic hierarchy with meaningful movement. Later versions expanded theming, component guidance, and colour systems. The durable lesson is systematic consistency: components, states, tokens, and motion rules work together. Designers should identify the version and platform they are adapting instead of mixing unrelated screenshots under a vague Material label.
The story
Introduced in 2014, Material helped coordinate interfaces across products and devices. Material 3 continues the system through guidance for accessibility, layout, interaction states, tokens, and customization. A project can learn from that structure without copying Google’s brand or default colour palette.
How do you recognise Material Design?
- Explicit surface and container hierarchy
- Reusable components with documented states
- Role-based colour and typography tokens
- Motion that explains changes in the interface
Colour, type, layout and material
- #6750A4
- #EADDFF
- #FFFBFE
- #1C1B1F
Typography. Use a documented type scale with display, headline, title, body, and label roles. Adapt family and weight to the product rather than imitating defaults blindly.
Composition. Build from responsive layout regions and stable component anatomy. Use elevation and containers only when they clarify grouping or interaction priority.
Materials. Digital surfaces, vector iconography, design tokens, component libraries, and purposeful state transitions. Material is a behavioural metaphor, not a requirement to depict literal paper.
Why does Material Design work?
Consistent patterns can reduce relearning across tasks. Layering may help communicate relationships between surfaces, but excessive elevation creates noise. Neither rounded shapes nor a particular palette guarantees trust; usability depends on content, behaviour, and context.
The principle. Design behaviour as well as appearance. A component’s dimensions, hierarchy, interaction, and transitions should follow shared rules. The creative work lies in expressing the product through those rules while maintaining predictable patterns across a complete experience.
Where it was used
Material Design 3 foundations, Google, 2021 onward. Google’s published foundations connect accessibility, content, tokens, interaction states, and layout into a reusable system. The documentation is the primary reference for implementation.
- Large product families
- Android-oriented interfaces
- Teams needing a shared component and token language
What to avoid
- Using floating buttons for every action
- Layering cards inside cards without purpose
- Copying a default theme without product-specific decisions
Try it: a short exercise
Design one component in six states, then use it in three contexts. Record which properties remain stable and which adapt. Test whether the same rules still work with long translated labels and enlarged text.
How do you prompt for Material Design?
These prompts ask for an original piece informed by the style, not a copy of any work. Replace the words in square brackets.
For an image or visual design
Create a Material-inspired [FORMAT] for [SUBJECT] and [AUDIENCE]. Organize information into a small number of clearly related surfaces with a deliberate primary action. Define a custom role-based colour palette, a readable type scale, and consistent shape treatment. Show a believable product scenario, not a generic dashboard. Use depth only to explain hierarchy and movement only to explain a state change. Create an original composition, not a replica of a named artwork or brand. Explain three decisions that connect the result to this brief. Use supplied wording accurately; leave space for manually typeset text if text rendering is unreliable.
For an interface
Implement a responsive [SUBJECT] interface for [AUDIENCE] using the current documented Material 3 foundations as a reference. Define tokens for colour roles, typography, spacing, shape, and state layers. Build reusable components with explicit behaviours and responsive anatomy. Use elevation sparingly, document departures from the reference system, and ensure customization expresses this product rather than reproducing a default demo. Use semantic HTML, responsive layouts, visible keyboard focus, labelled controls, and accessible contrast. Include loading, empty, error, and success states where relevant. Respect reduced-motion preferences. Use realistic supplied content, not generic placeholder marketing. Explain how the visual choices support the user’s task. Deliverable: [FORMAT].
Lineage
Draws on: Flat design, Swiss / International Typographic Style, Skeuomorphism.
Influenced: Material You and Expressive, Dark mode interfaces.