Google Com Design

Google Design

At Google we say, Focus on the user and all else will follow. We embrace that principlein our design by seeking to build experiences that surprise and enlighten our users inequal measure. This site is for exploring how we go about it. You can read our designguidelines, download assets and resources, meet our team, and learn about job andtraining opportunities.

Google Guidelines

Material Design Reel

FORM Nov 4-5, SF

Doodle Archive

Join the discussion

Design Minutes

Google Cast UX

Learn more about our team, see current job listings, and find your dream design job at Google.

Explore the wide variety of programs, internships, and scholarships we offer for students and educators.

Learn about our culture, the people behind our products and what its like to work at Google.

Join our team

Glass Design

Google Web Designer

Find a job

Students

Life at Google

YouTube GuidelinesGoogle+ GuidelinesChrome Web Store GuidelinesDev ArtDigital Creativity GuidebookMobile PlaybookAndroid DesignWeb FontsPolymer Designer

Google About Google Privacy & Terms

More design links

Material design

Introduction

We challenged ourselves to create a visual language for our users that synthesizes theclassic principles of good design with the innovation and possibility of technology andscience. This is material design. This spec is a living document that will be updated as wecontinue to develop the tenets and specics of material design.

Contents

GoalsPrinciples

Material design

Introduction

What is material?

Animation

Style

Layout

Components

Patterns

Usability

Resources

What's new

Principles

Goals

Principles

Google Privacy & Terms

What is material?

EnvironmentContents

3D worldLight and shadow

3D world

Light and shadow

PreviousMaterial design

Material design

What is material?

Environment

Material properties

Objects in 3D space

Animation

Style

Layout

Components

Patterns

Usability

Resources

What's new


Material propertiesMaterial has certain immutable characteristics and inherent behaviors. Understandingthese qualities will help you manipulate material in a way thats consistent with the visionof material design.

Contents

Physical propertiesTransforming materialMovement of material

Physical properties

Transforming material

Movement of material

PreviousEnvironment

What is material? Material properties

Material design

What is material?

Environment

Material properties

Objects in 3D space

Animation

Style

Layout

Components

Patterns

Usability

Resources

What's new


Objects in 3D spaceThere are parallels between organizing objects in the physical world and arranging objectsin space in material design. In the physical world, objects can be stacked or axed to oneanother, but cannot pass through one another. The objects cast shadows and reect light.

These qualities apply to objects in material design and help create a spatial model that canbe consistently applied across apps in ways that are familiar to users.

Contents

ElevationObject relationships

Elevation

Object relationships

PreviousMaterial properties

What is material? Objects in 3D space

Material design

What is material?

Environment

Material properties

Objects in 3D space

Animation

Style

Layout

Components

Patterns

Usability

Resources

What's new


Animation

Authentic motionPerceiving an objects tangible form helps us understand how to manipulate it. Observingan objects motion tells us whether it is light or heavy, exible or rigid, small or large.Motion in the world of material design is not only beautiful, it builds meaning about thespatial relationships, functionality, and intention of the system.

Contents

Mass and weight

Mass and weight

PreviousWhat is material?

Material design

What is material?

Animation

Authentic motion

Responsive interaction

Meaningful transitions

Delightful details

Style

Layout

Components

Patterns

Usability

Resources

What's new


Responsive interactionResponsive interaction builds trust with the user and engages them. When a user interactswith an app and beautiful yet perfectly logical things happen, the user feels satisedevendelighted. The interaction is thoughtful and purposeful, not random, and can be gentlywhimsical but never distracting. It encourages deeper exploration of an app. What willhappen if I touch this? And then this?

Contents

User inputSurface reactionMaterial responseRadial action

User input

Surface reaction

Material response

Radial action

Animation Responsive interaction

Material design

What is material?

Animation

Authentic motion



Delightful details

Style

Layout

Components

Patterns

Usability

Resources

What's new

PreviousAuthentic motion


Meaningful transitionsSometimes, it is dicult for a user to know where to look or understand how an element gotfrom point A to point B. Carefully choreographed motion design can eectively guide theusers attention and focus through multiple steps of a process or procedure, avoidconfusion when layouts change or elements are rearranged, and improve the overall beautyof the experience. Motion design should serve a functional purpose.

Contents

Visual continuityHierarchical timingConsistent choreography

Visual continuity

Hierarchical timing

Consistent choreography

PreviousResponsive interaction

Animation Meaningful transitions

Material design

What is material?

Animation

Authentic motion



Delightful details

Style

Layout

Components

Patterns

Usability

Resources

What's new


Delightful detailsAnimation can exist within all components of anapp and at all scales, from nely detailed iconsto key transitions and actions. All elements worktogether to construct a seamless experience anda beautiful, functional app.

The most basic use of animation is in transitions,but an app can truly delight a user whenanimation is used in ways beyond the obvious. Amenu icon that becomes an arrow or playbackcontrols that smoothly change from one to theother serve dual functions: to inform the userand to imbue your app with a moment of wonderand a sense of superb craftsmanship. Users donotice such small details. 00:00 / 00:00

