WEB ERA · 2010S · GLOBAL

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.

Try this look in the editor Browse all looks

materialgooglepaper-metaphorbold-color

LUT material-paper-shadow

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

How the look is made.

The moves a human crew would use to get here. Cue applies them for you, and knowing their names is how you ask for a change.

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

Where it comes from.

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

Where you have seen it.

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

THE RECIPE

The exact knobs
the renderer turns.

A Look is not a filter. It is a set of stored decisions the pipeline reads before it makes a single frame, so two videos in the same Look actually match.

SettingValue

GradeColour LUT applied to every frame

material-paper-shadow

TransitionHow one shot becomes the next

soft cuts · 220ms · ease-in-out

Ken BurnsCamera move applied to stills

Static frames

TypographyDisplay / body / mono pairing

Roboto · Roboto · Roboto Mono

Music moodWhat the bed under the voice sounds like

google-corporate-orchestral · cheerful-electronica

Prompt suffixAppended to every shot prompt in this Look