FAMILYDESIGN & GRAPHICSUBFAMILYWEB ERAERA2010SREGIONGLOBAL

Material Design Google 2014

Material Design Google 2014. Physical paper metaphor, elevated cards with subtle shadow, bold color and white space, Roboto typeface, ink ripple feedback.

materialgooglepaper-metaphorbold-color

Samples

Samples pending

Visual reference frames for this look are being generated.

When to use
  • Android app UI design, Google product family content, or cross-platform interfaces following Material Design guidelines
  • Enterprise software or productivity tool interfaces where a well-documented, consistent design system is the foundation
  • Educational or explainer content about design systems, interaction design, or Google's product family
  • Motion graphics or UI animations following Material's physical motion model (acceleration curves, elevation transitions)
  • Content demonstrating software features where a clean, universally readable interface aesthetic is needed
  • Design system documentation, component library showcases, or developer onboarding materials
When not to use
  • iOS-focused or Apple-adjacent content where Material immediately reads as Google/Android
  • Luxury, fashion, or editorial content where the utilitarian, systematic quality conflicts with expressive design
  • Content requiring emotional warmth or organic texture - Material is precise and geometric by design

Signature techniques

  • 01
    Elevation system โ€” components cast realistic drop shadows proportional to their z-axis position (2dp, 4dp, 8dp, 16dp, 24dp)
  • 02
    Floating action button (FAB) โ€” circular primary-colored button at highest elevation for the most important action
  • 03
    Bold color blocking โ€” app bar, status bar, and FAB in primary hue; background white or 50-tint
  • 04
    Roboto typeface with strict six โ€” level type scale and precise weight/size specifications
  • 05
    Physical motion model โ€” cubic-bezier acceleration curves, shared element transitions, ripple touch feedback
  • 06
    24x24 pixel icon grid with uniform 2px stroke weight and consistent corner radius
  • 07
    Card โ€” based layout with defined margin, padding, and elevation hierarchy

History & context

Material Design Google 2014

Material Design is Google's comprehensive design language, introduced at Google I/O in June 2014 under the leadership of Matias Duarte, Vice President of Design at Google. It unified the visual and interaction design of Android, Google's web products, and third-party apps under a single coherent system grounded in a physical metaphor: digital interfaces behave like physical paper and ink, obeying real-world physics including light, shadow, and motion.

Matias Duarte and the Physical Metaphor

Duarte joined Google in 2010 from Palm, where he had designed webOS. His central contribution to Material Design was the 'material' metaphor itself: UI components are treated as sheets of paper with defined elevation, casting realistic drop shadows and responding to touches with physical-feeling animations. A button that is 'raised' sits at 2dp elevation and casts a correspondingly sized shadow. A card overlapping another card casts a shadow on the one below. Motion follows physics - objects accelerate and decelerate following cubic bezier curves, never teleporting or stopping abruptly.

Color System

Material Design introduced a comprehensive color palette organized into primary, secondary, and surface roles, with each hue available in nine tonal steps (100 through 900). The 2014 palette featured bold, saturated primaries (Teal 500, Indigo 500, Pink A400) that pushed back against iOS 7's stark white minimalism. App bars, floating action buttons (FABs), and status bars all received the primary color, creating strong color-blocked identity.

Typography and Icons

Material Design adopted Roboto as its system typeface, a neo-grotesque with humanist proportions designed by Christian Robertson in 2011 and revised for Material in 2014. The type scale specified six levels of hierarchy with defined weights and sizes. Google also developed the Material Design icon set - over 1,000 outlined and filled icons using a consistent 24x24 grid, a uniform stroke weight, and precise corner radius treatment.

Material You (2021)

In 2021, Google launched Material You (Material Design 3), which introduced dynamic color - the system extracts palette colors from the user's wallpaper and applies them across the UI. This shifted Material from a prescriptive color system to a personalized one, maintaining the physical metaphor and elevation system while dramatically expanding color flexibility.

Notable works

Google I/O 2014

Material Design debut presentation by Matias Duarte

Android 5.0 Lollipop : first full Material Design implementation

(2014)

Google Maps app redesign (2014-2015): Material Design applied to complex data

Gmail Material redesign (2014-2018 iterations)

Material Design icon set (2014-present, 2,500+ icons)

Material You / Material Design 3 : dynamic color introduction

(2021)

Aesthetic recipe

The exact knobs the renderer turns to produce this look.

Palette
Primary
#3F51B5
Secondary
#FFFFFF
Accent
#FF4081
Text/Light
#212121
Text/Dark
#FFFFFF
BG 900
#212121
BG 800
#303030
Typography
Display
Roboto
Body
Roboto
Mono
Roboto Mono
Music moods
google-corporate-orchestralcheerful-electronica
Transition

soft cuts at 220ms, ease-in-out

Ken Burns

Static frames

Grade LUT

material-paper-shadow

Generate a video in the Material Design Google 2014 look

Material Design Google 2014. Physical paper metaphor, elevated cards with subtle shadow, bold color and white space, Roboto typeface, ink ripple feedback.