PreviousMeaningful transitions

Animation Delightful details

Material design

What is material?

Animation

Authentic motion



Delightful details

Style

Layout

Components

Patterns

Usability

Resources

What's new


Style

Color

Color is inspired by bold color statements juxtaposed with muted environments, takingcues from contemporary architecture, road signs, pavement marking tape, and sportscourts. Emphasize bold shadows and highlights. Introduce unexpected and vibrant colors.

Contents

Color paletteUI color application

Material design

What is material?

Animation

Style

Color

Icons

Imagery

Typography

Layout

Components

Patterns

Usability

Resources

What's new

UI color applicationThemes

Color palette

UI color application

Themes

PreviousAnimation


Style

Color

Color is inspired by bold color statements juxtaposed with muted environments, takingcues from contemporary architecture, road signs, pavement marking tape, and sportscourts. Emphasize bold shadows and highlights. Introduce unexpected and vibrant colors.

Contents

Color paletteUI color application

Material design

What is material?

Animation

Style

Color

Icons

Imagery

Typography

Layout

Components

Patterns

Usability

Resources

What's new

UI color applicationThemes

Color palette

UI color application

Themes

PreviousAnimation


IconsContents

Product iconsSystem icons

Product icons

System icons

PreviousColor

Style Icons

Material design

What is material?

Animation

Style

Color

Icons

Imagery

Typography

Layout

Components

Patterns

Usability

Resources

What's new


Imagery

Imagery is more than decoration. Its a powerful tool to help you communicate anddierentiate your product. Bold, graphic, and intentional imagery helps to engage the user.

Whether the mood is subdued and muted or bright and colorful, the following principlesand best practices can help you successfully incorporate imagery and bring your apps tolife, no matter what the visual brand.

Contents

PrinciplesBest practicesUI integration

Style Imagery

Material design

What is material?

Animation

Style

Color

Icons

Imagery

Typography

Layout

Components

Patterns

Usability

Resources

What's new

Principles

Best practices

UI integration

PreviousIcons


TypographyContents

Roboto and NotoStandard styles

Roboto and Noto

Standard styles

PreviousImagery

Style Typography

Material design

What is material?

Animation

Style

Color

Icons

Imagery

Typography

Layout

Components

Patterns

Usability

Resources

What's new


Layout

PrinciplesMaterial design uses fundamental tools that have come from the world of print design, likebaseline grids and a common set of structural grids that work across various pages. Thelayout is designed to scale across dierent screen sizes and will help facilitate UIdevelopment and ultimately help you create scalable apps.

The layout guidelines also encourage apps to have a consistent look and feel by using thesame visual elements, structural grids, and general spacing rules across platforms andscreen sizes. Structural and visual consistency creates an environment for the user that isrecognizable across products, which provides users with a high level of familiarity andcomfort.

Before delving into layout details, consider the rules of how the material behaves and howit is crafted.

Contents

Paper craft

Paper craft

PreviousStyle

Material design

What is material?

Animation

Style

Layout

Principles

Metrics & keylines

Structure

Components

Patterns

Usability

Resources

What's new


Metrics & keylinesContents

Baseline gridsKeylines and spacingRatio keylinesIncremental keylinesTouch target size

Baseline grids

Keylines and spacing

Ratio keylines

Incremental keylines

Touch target size

Layout Metrics & keylines

Material design

What is material?

Animation

Style

Layout

Principles

Metrics & keylines

Structure

Components

Patterns

Usability

Resources

What's new

Touch target size

PreviousPrinciples


StructureContents

UI regions and guidanceToolbarsApp barSystem barsSide navWhiteframes

UI regions and guidance

Toolbars

App bar

System bars

Layout Structure

Material design

What is material?

Animation

Style

Layout

Principles

Metrics & keylines

Structure

Components

Patterns

Usability

Resources

What's new

Side nav

Whiteframes

PreviousMetrics & keylines


Components

Bottom sheetsOne way to present a set of actions to a user is with a bottom sheet, a sheet of paper thatslides up from the bottom edge of the screen. Bottom sheets oer exibility in the displayof clear and simple actions that do not need explanation.

Contents

UsageContentBehaviorSpecs

Usage

Content

Behavior

Material design

What is material?

Animation

Style

Layout

Components

Bottom sheets

Buttons

Cards

Chips

Dialogs

Dividers

Grids

Lists

List controls

Menus

Pickers

Progress & activity

Sliders

Snackbars & toasts

Subheaders

Switches

Tabs

Text elds

Tooltips

Patterns

Specs

PreviousLayout

Patterns

Usability

Resources

What's new


Components

Bottom sheetsOne way to present a set of actions to a user is with a bottom sheet, a sheet of paper thatslides up from the bottom edge of the screen. Bottom sheets oer exibility in the displayof clear and simple actions that do not need explanation.

