Difficulty: ⭐⭐⭐ Advanced
Type: Descendant of Swiss Design
Best For: Students comfortable with complex design systems and motion design
Material Design is Google’s design language that combines the rational grid systems of Swiss design with the principles of Bauhaus craft and physical materials. Launched in 2014, it treats digital interfaces as if they exist in a 3D space with realistic lighting, shadows, and motion.
Core Philosophy:
Not to be confused with: Flat Design (Material adds elevation and depth)
Origins:
Evolution:
Philosophy: “A material metaphor is the unifying theory of a rationalized space and a system of motion.” — Material Design Guidelines
Google Design Team:
Canonical Implementations:
Notable Adopters:
Example palette:
Primary: #6200EE (purple 500)
Secondary: #03DAC6 (teal 200)
Surface: #FFFFFF
Background: #FAFAFA
Error: #B00020
Type scale:
H1: Roboto Light 96px, -1.5px tracking
H2: Roboto Light 60px, -0.5px tracking
H3: Roboto Regular 48px, 0px tracking
H4: Roboto Regular 34px, 0.25px tracking
H5: Roboto Regular 24px, 0px tracking
H6: Roboto Medium 20px, 0.15px tracking
Body 1: Roboto Regular 16px, 0.5px tracking
Body 2: Roboto Regular 14px, 0.25px tracking
Shadow syntax:
/* 4dp elevation */
box-shadow:
0px 2px 4px rgba(0, 0, 0, 0.14),
0px 3px 4px rgba(0, 0, 0, 0.12),
0px 1px 5px rgba(0, 0, 0, 0.20);
Easing functions:
/* Standard easing */
transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
/* Deceleration (exit) */
transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
/* Acceleration (enter) */
transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
Transform this Swiss design site into Material Design:
Reference the Material Design guidelines at material.io.
Key requirements:
- Use 8dp grid system throughout
- Implement elevation with realistic shadows (use 1dp, 4dp, 6dp levels)
- Color palette: Primary [#6200EE purple], Secondary [#03DAC6 teal]
- Typography: Roboto font family with Material type scale
- Cards with 4dp border-radius and 1dp elevation at rest
- Floating Action Button (FAB) in bottom-right, primary color, 6dp elevation
- Motion: 300ms standard easing for interactions
- Responsive: 4-col mobile, 8-col tablet, 12-col desktop grid
Start with the hero section. Show me the result.
Review this [component name] and refine it to match Material Design principles:
Specific checks:
- Is elevation appropriate for this component type?
- Are shadows using correct ambient + directional light?
- Does color contrast meet WCAG AA (4.5:1 minimum)?
- Is typography using correct Roboto weight and size from type scale?
- Are touch targets minimum 48x48dp for mobile?
- Are corner radiuses 4dp (cards, buttons)?
- Does motion use standard easing curve and 200-300ms duration?
- Is spacing using 8dp increments?
Screenshot: [paste image]
Suggest specific refinements with Material Design guidelines references.
Add Material Design motion to these interactive elements:
Components to animate:
- Cards on hover: Lift to 4dp elevation (from 1dp)
- FAB on click: Ripple effect + slight scale
- Navigation transitions: Shared element transitions
- List items: Stagger animation (50ms delay between items)
Use Material motion guidelines:
- Standard easing: cubic-bezier(0.4, 0.0, 0.2, 1)
- Duration: 200-300ms for component transitions
- Transforms: translate-Y and opacity (not rotate)
Implement smooth, purposeful motion that reveals relationships.
Act as a Material Design expert. Audit this site for authenticity:
Check these criteria:
1. Grid system: Is everything aligned to 8dp grid?
2. Elevation: Are shadows realistic with ambient + directional light?
3. Color: Is palette using Material color system (500 base + tints/shades)?
4. Typography: Is Roboto used correctly with Material type scale?
5. Components: Do cards, buttons, FAB match Material specs?
6. Motion: Are animations using correct easing and duration?
7. Spacing: Is everything using 8dp increments?
8. Accessibility: Does contrast meet WCAG AA minimum?
Screenshot: [paste image]
What feels authentic vs. generic? What needs refinement?
| Aspect | Swiss Design | Material Design |
|---|---|---|
| Grid | Asymmetric, mathematical | Symmetric, 8dp baseline |
| Color | Limited, often black/white/red | Bold, vibrant, full palette |
| Depth | Flat, 2D space | Elevation, 3D z-axis |
| Typography | Helvetica, Univers | Roboto (custom humanist sans) |
| Spacing | Tight, economical | Generous, breathing room |
| Components | Minimal, functional | Rich, tactile, interactive |
| Motion | Static | Core principle, reveals relationships |
| Philosophy | Information clarity | Physical metaphor + rationalism |
| Feel | Cool, neutral, objective | Warm, colorful, delightful |
Relationship: Material Design descends from Swiss Design by keeping rational grids and clear hierarchy, but adds Bauhaus craft principles, physical metaphors, bold color, and motion. It’s Swiss design adapted for interactive, multi-platform digital experiences.
Study the Official Guidelines: Read material.io thoroughly. Google’s documentation is comprehensive and authoritative.
Use Material Components: Don’t reinvent the wheel. Reference official component libraries for specs.
Elevation is Key: Material Design without proper elevation is just colorful flat design. Shadows must be realistic (ambient + directional).
Motion Matters: Static Material Design misses half the point. Motion reveals relationships and adds delight.
Bold Color Choices: Don’t be timid. Material Design embraces vibrant, saturated color. Use the color tool.
Roboto is Essential: Material Design is inseparable from Roboto typography. Don’t substitute.
Think 3D: Imagine surfaces floating in space. What’s in front? What’s behind? Use elevation to show hierarchy.
Test on Mobile: Material Design was born on mobile. Test touch targets, gestures, and responsive grids.
Accessibility First: Check color contrast, keyboard navigation, and screen reader compatibility from the start.
Iterate on Motion: First pass motion will feel off. Refine timing, easing, and choreography until it feels smooth.
Document Version: 1.0
Last Updated: November 2025
Project: Design Gallery
Difficulty: ⭐⭐⭐ Advanced