Contents


Usage

Content

Behavior

Material design

What is material?

Animation

Style

Layout

Components

Bottom sheets

Buttons

Cards

Chips

Dialogs

Dividers

Grids

Lists

List controls

Menus

Pickers

Progress & activity

Sliders

Snackbars & toasts

Subheaders

Switches

Tabs

Text elds

Tooltips

Patterns

Specs

PreviousLayout

Patterns

Usability

Resources

What's new


ButtonsA button consists of text and/or an image that clearly communicates what action will occurwhen the user touches it. There are three types of main buttons:

Floating action button: a circular button made of paper that lifts and emits ink reactions onpress.Raised button: a typically rectangular button made of paper that lifts and emits inkreactions on press.Flat button: a button made of ink that emits ink reactions on press but does not lift.

In addition, fully saturated icons in your design generally always denote aordances.

Buttons should be designed in accordance with your apps color theme.

Contents

UsageFlat & raised buttonsFloating action buttonOther buttons

Usage

Flat & raised buttons

Floating action button

Components Buttons

Material design

What is material?

Animation

Style

Layout

Components

Bottom sheets

Buttons

Cards

Chips

Dialogs

Dividers

Grids

Lists

List controls

Menus

Pickers

Progress & activity

Sliders

Snackbars & toasts

Subheaders

Switches

Tabs

Text elds

Tooltips

Patterns

Floating action button

Other buttons

PreviousBottom sheets

Patterns

Usability

Resources

What's new


CardsA card is a piece of paper that contains unique related data; for example, a photo, text, andlink all about a single subject. Cards are typically an entry point to more complex anddetailed information.

Cards have a constant width and variable height. The maximum height is limited to whatcan t within a single view on a platform, but it can temporarily expand as needed (forexample, to display a comment eld). Cards do not ip to reveal information on their back.

Contents

UsageContentActionsBehavior

Usage

Content

Actions

Components Cards

Material design

What is material?

Animation

Style

Layout

Components

Bottom sheets

Buttons

Cards

Chips

Dialogs

Dividers

Grids

Lists

List controls

Menus

Pickers

Progress & activity

Sliders

Snackbars & toasts

Subheaders

Switches

Tabs

Text elds

Tooltips

Patterns

Behavior

PreviousButtons

Patterns

Usability

Resources

What's new


ChipsChips are small blocks that represent a complex entity, such as a calendar event or contact.They can contain a photo, short title string (truncated if necessary), and other briefinformation. Chips are easily manipulated through drag and drop. Touching them invokesthe full entity view in a card or full screen view or invokes a menu of options related to thatchips entity.

Animations invoking and invoked from chips should resize the chip material between entityviews for element persistence.

Contents

Contact chips

Contact chips

PreviousCards

Components Chips

Material design

What is material?

Animation

Style

Layout

Components

Bottom sheets

Buttons

Cards

Chips

Dialogs

Dividers

Grids

Lists

List controls

Menus

Pickers

Progress & activity

Sliders

Snackbars & toasts

Subheaders

Switches

Tabs

Text elds

Tooltips

Patterns

DialogsDialogs inform users about critical information, require users to make decisions, orencapsulate multiple tasks within a discrete process. Use dialogs sparingly because theyare interruptive in naturetheir sudden appearance forces users to stop their current taskand refocus on the dialog content. Not every choice, setting, or detail warrants suchinterruption and prominence.

Alternatives to dialogs include simple menus or inline expansion within the current contentarea. Both approaches present information or options while maintaining the current contextand are less disruptive.

Contents

ContentBehaviorAlertsSimple menusSimple dialogsConrmation dialogsFull-screen dialogsSpecs

Content

Behavior

Components Dialogs

Material design

What is material?

Animation

Style

Layout

Components

Bottom sheets

Buttons

Cards

Chips

Dialogs

Dividers

Grids

Lists

List controls

Menus

Pickers

Progress & activity

Sliders

Snackbars & toasts

Subheaders

Switches

Tabs

Text elds

Tooltips

Patterns

Alerts

Simple menus

Simple dialogs

Conrmation dialogs

Full-screen dialogs

Specs

PreviousChips

Patterns

Usability

Resources

What's new


DividersDividers group and separate content within lists and page layouts. The divider is a thin rule,lightweight yet sucient to distinguish content visually and spatially.

Contents

UsageTypes of dividersSpecs

Usage

Types of dividers

Specs

PreviousDialogs

Components Dividers

Material design

What is material?

Animation

Style

Layout

Components

Bottom sheets

Buttons

Cards

Chips

Dialogs

Dividers

Grids

Lists

List controls

Menus

Pickers

Progress & activity

Sliders

Snackbars & toasts

Subheaders

Switches

Tabs

Text elds

Tooltips

Patterns

GridsGrid lists are an alternative to standard list views. Grid lists are distinct from grids used forlayouts and other visual presentations.

Contents


Usage

Content

Behavior

Specs

Components Grids

Material design

What is material?

Animation

Style

Layout

Components

Bottom sheets

Buttons

Cards

Chips

Dialogs

Dividers

Grids

Lists

List controls

Menus

Pickers

Progress & activity

Sliders

Snackbars & toasts

Subheaders

Switches

Tabs

Text elds

Tooltips

Patterns

PreviousDividers

Patterns

Usability

Resources

What's new

ListsLists present multiple line items in a vertical arrangement as a single continuous element.

Contents


Usage

Content

Behavior

Specs

Components Lists

Material design

What is material?

Animation

Style

Layout

Components

Bottom sheets

Buttons

Cards

Chips

Dialogs

Dividers

Grids

Lists

List controls

Menus

Pickers

Progress & activity

Sliders

Snackbars & toasts

Subheaders

Switches

Tabs

Text elds

Tooltips

Patterns

PreviousGrids

Patterns

Usability

Resources

What's new

List controlsList controls are icons that appear to the left or right of the list text. They indicate the stateof a list item, information about a list item, or serve as an action related to the list item.Leave-behinds are list controls, which are revealed only upon swipe.

Contents

UsageTypes of list controlsTypes of menu controls

Usage

Types of list controls

Types of menu controls

PreviousLists

Components List controls

Material design

What is material?

Animation

Style

Layout

Components

Bottom sheets

Buttons

Cards

Chips

Dialogs

Dividers

Grids

Lists

List controls

Menus

Pickers

Progress & activity

Sliders

Snackbars & toasts

Subheaders

Switches

Tabs

Text elds

Tooltips

Patterns

MenusMenus allow users to take an action by selecting from a list of choices revealed uponopening a temporary, new sheet of material.

Contents

UsageMenu itemsBehaviorSimple MenusSpecs

Usage

Menu items

Behavior

Simple Menus

Components Menus

Material design

What is material?

Animation

Style

Layout

Components

Bottom sheets

Buttons

Cards

Chips

Dialogs

Dividers

Grids

Lists

List controls

Menus

Pickers

Progress & activity

Sliders

Snackbars & toasts

Subheaders

Switches

Tabs

Text elds

Tooltips

Patterns

Specs

PreviousList controls

Patterns

Usability

Resources

What's new


PickersPickers provide a simple way to select a single value from a set. Ready-to-use date and timepickers are included.

Each picker is a dialog with a set of controls for entering the parts of the date (month, day,year) or time (hour, minute, AM/PM). Using these in your app helps ensure that a user'sspecication of a date or time input is valid and formatted correctly. The format of a timeand date picker adjusts automatically to the locale, i.e. month-day-year in the US and day-month-year in other regions.

Pickers can be used inline on a form, but on mobile their relatively large footprint is bestsuited for display in a dialog. For inline display, consider using more compact controls suchas text elds or dropdown menus.

Light and Dark themes in portrait and landscape

Date Picker

Components Pickers

Material design

What is material?

Animation

Style

Layout

Components

Bottom sheets

Buttons

Cards

Chips

Dialogs

Dividers

Grids

Lists

List controls

Menus

Pickers

Progress & activity

Sliders

Snackbars & toasts

Subheaders

Switches

Tabs

Text elds

Tooltips

Patterns

Date picker: Light theme, portrait

Date picker: Light theme, landscape

Date picker: Dark theme, landscape

Patterns

Usability

Resources

What's new

Light and Dark themes in portrait and landscape

Time picker: Light theme, portrait

Time

Time picker: Light theme, landscape

Time picker: Dark theme, landscape

PreviousMenus


Progress & activityMake loading content in your app as delightful and painless as possible by minimizing theamount of visual change a user sees before they can view and interact with content. Eachoperation should only be represented by one activity indicatorfor example, one refreshoperation should not display both a refresh bar and an activity circle.

Contents

Types of indicatorsBehavior

Types of indicators

Behavior

PreviousPickers

Components Progress & activity

Material design

What is material?

Animation

Style

Layout

Components

Bottom sheets

Buttons

Cards

Chips

Dialogs

Dividers

Grids

Lists

List controls

Menus

Pickers

Progress & activity

Sliders

Snackbars & toasts

Subheaders

Switches

Tabs

Text elds

Tooltips

Patterns

SlidersSliders let users select a value from a continuous or discrete range of values by moving theslider thumb. The smallest value is to the left, the largest to the right. Sliders can haveicons to the left and right of the bar that reect the value intensity. The interactive natureof the slider makes it a great choice for settings that reect intensity levels, such asvolume, brightness, or color saturation.

Contents

Continuous sliderDiscrete slider

Continuous slider

Discrete slider

PreviousProgress & activity

Components Sliders

Material design

What is material?

Animation

Style

Layout

Components

Bottom sheets

Buttons

Cards

Chips

Dialogs

Dividers

Grids

Lists

List controls

Menus

Pickers

Progress & activity

Sliders

Snackbars & toasts

Subheaders

Switches

Tabs

Text elds

Tooltips

Patterns

Snackbars & toastsSnackbars provide lightweight feedback about an operation. They show a brief message atthe bottom of the screen on mobile and lower left on desktop. Snackbars appear above allother elements on screen. Snackbars can contain an action.

They automatically disappear after a timeout or after user interaction elsewhere on thescreen, particularly after interactions that summon a new surface or activity. Snackbars canbe swiped o screen. They do not block input on the screens on which they appear. Showonly one snackbar on screen at a time.

Android also provides a capsule-shaped toast, primarily used for system messaging. Toastsare similar to snackbars but do not contain actions and cannot be swiped o screen.

Contents

UsageSpecs

Usage

Specs

PreviousSliders

Components Snackbars & toasts

Material design

What is material?

Animation

Style

Layout

Components

Bottom sheets

Buttons

Cards

Chips

Dialogs

Dividers

Grids

Lists

List controls

Menus

Pickers

Progress & activity

Sliders

Snackbars & toasts

Subheaders

Switches

Tabs

Text elds

Tooltips

Patterns

SubheadersSubheaders are special list tiles that delineate distinct sections of a list or grid list and aretypically related to the current ltering or sorting criteria. Subheader tiles are eitherdisplayed inline with tiles or can be associated with content, for example, in an adjacentcolumn.

Upon scrolling, subheaders remain pinned to the top of the screen until pushed on or oscreen by the next subheader.

Contents

List subheadersGrid subheadersMenu subheaders

List subheaders

Grid subheaders

Menu subheaders

PreviousSnackbars & toasts

Components Subheaders

Material design

What is material?

Animation

Style

Layout

Components

Bottom sheets

Buttons

Cards

Chips

Dialogs

Dividers

Grids

Lists

List controls

Menus

Pickers

Progress & activity

Sliders

Snackbars & toasts

Subheaders

Switches

Tabs

Text elds

Tooltips

Patterns

Snackbars & toastsPatterns

Usability

Resources

What's new

SwitchesSwitches allow the user to select options. There are three kinds: checkboxes, radio buttons,and on/o switches.

*Note: The graphic rings shown in the following examples represent animation and do notrepresent what buttons should look like in implementation.

Contents

CheckboxRadio buttonSwitch

Checkbox

Radio button

Switch

PreviousSubheaders

Components Switches

Material design

What is material?

Animation

Style

Layout

Components

Bottom sheets

Buttons

Cards

Chips

Dialogs

Dividers

Grids

Lists

List controls

Menus

Pickers

Progress & activity

Sliders

Snackbars & toasts

Subheaders

Switches

Tabs

Text elds

Tooltips

Patterns

TabsTabs make it easy to explore and switch between dierent views or functional aspects of anapp or to browse categorized data sets.

Contents

UsageContentTypes of tabsSpecs

Usage

Content

Types of tabs

Specs

Components Tabs

Material design

What is material?

Animation

Style

Layout

Components

Bottom sheets

Buttons

Cards

Chips

Dialogs

Dividers

Grids

Lists

List controls

Menus

Pickers

Progress & activity

Sliders

Snackbars & toasts

Subheaders

Switches

Tabs

Text elds

Tooltips

Patterns

PreviousSwitches

Patterns

Usability

Resources

What's new

Text eldsText elds allow the user to input text. They can be single line, with or without scrolling, ormulti-line, and can have an icon. Touching a text eld places the cursor and automaticallydisplays the keyboard. In addition to typing, text elds allow for a variety of other tasks,such as text selection (cut, copy, paste) and data lookup via auto-completion. See > Selection for text selection design.

The type of text eld determines what kind of characters are allowed inside the eld andmay prompt the virtual keyboard to optimize its layout for frequently used characters.Common types for which you should optimize include number, text, email address, phonenumber, persons name, username, URL, street address, credit card number, PIN, andsearch query.

Contents

Single-line text eldFloating labelsMulti-line text eldFull-width text eldCharacter counterAuto-complete text eldSearch lter

Single-line text eld

Floating labels

Components Text elds

Material design

What is material?

Animation

Style

Layout

Components

Bottom sheets

Buttons

Cards

Chips

Dialogs

Dividers

Grids

Lists

List controls

Menus

Pickers

Progress & activity

Sliders

Snackbars & toasts

Subheaders

Switches

Tabs

Text elds

Tooltips

Patterns

Multi-line text eld

Full-width text eld

Character counter

Auto-complete text eld

Search lter

PreviousTabs

Patterns

Usability

Resources

What's new


TooltipsTooltips are labels that appear on hover and focus when the user hovers over an elementwith the cursor, focuses on an element using a keyboard (usually through the tab key), or,in a touch UI, upon touch (without releasing). They contain textual identication for theelement in question. They may also contain brief helper text regarding the function of theelement. Nothing within the label can take focus.

Contents

UsageCursor/keyboard tooltipsTouch UI tooltips

Usage

Cursor/keyboard tooltips

Touch UI tooltips

PreviousText elds

Components Tooltips

Material design

What is material?

Animation

Style

Layout

Components

Bottom sheets

Buttons

Cards

Chips

Dialogs

Dividers

Grids

Lists

List controls

Menus

Pickers

Progress & activity

Sliders

Snackbars & toasts

Subheaders

Switches

Tabs

Text elds

Tooltips

Patterns

ErrorsErrors are instances where an app fails to complete what is expected. Errors happen when:

The app does not understand user input.The system or app fails.A user intends to run incompatible operations concurrently.

Try to prevent errors through good design. Make your app understand the user, rather thanmaking the user have to understand the app. When an error occurs, communicate clearlyabout what is happening and how a user can quickly resolve it. Save and preserve as muchstate as possible, especially when the user has input content.

As with all feedback, prioritize which messages are most important, communicate throughcontent states to avoid extraneous elements on screen, and be consistent with screenplacements within and across form factors.

Contents

User input errorsApp errorsIncompatible state errors

User input errors

App errors

Patterns Errors

Material design

What is material?

Animation

Style

Layout

Components

Patterns

Data formats

Errors

Gestures

Loading images

Navigation drawer

Navigational transitions

Scrolling techniques

Search

Selection

Settings

Swipe to refresh

Usability

Resources

What's new

Incompatible state errors

PreviousData formats


Patterns

Data formatsDisplay data such as date & time in a consistent and user-friendly way. Present theinformation concisely and avoid unnecessary redundancy.

Contents

Date & time

Date & time

PreviousComponents

Material design

What is material?

Animation

Style

Layout

Components

Patterns

Data formats

Errors

Gestures

Loading images

Navigation drawer



Search

Selection

Settings

Swipe to refresh

Usability

Resources

What's new

GesturesGestures are divided into Touch Mechanics (what your ngers do on the screen) andTouch Activities (context-specic results of specic gestures in the user interface). Asingle touch mechanic (touch) may have multiple results depending on context (tap,cancel, enable/disable lights out), and a single touch activity (zoom in) may be achievedthrough multiple touch mechanics (pinch open, double touch, double-touch drag, etc.)

Note that Drag, Swipe, and Fling gesture activities are covered in more detail in their ownsection due to their highly contextual results.

Contents

Touch mechanicsTouch activitiesDrag, swipe, or ing details

Touch mechanics

Touch activities

Drag, swipe, or ing details

Patterns Gestures

Material design

What is material?

Animation

Style

Layout

Components

Patterns

Data formats

Errors

Gestures

Loading images

Navigation drawer



Search

Selection

Settings

Swipe to refresh

Usability

Resources

What's new

PreviousErrors


Loading imagesContents

Loading images

Loading images

PreviousGestures

Patterns Loading images

Material design

What is material?

Animation

Style

Layout

Components

Patterns

Data formats

Errors

Gestures

Loading images

Navigation drawer



Search

Selection

Settings

Swipe to refresh

Usability

Resources

What's new

Navigation drawerThe navigation drawer is a common pattern found in Google apps. The navigation drawerslides in from the left. It follows the keylines and metrics for lists.

Typography

1. Roboto Medium, 14sp, #FFFFFF2. Roboto Regular, 14sp, #FFFFFF3. List item: Roboto Medium, 14sp, 87% #0000004. Subheader: Roboto Medium, 14sp, 54% #000000.Aligns to the 16dp keyline.

Vertical keylines and horizontal margins

Vertical keylines for icons are at 16dp from the left andright edges of the side nav and are 54% #000000.

Content associated with an icon or avatar aligns 72dpfrom the left edge of the side nav.

The width of the side nav is equal to the width of thescreen minus the height of the action bar, or in thiscase 56dp from the right edge of the screen. Themaximum width of the nav drawer is 5 times thestandard increment (56dp on mobile and 64dp ontablet).

Use 16dp horizontal margins on mobile and 24dp on

Patterns Navigation drawer

Material design

What is material?

Animation

Style

Layout

Components

Patterns

Data formats

Errors

Gestures

Loading images

Navigation drawer



Search

Selection

Settings

Swipe to refresh

Usability

Resources

What's new

Use 16dp horizontal margins on mobile and 24dp ontablet

The nav drawer spans the full height of thescreen and the drawer is below the status bar.Everything below the drawer will be darkened bya scrim. All the content is still visible under thescrim.

Nav drawer on Android

Elevation

After a list item is selected, that item becomesthe apps primary color or #000000 100% toclearly indicate selection. The touch ripple alsobecomes a highlight, to further indicateselection.

If this color the touch ripple/highlight doesntprovide enough contrast with your primary color,use a darker tint of the primary color.

Selection state

All dividers in the nav drawer are full-bleedinside the panel. There is also an 8dp paddingabove and below the divider.

Dividers

Context

The navigation drawer can scroll like any normalview would.

Scrolling

Settings and support are located at the bottom ofthe scrolling list, in-line with the rest of the listcontent.

If the list of content in the navigation drawer isvery long, the two options can be pinned to thebottom of the navigation drawer on a surfacewith a higher elevation. This surface is presentonly while at the top of the list; any other scrollposition will immediately result in dismissing thesurface and placing the options at the end of thelist, in-line with the rest of the list content. Thenavigation drawer retains its scroll position whenclosed and reopened.

Settings and support

If the list doesnt scroll, the settings and supportitems will appear at the end of the list and arenot pinned.

PreviousLoading images


Scrolling techniquesContents

Scrolling

Scrolling

PreviousNavigational transitions

Patterns Scrolling techniques

Material design

What is material?

Animation

Style

Layout

Components

Patterns

Data formats

Errors

Gestures

Loading images

Navigation drawer



Search

Selection

Settings

Swipe to refresh

Usability

Resources

What's new

SearchContents

In-app search

In-app search

PreviousScrolling techniques

Patterns Search

Material design

What is material?

Animation

Style

Layout

Components

Patterns

Data formats

Errors

Gestures

Loading images

Navigation drawer



Search

Selection

Settings

Swipe to refresh

Usability

Resources

What's new

SelectionA long-press (a touch or mousedown thats held in the same position for a moment) is theglobal gesture to select data. On touch devices, a two-nger touch may also be used totrigger selection.

Using checkboxes (or custom analogs) to initiate selection is an explicit anti-pattern formobile. For desktop, checkboxes may be used, with the following guidelines:

Avoid persistently displaying checkboxes as part of each item.When hovering on an item, display a single checkbox for that item.After an item has been selected, display checkboxes for all remaining items in that set.

The use of checkboxes in contexts such as task lists or checklists where checking an itemindicates completion, rather than selection, is entirely appropriate.

Contents

Item selectionText selection

Item selection

Text selection

PreviousSearch

Patterns Selection

Material design

What is material?

Animation

Style

Layout

Components

Patterns

Data formats

Errors

Gestures

Loading images

Navigation drawer



Search

Selection

Settings

Swipe to refresh

Usability

Resources

What's new


SettingsContents

Settings

Settings

PreviousSelection

Patterns Settings

Material design

What is material?

Animation

Style

Layout

Components

Patterns

Data formats

Errors

Gestures

Loading images

Navigation drawer



Search

Selection

Settings

Swipe to refresh

Usability

Resources

What's new

Swipe to refreshContents

Swipe to refresh

Swipe to refresh

PreviousSettings

Patterns Swipe to refresh

Material design

What is material?

Animation

Style

Layout

Components

Patterns

Data formats

Errors

Gestures

Loading images

Navigation drawer



Search

Selection

Settings

Swipe to refresh

Usability

Resources

What's new

Usability

AccessibilityA product is accessible when all people -- regardless of ability -- can navigate it, understandit, and use it to achieve their goals. A truly successful product is accessible to the widestpossible audience.

These general guidelines are a good starting point for designers who want to learn aboutaccessibility. Designing fully accessible products is a complex topic that requires in-depthstudy. For more info, visit the Google accessibility site.

To ensure that your product is usable for users with disabilities, consider how users willinteract with your product using assistive technologies. Imagine using your product in thefollowing ways:

Without soundWithout colorWith the high contrast mode enabledWith the screen magniedWith a screen reader (no visible screen)With voice control onlyWith a combination of the above

Contents

NavigationReadabilityGuidance and feedback

Navigation

Material design

What is material?

Animation

Style

Layout

Components

Patterns

Usability

Accessibility

Bidirectionality

Resources

What's new

Navigation

Readability

Guidance and feedback

PreviousPatterns


Usability

AccessibilityA product is accessible when all people -- regardless of ability -- can navigate it, understandit, and use it to achieve their goals. A truly successful product is accessible to the widestpossible audience.

These general guidelines are a good starting point for designers who want to learn aboutaccessibility. Designing fully accessible products is a complex topic that requires in-depthstudy. For more info, visit the Google accessibility site.

To ensure that your product is usable for users with disabilities, consider how users willinteract with your product using assistive technologies. Imagine using your product in thefollowing ways:

Without soundWithout colorWith the high contrast mode enabledWith the screen magniedWith a screen reader (no visible screen)With voice control onlyWith a combination of the above

Contents

NavigationReadabilityGuidance and feedback

Navigation

Material design

What is material?

Animation

Style

Layout

Components

Patterns

Usability

Accessibility

Bidirectionality

Resources

What's new

Navigation

Readability

Guidance and feedback

PreviousPatterns


BidirectionalityA well-designed app supports bidirectionality, which means that it can be localized easilyfor language scripts that are written and read from right-to-left (RTL) or left-to-right (LTR).RTL scripts include Arabic, Hebrew, and Persian.

Bidirectionality aects not only text but also layout and iconography.

Contents

UI mirroring overviewRTL mirroring guidelinesOther localization considerations

UI mirroring overview

RTL mirroring guidelines

Other localization considerations

PreviousAccessibility

Usability Bidirectionality

Material design

What is material?

Animation

Style

Layout

Components

Patterns

Usability

Accessibility

Bidirectionality

Resources

What's new


Resources

Color palettesThe downloadable zip le contains Adobe Photoshop and Adobe Illustrator color swatchesthat you can install. Included in the zip le is a Read-Me.pdf with instructions on how toinstall the .aco les into Photoshop and .ase les into Illustrator.

Color Swatches0.02 MB (.zip)

PreviousUsability

Material design

What is material?

Animation

Style

Layout

Components

Patterns

Usability

Resources

Color palettes

Layout templates

Roboto & Noto fonts

Sticker sheets & icons

What's new


Layout templatesContents

MobileTabletDesktopWhiteframes

Mobile

Tablet

Desktop

Whiteframes

PreviousColor palettes

Resources Layout templates

Material design

What is material?

Animation

Style

Layout

Components

Patterns

Usability

Resources

Color palettes

Layout templates

Roboto & Noto fonts


What's new


Resources

Color palettesThe downloadable zip le contains Adobe Photoshop and Adobe Illustrator color swatchesthat you can install. Included in the zip le is a Read-Me.pdf with instructions on how toinstall the .aco les into Photoshop and .ase les into Illustrator.

Color Swatches0.02 MB (.zip)

PreviousUsability

Material design

What is material?

Animation

Style

Layout

Components

Patterns

Usability

Resources

Color palettes

Layout templates

Roboto & Noto fonts


What's new


Roboto & Noto fontsThe latest version of Roboto is designed for both mobile and web usage.

Roboto Font1.21 MB (.zip)

Roboto specimen booklet1.02 MB (.pdf)

Noto is the standard typeface on Android for all languages not covered by Roboto.

Get NotoDownloads are available for all languages in theNoto font family.

PreviousLayout templates

Resources Roboto & Noto fonts

Material design

What is material?

Animation

Style

Layout

Components

Patterns

Usability

Resources

Color palettes

Layout templates

Roboto & Noto fonts


What's new


Sticker sheets & iconsContents

ComponentsSystem icons

Components

System icons

PreviousRoboto & Noto fonts

Resources Sticker sheets & icons

Material design

What is material?

Animation

Style

Layout

Components

Patterns

Usability

Resources

Color palettes

Layout templates

Roboto & Noto fonts


What's new


What's new

What's newThe November 3, 2014 release of the material design spec includes the following newsections:

A new section What is material? provides an overview of key aspects of material design,with chapters on Environment, which contains information about shadows and depth in a3D world; material properties; and organizing objects in 3D spacePicker component, for picking date and time.Navigation drawerNavigational transitionsScrolling techniquesSwipe to refreshDate & time formatsErrorsProduct iconsBidirectionality, which contains info about supporting internationalization and RTLlanguage scripts.

Additional signicant content updates include:

Comprehensive sticker sheets for Illustrator, Photoshop, and Sketch replace the individualsticker sheets.

System icons contain the most commonly used system icons for your apps on any platform.In the color palette, Teal has been renamed Cyan, and Deep Teal has been renamed Teal.

Typography includes information about Noto fonts and clarications on line length.Dialogs and menus contain extended guidance on usage of these components.

Material design

What is material?

Animation

Style

Layout

Components

Patterns

Usability

Resources

What's new

What's new

Dialogs and menus contain extended guidance on usage of these components.Links to relevant sections of Android developer documentation

PreviousResources


Material design

Introduction

We challenged ourselves to create a visual language for our users that synthesizes theclassic principles of good design with the innovation and possibility of technology andscience. This is material design. This spec is a living document that will be updated as wecontinue to develop the tenets and specics of material design.

Contents

GoalsPrinciples

Material design

Introduction

What is material?

Animation

Style

Layout

Components

Patterns

Usability

Resources

What's new

Principles

Goals

Principles


http:__www.google.com_design_12345Introduction12Light and shadow

Material propertiesObjects in 3D spaceAuthentic motionUser input

Responsive interaction12

Meaningful transitionsDelightful detailsColor12UI color application12

IconsImagery12

TypographyPrinciplesBaseline grids

Metrics & keylines12

Structure12

Bottom sheets12Content12

Buttons12

Cards12

ChipsDialogs12

DividersGrids12

Lists12

List controlsMenus12

Pickers1234

Progress & activitySlidersSnackbars & toastsSubheaders12

SwitchesTabs12

Text fields12

TooltipsErrors12App errors

Gestures12

Loading imagesNavigation drawer12345

Scrolling techniquesSearchSelection12

SettingsSwipe to refreshAccessibility12Readability12

BidirectionalityColor palettesLayout templates12Tablet

Roboto & Noto fontsSticker sheets & iconsWhat's new12

Principles12

NextWhat is material?

Google Com Design

Documents