m3-expressive

📄 README.md

📁 references/

📄 color-schemes.md

📄 color.md

📄 component-tokens.md

📁 components/

📄 bars.md

📄 buttons.md

📄 containment.md

📄 fabs.md

📄 feedback.md

📄 input.md

📄 navigation.md

📄 expressive-tactics.md

📄 foundations.md

📄 interaction.md

📄 layout.md

📄 motion.md

📄 platforms.md

📄 shape.md

📄 tokens.md

📄 transitions.md

📄 typography.md

📄 visuals.md

📁 scripts/

📄 refresh-component-tokens.js

📄 refresh-m3.js

📄 SKILL.md

📁 visuals/

📁 building-with-m3-expressive/

📄 break-from-the-surrounding-shape-style-to-draw-attention-to-a-particul.png

📄 expressive-app-bars-toolbars-and-buttons.png

📄 expressive-typography-can-enhance-hierarchy-and-add-personality.png

📄 group-similar-content-into-informative-groupings.png

📄 material-design.jpg

📄 smaller-shapes-can-result-in-essential-actions-looking-less-important.png

📄 the-expressive-color-system-can-create-a-wide-range-of-accessible-pale.png

📄 the-shape-library-has-35-iconic-shapes-which-can-be-used-to-add-visual.png

📄 the-updated-type-scale-includes-new-emphasized-text-styles.png

📄 ungrouped-information-can-blend-together.png

📄 use-contrast-to-emphasize-the-main-takeaway-or-element.png

📄 without-contrast-elements-can-blend-together.png

📁 components/

📄 app-bars-are-placed-at-the-top-of-the-screen-to-help-people-navigate-t.png

📄 badges-show-notifications-counts-or-status-information-on-navigation-i.png

📄 bottom-sheets-show-secondary-content-anchored-to-the-bottom-of-the-scr.png

📄 button-groups-organize-buttons-and-add-interactions-between-them.png

📄 buttons-prompt-most-actions-in-a-ui.png

📄 cards-display-content-and-actions-about-a-single-subject.png

📄 carousels-show-a-collection-of-items-that-can-be-scrolled-on-and-off-t.png

📄 checkboxes-let-users-select-one-or-more-items-from-a-list-or-turn-an-i.png

📄 chips-help-people-enter-information-make-selections-filter-content-or-.png

📄 date-pickers-let-people-select-a-date-or-a-range-of-dates.png

📄 dialogs-provide-important-prompts-in-a-user-flow.png

📄 dividers-are-thin-lines-that-group-content-in-lists-or-other-container.png

📄 extended-floating-action-buttons-extended-fabs-help-people-take-primar.png

📄 floating-action-buttons-fabs-help-people-take-primary-actions.png

📄 icon-buttons-help-people-take-actions-with-a-single-tap.png

📄 lists-are-continuous-vertical-indexes-of-text-and-images.png

📄 loading-indicators-show-the-progress-of-a-process-for-a-short-wait-tim.png

📄 menus-display-a-list-of-choices-on-a-temporary-surface.png

📄 navigation-bars-let-people-switch-between-ui-views-on-smaller-devices.png

📄 navigation-drawers-let-people-switch-between-ui-views-on-larger-device.png

📄 navigation-rails-let-people-switch-between-ui-views-on-mid-sized-devic.png

📄 progress-indicators-show-the-status-of-a-process-in-real-time.png

📄 radio-buttons-let-people-select-one-option-from-a-set-of-options.png

📄 search-lets-people-enter-a-keyword-or-phrase-to-get-relevant-informati.png

📄 segmented-buttons-help-people-select-options-switch-views-or-sort-elem.png

📄 side-sheets-show-secondary-content-anchored-to-the-side-of-the-screen.png

📄 sliders-allow-users-to-make-selections-from-a-range-of-values.png

📄 snackbars-show-short-updates-about-app-processes-at-the-bottom-of-the-.png

📄 split-buttons-open-a-menu-to-give-people-more-options-related-to-an-ac.png

📄 switches-toggle-the-selection-of-an-item-on-and-off.png

📄 tabs-organize-content-across-different-screens-and-views.png

📄 text-fields-let-users-enter-text-into-a-ui.png

📄 the-floating-action-button-fab-menu-opens-from-a-fab-to-display-multip.png

📄 time-pickers-help-people-select-and-set-a-specific-time.png

📄 toolbars-display-frequently-used-actions-relevant-to-the-current-page.png

📄 tooltips-display-brief-labels-or-messages.png

📁 components_all-buttons/

📄 a-button-s-level-of-emphasis-helps-determine-its-appearance-typography.png

📄 a-filled-button-for-a-high-emphasis-actiona-text-button-for-a-low-emph.png

📄 avoid-placing-a-button-below-another-button-if-there-s-space-to-place-.png

📄 buttontoggle-buttonicon-buttontoggle-icon-buttonsplit-buttonstandard-b.png

📄 for-multiple-actions-choose-a-higher-emphasis-button-for-the-more-impo.png

📄 use-a-filled-button-on-its-own-for-a-single-important-action.png

📄 when-using-multiple-buttons-you-can-place-a-text-button-low-emphasis-n.png

📄 when-using-multiple-buttons-you-can-place-an-outlined-button-medium-em.png

📁 components_app-bars/

📄 a-leading-element-and-a-trailing-element-outside-searcha-leading-eleme.png

📄 adjust-the-width-of-the-app-bar-orbiter-to-fit-in-a-person-s-field-of-.png

📄 always-align-the-app-bar-orbiter-within-the-bounds-of-nearby-spatial-p.png

📄 an-app-bar-s-accessibility-label-can-incorporate-its-ui-text-as-well-a.png

📄 an-icon-button-should-be-clearly-labeled-on-the-action-it-takes-like-v.png

📄 app-bar-color-roles-used-for-light-and-dark-themes-surfaceon-surfaceon.png

📄 app-bars-can-display-one-high-visibility-action-to-boost-its-prominenc.png

📄 app-bars-provide-content-and-actions-related-to-the-current-page.png

📄 app-bars-show-information-about-the-page-key-actions-and-navigation-ac.png

📄 avoid-expanding-the-app-bar-orbiter-beyond-the-adjacent-panel-s-width-.png

📄 avoid-using-custom-color-roles-for-the-search-bar-container-and-search.png

📄 baseline-variantsmediumlarge.png

📄 center-aligned-app-barleft-aligned-app-bar.png

📄 containerheadlinetrailing-iconsleading-icon.png

📄 containerheadlinetrailing-iconssubtitleleading-button.png

📄 containerleading-buttontrailing-elementsheadlinesubtitle.png

📄 containerleading-icon-buttonhinted-search-texttrailing-icon-or-avatars.png

📄 default-heights-were-chosen-to-ensure-readability-of-on-screen-element.png

📄 don-t-make-an-app-bar-shorter-than-its-default-height.png

📄 don-t-overlap-the-app-bar-orbiter-and-spatial-panel.jpg

📄 don-t-put-multiple-filled-or-tonal-buttons-in-the-app-bar.png

📄 don-t-use-curved-shapes-this-implies-that-the-container-can-expand-upo.png

📄 don-t-use-three-icons-and-an-avatar-in-a-search-app-bar.png

📄 don-t-wrap-text-in-a-small-app-bar.png

📄 headline-typography-style-for-each-app-barsearch-body-largesmall-title.png

📄 if-headline-text-is-long-use-a-medium-flexible-or-large-flexible-app-b.png

📄 image-logos-can-replace-all-text-in-small-app-bars-and-appear-above-th.png

📄 images-can-be-added-to-app-bars-and-can-replace-label-text-on-small-ap.png

📄 include-a-20dp-margin-this-visually-separates-the-app-bar-orbiter-from.png

📄 increased-horizontal-space-on-larger-screens-allows-for-up-to-four-tra.png

📄 large-app-bar-padding-and-size-measurements.png

📄 large-flexible-app-bar-padding-and-size-measurements.png

📄 leading-back-button.png

📄 m2-elevation-and-a-drop-shadow-raise-the-top-app-bar-when-content-is-p.png

📄 m3-on-scroll-a-color-fill-overlay-separates-the-app-bar-from-the-conte.png

📄 make-sure-search-bars-and-their-labels-have-at-least-3-1-contrast-use-.png

📄 measurements-and-padding-for-app-bar-orbiters.png

📄 medium-and-large-app-bars-have-the-same-elements-containerleading-butt.png

📄 medium-app-bar-padding-and-size-measurements.png

📄 medium-flexible-app-bar-padding-and-size-measurements.png

📄 medium-large.png

📄 medium-top-app-bar-color-roles-used-for-light-and-dark-schemes-surface.png

📄 outlined-icons-can-be-used-as-needed-or-when-using-toggle-buttons.png

📄 put-the-most-used-actions-on-the-left-and-least-used-on-the-right-2.png

📄 put-the-most-used-actions-on-the-left-and-least-used-on-the-right.png

📄 search-app-bar-color-roles-used-for-light-and-dark-themes-surface-on-s.png

📄 search-app-bar-padding-and-size-measurements.png

📄 search-app-bars-can-use-different-colors-like-surface-bright-for-impro.png

📄 search-app-bars-have-a-search-field-instead-of-heading-text.png

📄 search-app-barsmallmedium-flexiblelarge-flexible-2.png

📄 search-app-barsmallmedium-flexiblelarge-flexible-3.png

📄 search-app-barsmallmedium-flexiblelarge-flexible-4.png

📄 search-app-barsmallmedium-flexiblelarge-flexible.png

📄 small-app-bar-padding-and-size-measurements.png

📄 subtitle-typography-style-for-each-app-bar-small-label-mediummedium-fl.png

📄 surface-containersurface-container-highsurface-container-highest.png

📄 text-labels-including-supporting-text-can-be-aligned-to-the-leading-ed.png

📄 the-app-bar-can-have-different-layouts-depending-on-which-elements-are.png

📄 the-app-bar-changes-color-when-flat-or-on-scroll-the-search-bar-can-al.png

📄 the-app-bar-orbiter-shouldn-t-exceed-the-width-of-adjacent-spatial-pan.png

📄 the-app-bar-s-layout-is-mirrored-for-right-to-left-rtl-languages.png

📄 the-leading-element-can-be-a-product-logo.png

📄 the-medium-flexible-and-large-flexible-app-bars-hug-the-text-contents-.png

📄 the-trailing-icons-can-be-configured-to-be-a-single-filled-icon-button.png

📄 use-a-filled-or-tonal-button-for-important-actions.png

📄 use-filled-icons-for-clear-visible-actions.png

📄 use-proper-capitalization-depending-on-what-s-being-searched.png

📄 use-space-or-enter-to-activate-actions.png

📄 use-straight-corners-for-app-bars.png

📄 use-tabs-to-navigate-through-interactive-items.png

📁 components_badges/

📄 a-large-badge-displays-a-number-within-a-container-to-indicate-a-quant.png

📄 a-small-badge-uses-only-shape-to-indicate-a-status-change-or-new-notif.png

📄 avoid-using-a-large-badge-when-it-might-overlap-with-a-trailing-elemen.png

📄 avoid-using-custom-color-roles-for-the-badge-container-and-label-text--2.png

📄 avoid-using-custom-color-roles-for-the-badge-container-and-label-text-.png

📄 badge-color-roles-used-for-light-and-dark-schemes-in-navigation-bar-er.png

📄 badge-color-roles-used-for-light-and-dark-schemes-in-navigation-rail-e.png

📄 badge-padding-and-size-measurements.png

📄 badges-have-fixed-positions-don-t-change-the-position-of-the-badge-arb.png

📄 badges-have-new-color-mappings.png

📄 badges-must-use-default-color-with-at-least-3-1-contrast.png

📄 change-the-position-of-the-badge-for-right-to-left-languages.png

📄 diagram-of-3-badge-variations-shown-on-navigation-destinations-in-vari.png

📄 don-t-let-the-badge-get-cut-off-or-collide-with-another-element.png

📄 in-navigation-bars-hide-the-badge-once-the-destination-has-been-select.png

📄 large-badge.png

📄 large-badges-and-a-small-badge-in-a-navigation-bar.png

📄 large-badges-with-one-to-four-characters.png

📄 navigation-bar-with-four-badges.png

📄 navigation-barsmall-badgelarge-badge-containerlarge-badge-labellarge-b.png

📄 navigation-railsmall-badgelarge-badge-containerlarge-badge-labellarge-.png

📄 non-counting-badges-will-simply-announce-new-notification.png

📄 numerical-badges-will-have-their-number-read.png

📄 small-badge-on-a-navigation-itemlarge-badge-on-a-navigation-itemlarge-.png

📄 small-badge.png

📄 small-badgelarge-badge-containerlarge-badge-label.png

📄 truncate-badge-labels-as-needed.png

📄 use-a-large-badge-to-show-count-information-when-visual-collisions-are.png

📄 use-a-small-badge-when-spaces-are-tightly-constrained-such-as-app-bars.png

📄 use-the-default-badge-color.png

📄 when-an-icon-with-a-badge-is-followed-by-text-or-another-element-place.png

📁 components_bottom-sheets/

📄 a-bottom-sheet-can-automatically-resize-to-another-height-after-intera-2.png

📄 a-bottom-sheet-can-automatically-resize-to-another-height-after-intera.png

📄 a-bottom-sheet-can-have-preset-positions-from-full-screen-height-to-pr.png

📄 a-bottom-sheet-for-sharing-can-appear-fully-raised-if-needed.png

📄 a-modal-bottom-sheet-can-be-dismissed-by-swiping-the-sheet-down.png

📄 a-modal-bottom-sheet-must-be-interacted-with-or-dismissed-its-blocking.png

📄 alternately-a-bottom-sheet-for-sharing-can-appear-collapsed-for-a-more.png

📄 bottom-sheet-color-roles-used-for-both-light-and-dark-schemes-scrim-on.png

📄 bottom-sheet-containing-a-list-with-icons.png

📄 bottom-sheet-containing-contacts-and-applications.png

📄 bottom-sheet-padding-and-size-measurements.png

📄 bottom-sheet-with-a-divider-separating-kinds-of-actions.png

📄 bottom-sheet-with-menu-items-in-a-list.png

📄 bottom-sheets-are-flexible-containers-that-adapt-to-their-content-and-.png

📄 bottom-sheets-can-contain-thumbnails-images-and-video.png

📄 bottom-sheets-on-larger-screens-like-tablet-have-a-max-width-that-can-.png

📄 bottom-sheets-should-be-scrollable-when-their-content-exceeds-the-init.png

📄 bottom-sheets-should-extend-to-the-width-of-the-screen-on-mobile.png

📄 containerdrag-handle-optional-scrim-modal-only.png

📄 containerdrag-handle-optional-scrim.png

📄 diagram-of-floating-sheet-set-on-screen-background.png

📄 interacting-with-the-drag-handle-can-quickly-move-a-bottom-sheet-throu-2.png

📄 interacting-with-the-drag-handle-can-quickly-move-a-bottom-sheet-throu.png

📄 label-the-drag-handle.png

📄 modal-bottom-sheets-can-be-used-instead-of-menus-to-present-additional.png

📄 side-sheets-can-contain-the-same-content-as-bottom-sheets-and-may-be-m.png

📄 standard-bottom-sheetmodal-bottom-sheet.png

📄 standard-bottom-sheetsmodal-bottom-sheets.png

📄 tapping-the-scrim-dismisses-a-modal-bottom-sheet.png

📄 the-initial-vertical-position-of-modal-bottom-sheets-can-t-exceed-50-o.png

📄 the-music-player-in-this-standard-bottom-sheet-allows-people-to-contro.png

📄 to-ensure-touch-target-accessibility-the-top-portion-of-a-bottom-sheet.png

📄 visible-focus-shown-on-the-drag-handle-affordance.png

📁 components_button-groups/

📄 button-groups-adapt-to-the-height-of-the-buttons-inside-including-when.png

📄 button-groups-add-more-expression-to-a-product.png

📄 button-groups-are-containers-that-hold-buttons-of-many-shapes-and-size.png

📄 button-groups-can-animate-without-affecting-their-surroundings.png

📄 button-groups-can-contain-buttons-and-icon-buttons.png

📄 buttons-can-have-width-size-and-padding-manually-adjusted-to-fit-diffe.png

📄 closely-related-actions-work-well-in-a-connected-button-group.png

📄 configurations-for-both-variants-of-button-groups-extra-smallsmallmedi.png

📄 connected-button-group-selected-states-enabledhoveredfocusedpressed.png

📄 connected-button-group-unselected-states-enableddisabledhoveredfocused.png

📄 connected-button-groups-increase-the-widths-of-each-button-inside-and-.png

📄 container-2.png

📄 container.png

📄 don-t-mix-color-styles-in-connected-button-groups.png

📄 enableddisabledhoveredfocusedpressed-2.png

📄 enableddisabledhoveredfocusedpressed.png

📄 extra-small-button-groupsmall-button-group.png

📄 extra-smallsmall.png

📄 filledtonaloutlinedelevated.png

📄 initial-focus-should-land-on-the-first-button-not-on-the-container.png

📄 initial-focusselected-button.png

📄 label-buttonslabel-buttons-and-icon-buttonsextra-small-icon-buttonslar.png

📄 label-each-button-within-the-button-group.png

📄 reserve-shape-differences-in-button-groups-for-key-interactions.png

📄 round-connected-button-group-inner-padding-is-2dp-at-every-size-the-ou.png

📄 square-connected-button-group-inner-padding-is-2dp-at-every-size-the-o.png

📄 standard-button-group-inner-padding-xs-18dps-12dpm-8dpl-8dpxl-8dp.png

📄 standard-button-groupconnected-button-group.png

📄 use-the-connected-button-group-with-single-or-multi-select-patterns.png

📄 use-the-same-shapes-for-buttons-in-a-group-but-change-other-properties.png

📁 components_buttons/

📄 a-button-container-s-width-is-dynamically-set-to-fit-its-label-text.png

📄 a-button-container-s-width-shouldn-t-be-narrower-than-its-label-text.png

📄 a-button-s-width-dynamically-adjusts-to-the-label-text.png

📄 a-default-button-b-toggle-unselected-c-toggle-selected-for-five-button.png

📄 a-elevated-b-filled-c-tonal-d-outlined-e-textdefaulttoggle-unselectedt.png

📄 a-extra-small-b-smallround-button-button-with-iconsquare-button.png

📄 a-round-button-b-square-buttonenabledhoveredpressed.png

📄 a-round-button-b-square-buttonenabledhoveredpressedselected.png

📄 a-unselected-b-selectedenabled-disabled-hovered-focused-pressed-2.png

📄 a-unselected-b-selectedenabled-disabled-hovered-focused-pressed-3.png

📄 a-unselected-b-selectedenabled-disabled-hovered-focused-pressed.png

📄 accessibility-tags-for-a-text-only-button.png

📄 avoid-excessive-text-wrapping-or-truncation-by-choosing-concise-string.png

📄 avoid-setting-a-fixed-width-smaller-than-the-label-text.png

📄 button-container-width-can-be-responsive-which-allows-it-to-stretch-ho.png

📄 buttons-and-icon-buttons-come-in-many-shapes-styles-and-sizes.png

📄 buttons-can-move-in-the-layout-but-elements-should-remain-in-the-same-.png

📄 containerlabel-texticon-optional.png

📄 default-buttontoggle-button.png

📄 diagram-of-corner-radii-of-buttons.png

📄 different-sized-buttons-in-a-button-group-help-emphasize-the-main-acti.png

📄 don-t-allow-the-button-to-stretch-in-a-way-that-creates-long-flat-butt.png

📄 don-t-clutter-your-ui-with-too-many-buttons-consider-presenting-low-pr.png

📄 don-t-ungroup-the-icon-and-label-text-or-let-them-anchor-to-opposite-s.png

📄 don-t-use-two-icons-in-the-same-button.png

📄 don-t-vertically-align-an-icon-and-text-in-the-center-of-a-button.png

📄 don-t-wrap-text-for-maximum-legibility-label-text-should-remain-on-a-s.png

📄 elevated-buttonfilled-buttonfilled-tonal-buttonoutlined-buttontext-but.png

📄 elevated-buttons-provide-separation-from-a-visually-prominent-backgrou.png

📄 enableddisabledhoveredfocusedpressed-2.png

📄 enableddisabledhoveredfocusedpressed-3.png

📄 enableddisabledhoveredfocusedpressed-4.png

📄 enableddisabledhoveredfocusedpressed-5.png

📄 enableddisabledhoveredfocusedpressed-6.png

📄 enableddisabledhoveredfocusedpressed.png

📄 filled-buttons-are-end-aligned-below-flight-information-in-a-compact-w.png

📄 filled-buttons-are-start-aligned-beside-flight-information-in-a-large-.png

📄 filled-buttons-can-be-responsive-to-the-layout-grid-and-help-emphasize.png

📄 filled-buttons-have-high-visual-impact-when-used-for-important-actions.png

📄 five-sizestoggle-selection-two-shapestwo-small-padding-widths.png

📄 higher-contrast-helps-differentiate-elements.png

📄 higher-elevation-increases-the-emphasis-of-a-button.png

📄 keep-the-icon-and-label-text-grouped-and-centered.png

📄 label-textcontainericon-optional.png

📄 m2-buttons-have-a-height-of-36dp-and-slightly-rounded-corner-radius.png

📄 m3-default-buttons-are-taller-at-40dp-and-have-fully-rounded-corners.png

📄 outlined-buttons-can-be-used-on-backgrounds-with-a-color-gradient.png

📄 outlined-buttons-contain-less-important-supporting-actions.png

📄 outlined-buttons-display-a-stroke-around-the-button-container.png

📄 padding-and-size-measurements-of-each-button-sizeextra-smallsmallmediu.png

📄 place-the-icon-to-the-left-of-the-label-in-buttons-with-text-in-left-t.png

📄 place-the-icon-to-the-right-of-the-label-in-buttons-with-text-in-right.png

📄 round-buttons-have-containers-with-fully-rounded-corners.png

📄 sizeshapecolorsmall-button-padding.png

📄 square-buttons-have-square-containers-and-change-radius-as-the-button-.png

📄 text-button-against-an-image-background.png

📄 text-button-in-a-card.png

📄 text-button-in-a-snackbar.png

📄 text-buttons-in-a-dialog.png

📄 the-label-length-shouldn-t-change-dramatically-to-be-longer-or-shorter.png

📄 the-outlined-button-style-is-very-similar-to-chips-consider-using-a-fi.png

📄 the-tonal-style-has-less-emphasis-than-filled-or-emphasis.png

📄 use-buttons-for-discrete-actions.png

📄 use-caution-when-placing-outlined-buttons-on-top-of-images-customizing.png

📄 use-icons-that-clearly-communicate-their-meaning.png

📄 use-sentence-case-for-button-label-text-capitalizing-the-first-word-an.png

📄 use-text-buttons-for-the-lowest-priority-actions.png

📄 when-using-toggleable-buttons-keep-the-label-character-count-a-similar.png

📁 components_cards/

📄 1-use-full-width-dividers-for-content-that-can-be-expanded.png

📄 1-use-inset-dividers-which-don-t-run-the-full-width-of-a-card-to-separ.png

📄 3-variants-of-cards-elevated-filled-and-outlined.png

📄 adjust-the-card-layout-so-content-remains-the-main-focus-on-large-scre.png

📄 card-collections-can-be-filtered-in-a-variety-of-ways-including-by-dat.png

📄 card-layouts-can-change-on-different-devices.png

📄 card-padding-and-size-measurements.png

📄 card-position-and-alignment-changes-as-the-screen-size-changes.png

📄 card-size-is-determined-by-the-elements-it-contains.png

📄 card-text-and-image-show-a-clear-hierarchy.png

📄 cards-can-be-shown-together.png

📄 cards-can-contain-a-headline-subhead-supporting-text-media-and-actions.png

📄 cards-can-contain-a-slider-control-in-the-action-area.png

📄 cards-can-contain-choice-chips-in-the-action-area.png

📄 cards-can-contain-icon-buttons-like-stars-to-rate-content.png

📄 cards-can-contain-thumbnails-images-and-video.png

📄 cards-can-display-content-and-actions-on-a-single-topic.png

📄 cards-can-include-a-primary-action-area-that-expands-into-a-full-scree.png

📄 cards-can-include-multiple-action-areas-containing-buttons-links-and-o.png

📄 cards-have-updated-colors-elevation-and-variants.png

📄 container-2.png

📄 container.png

📄 containerimagebuttonsupporting-textsubheadheadline.png

📄 containeroutline.png

📄 custom-mosaic-grid.png

📄 custom-staggered-grid.png

📄 don-t-force-content-into-cards-when-spacing-headlines-or-dividers-woul.png

📄 elevated-card-color-roles-used-for-light-and-dark-themes-surface-conta.png

📄 elevated-card-states-hoveredfocused-pressed-dragged-disabled.png

📄 elevated-cardfilled-card-outlined-card.png

📄 elevated-cardfilled-cardoutlined-card.png

📄 elevated-cards-have-a-drop-shadow-providing-more-separation-from-the-b.png

📄 ensure-that-text-on-images-meets-accessible-contrast-standards.png

📄 ensure-that-the-menu-doesn-t-cover-the-card.png

📄 example-of-the-same-card-with-two-different-orientations-and-element-p.png

📄 filled-card-color-roles-used-for-light-and-dark-themes-surface-contain.png

📄 filled-card-states-hoveredfocused-pressed-dragged-disabled.png

📄 filled-cards-provide-subtle-separation-from-the-background-this-has-le.png

📄 headline-subhead-and-supporting-text-in-a-card.png

📄 multiple-cards-can-be-grouped-into-collections-with-a-shared-resting-e.png

📄 non-actionable-card-elements-are-navigable-focused-in-order-and-verbal.png

📄 non-actionable-card-with-buttonsdirectly-actionable-card-with-no-butto.png

📄 on-a-desktop-content-can-expand-and-scroll-within-a-card.png

📄 on-a-mobile-device-cards-can-expand-to-reveal-more-content-scrolling-w.png

📄 on-a-mobile-device-cards-can-t-internally-scroll-as-it-could-cause-two.png

📄 outlined-card-color-roles-used-for-light-and-dark-themes-surfaceoutlin.png

📄 outlined-card-states-hovered-focused-pressed-dragged-disabled.png

📄 outlined-cards-have-a-visual-boundary-around-the-container-this-can-pr.png

📄 overflow-menus-are-usually-located-in-the-upper-right-or-lower-right-c.png

📄 place-cards-in-a-collection-in-a-straightforward-easy-to-use-manner.png

📄 spacing-adjusts-for-components-such-as-cards-lists-and-images.png

📄 use-cards-to-display-related-information-on-a-single-subject.png

📄 use-tab-to-navigate-through-all-buttons-in-a-card.png

📄 when-designing-for-large-screens-use-multiple-columns-to-display-conte.png

📄 when-placing-text-or-icons-on-images-consider-using-a-bounding-shape-t.png

📁 components_carousel/

📄 a-carousel-can-contain-different-sized-items.png

📄 avoid-adding-buttons-into-the-carousel-container-or-beside-it-place-an.png

📄 avoid-exceeding-two-lines-of-text-in-carousel-items-in-compact-windows.png

📄 avoid-focusing-on-the-carousel-container.png

📄 avoid-scrolling-freely-on-full-screen-carousels.png

📄 avoid-setting-carousel-items-so-small-that-the-image-isn-t-recognizabl.png

📄 carousel-color-roles-used-for-light-and-dark-schemes-containersurface.png

📄 carousel-items-adapt-dynamically-based-on-window-size.png

📄 carousels-can-show-more-items-at-once-on-larger-screens.png

📄 center-aligned-hero-carousels-have-padding-on-both-sides-of-the-contai.png

📄 containercarousel-item-16-9-carousel-item-9-16-carousel-item-1-1-carou.png

📄 containerlarge-carousel-item-2.png

📄 containerlarge-carousel-item.png

📄 containerlarge-carousel-itemmedium-carousel-itemsmall-carousel-item-2.png

📄 containerlarge-carousel-itemmedium-carousel-itemsmall-carousel-item.png

📄 containerlarge-carousel-itemsmall-carousel-item-2.png

📄 containerlarge-carousel-itemsmall-carousel-item.png

📄 don-t-cover-the-carousel-with-buttons-or-other-ui.png

📄 enabledhoveredfocusedpresseddisabled.png

📄 full-screen-carousels-fill-the-window-edge-to-edge.png

📄 headers-should-align-with-the-leading-edge-and-the-arrow-icon-should-h.png

📄 hero-carousels-have-padding-on-both-sides-of-the-container.png

📄 hero-carousels-scroll-through-one-large-item-at-a-time.png

📄 in-compact-windows-only-show-more-than-three-items-if-the-items-are-ea.png

📄 large-carousel-item-with-the-full-title-and-label-textmedium-carousel-.png

📄 large-carousel-itemmedium-carousel-itemsmall-carousel-item.png

📄 large-itemmedium-itemsmall-item.png

📄 large-itemsmall-item.png

📄 multi-browse-carousel-left-and-hero-carousel-right-containerlarge-caro.png

📄 multi-browse-carousels-have-padding-on-both-sides-of-the-container.png

📄 new-carousel-layout-uncontained-multi-aspect-ratio.png

📄 set-initial-focus-on-the-first-carousel-item-and-use-arrows-to-navigat.png

📄 set-the-large-carousel-item-size-to-ensure-the-images-and-text-are-eas.png

📄 small-carousel-items-have-a-minimum-and-maximum-width.png

📄 the-carousel-container-is-a-rectangle-it-can-be-used-in-many-ways-and-.png

📄 the-carousel-container-is-labelled-appropriately-and-has-the-container.png

📄 the-carousel-item-label-indicates-the-current-item-in-focus-and-the-to.png

📄 the-show-all-button-should-have-a-padding-of-4dp.png

📄 uncontained-carousel-items-bleed-over-the-padding-on-each-side-when-sc.png

📄 uncontained-multi-aspect-ratio-carousels-only-have-leading-padding-wit.png

📁 components_checkbox/

📄 1-container2-icon.png

📄 a-checkbox-selected-via-the-text-label.png

📄 a-side-sheet-can-group-related-controls-on-larger-screens.png

📄 an-indeterminate-selection-indicating-that-at-least-one-checkbox-is-se.png

📄 checkboxes-in-a-list-of-items.png

📄 checkboxes-let-users-select-one-or-more-options-from-a-list-a-parent-c.png

📄 checkboxes-select-multiple-related-options.png

📄 checkboxstate-layericon.png

📄 container-icon.png

📄 diagram-of-a-selected-checkbox-with-a-container-width-and-height-of-18.png

📄 enabled-disabled-hovered-focused-pressed.png

📄 if-a-list-consists-of-multiple-options-don-t-use-switches-instead-use-.png

📄 m2.png

📄 m3.png

📄 radio-buttons.png

📄 switches.png

📄 the-accessibility-label-clearly-states-the-text-label-of-the-checkbox.png

📄 the-text-color-remains-the-same-regardless-if-the-checkbox-is-selected.png

📄 unselected-selected-hover-and-indeterminate-checkboxes.png

📁 components_chips/

📄 a-suggestion-chip-can-help-the-user-start-a-search.png

📄 accessibility-tags-should-include-both-the-label-and-role.png

📄 an-assist-chip-can-surface-supplemental-information-like-a-calendar-ev.png

📄 an-icon-can-be-added-to-indicate-when-a-filter-chip-is-selected.png

📄 assist-chip-color-roles-used-for-light-and-dark-themes-surface-contain.png

📄 assist-chip-padding-and-size-measurements.png

📄 assist-chipfilter-chipinput-chipsuggestion-chip.png

📄 assist-chips-should-be-shown-underneath-primary-content.png

📄 avoid-chip-labels-longer-than-20-characters.png

📄 avoid-replacing-major-actions-with-chips-actions-that-progress-people-.png

📄 avoid-using-chips-to-finish-or-progress-a-task.png

📄 avoid-using-elevation-to-indicate-a-chip-s-pressed-state-instead-use-t.png

📄 chips-appear-as-a-group-of-interactive-elements.png

📄 chips-can-also-use-a-leading-icon-or-label-to-show-interactivity.png

📄 chips-can-be-scrolled-horizontally.png

📄 chips-can-contain-a-logo-icon-or-circular-image.png

📄 chips-can-show-they-are-interactive-with-a-darker-outline-color-stroke.png

📄 chips-have-rounded-corners.png

📄 chips-may-use-elevation-when-placed-on-an-image.png

📄 chips-shouldn-t-be-elevated-when-placed-directly-on-the-page.png

📄 container-label-text-leading-icon.png

📄 container-label-text-leading-icontrailing-icon.png

📄 container-label-text-trailing-icon-leading-icon.png

📄 container-label-text.png

📄 containerlabel-textleading-icon-or-image-optional-trailing-icon-requir.png

📄 don-t-display-a-single-chip-by-itself-chips-should-appear-in-a-set.png

📄 during-an-interaction-assist-chips-can-transform-into-modals-transitio.png

📄 filter-chip-color-roles-used-for-light-and-dark-themes-on-surface-vari.png

📄 filter-chip-padding-and-size-measurements.png

📄 filter-chip-suggestions-can-dynamically-change-as-a-person-starts-to-s.png

📄 filter-chips-can-be-shown-underneath-a-search-field.png

📄 filter-chips-can-open-a-menu-for-more-filtering-options.png

📄 filter-chips-can-scroll-horizontally-to-show-many-options.png

📄 filter-chips-can-wrap-to-a-new-row-if-there-are-more-than-two-rows-con.png

📄 filter-chips-in-a-real-estate-app.png

📄 filter-chips-in-a-shopping-app.png

📄 filter-chips-rely-on-tags-or-descriptive-words-to-filter-content.png

📄 filter-chips-should-not-present-only-a-single-option.png

📄 high-contrast-helps-differentiate-chips-clustered-together.png

📄 input-chip-color-roles-used-for-light-and-dark-themes-on-surface-varia.png

📄 input-chip-padding-and-size-measurements.png

📄 input-chips-being-moved-from-one-field-to-another.png

📄 input-chips-can-be-a-more-flexible-way-to-filter-search-results-compar.png

📄 input-chips-can-contain-an-icon-logo-or-circular-image.png

📄 input-chips-can-wrap-to-a-new-row-if-all-chips-need-to-be-visible.png

📄 input-chips-make-it-easier-to-add-and-remove-contacts.png

📄 input-chips-transform-text-based-on-a-person-s-input.png

📄 interaction-targets-for-actions-like-edit-or-close-have-a-size-of-48x4.png

📄 keep-chip-labels-short.png

📄 labels-introducing-a-chip-group-can-indicate-that-they-are-selectable.png

📄 leading-images-such-as-avatars-are-sized-larger-than-leading-icons-or-.png

📄 m2-variants-of-chips-are-input-choice-filter-and-action-chips.png

📄 m3-variants-of-chips-updated-to-assist-filter-input-and-suggestion-chi.png

📄 margins-between-chips-margin-between-each-line.png

📄 multiple-input-chips-in-one-field.png

📄 page-context-can-indicate-how-search-results-will-be-narrowed-by-selec.png

📄 primary-color-left-and-on-surface-variant-color-right.png

📄 selected-and-unselected-assist-chip-states-enabled-disabled-hovered-fo.png

📄 selected-and-unselected-filter-chip-states-enabled-disabled-hovered-fo.png

📄 selected-and-unselected-input-chip-states-enabled-disabled-hovered-foc.png

📄 selected-and-unselected-suggestion-chip-states-enableddisabledhoveredf.png

📄 suggestion-chip-color-roles-used-for-light-and-dark-themes-outlinesurf.png

📄 suggestion-chip-padding-and-size-measurements.png

📄 suggestion-chips-can-offer-quick-reply-options-in-a-chat-or-email-app.png

📄 the-accessibility-label-should-be-the-text-label.png

📄 the-remove-action-is-focused-when-the-chip-can-also-be-selected.png

📄 the-remove-icon-helps-users-remove-the-filter.png

📄 the-stroke-color-was-softened-to-improve-visual-hierarchy-between-chip.png

📄 the-text-in-most-assist-chips-begins-with-a-short-verb-like-get-or-add.png

📄 the-text-labels-within-suggestion-chips-are-most-often-nouns-or-short-.png

📄 there-are-four-chip-variants-assist-filter-input-suggestion.png

📄 there-are-four-variants-of-chips-assist-filter-input-and-suggestion.png

📄 use-a-side-sheet-to-organize-many-filter-chips.png

📄 use-an-outline-to-define-the-edge-of-the-chip-s-container-on-regular-b.png

📄 use-buttons-for-the-final-step-in-a-task.png

📄 use-chips-to-present-contextual-supplemental-options.png

📄 when-on-complicated-backgrounds-chip-containers-can-be-elevated.png

📄 while-multiple-chips-can-be-selected-only-one-can-be-in-focus.png

📁 components_date-pickers/

📄 1-docked-date-picker.png

📄 1-headline-2-supporting-text3-container4-icon-button5-date-input6-text.png

📄 1-headline2-supporting-text3-icon-button4-container5-text-button6-icon.png

📄 1-text-field-2-menu-button-3-menu.png

📄 2-modal-date-picker.png

📄 3-modal-date-input.png

📄 a-docked-date-picker-with-a-full-calendar-view-is-best-used-on-larger-.png

📄 a-full-screen-modal-date-picker-on-mobile.png

📄 alternatively-a-text-field-with-appropriate-hint-text-can-prompt-for-d.png

📄 date-picker-dialog-on-mobile-date-picker-text-field-dropdown-on-deskto.png

📄 dates-pass-the-4-5-1-contrast-minimum.png

📄 day-selectionmonth-selectionyear-selection.png

📄 days-of-the-week-are-not-navigable-via-keyboard-so-the-tooltip-is-show.png

📄 docked-date-picker-color-roles-used-for-light-and-dark-themes-primaryo.png

📄 docked-date-picker-menu-color-roles-used-for-light-and-dark-themes-pri.png

📄 docked-date-picker-month-menu-padding-and-size-measurements.png

📄 docked-date-picker-month-selection.png

📄 docked-date-picker-on-desktop-2.png

📄 docked-date-picker-on-desktop.png

📄 docked-date-picker-padding-and-size-measurements.png

📄 docked-date-picker-year-selection.png

📄 docked-date-picker.png

📄 docked-date-pickermodal-date-pickermodal-date-input.png

📄 don-t-scale-the-date-picker-responsively-to-a-larger-size.png

📄 entering-a-date-either-through-direct-text-entry-or-the-date-picker.png

📄 for-dates-that-don-t-require-a-calendar-view-the-modal-date-input-can-.png

📄 headline-supporting-textcontainericon-buttonprevious-next-month-button.png

📄 headlinesupporting-text-headercontainericon-buttonunselected-yearselec.png

📄 headlinesupporting-textcontainericon-buttonunselected-year-selected-ye.png

📄 headlinesupporting-textheadercontainericon-buttonicon-buttonsweekdayst.png

📄 headlinesupporting-textheadercontainericon-buttonoutlined-text-fieldte.png

📄 headlinesupporting-texticon-buttonheadertext-buttonicon-buttonweekdays.png

📄 keyboard-tooltip-example-for-date-picker.png

📄 m2-date-pickers-had-a-drop-shadow-and-different-color-mappings.png

📄 m3-date-pickers-have-larger-typography-no-shadow-and-new-color-mapping.png

📄 modal-date-input-color-roles-used-for-light-and-dark-themes-on-surface.png

📄 modal-date-input-padding-and-size-measurements.png

📄 modal-date-picker-color-roles-used-for-light-and-dark-themes-in-a-day-.png

📄 modal-date-picker-color-roles-used-for-light-and-dark-themes-in-a-year.png

📄 modal-date-picker-date-range-selector-padding-and-size-measurements.png

📄 modal-date-picker-padding-and-size-measurements.png

📄 modal-date-picker-range-selector-color-roles-used-for-light-and-dark-t.png

📄 modal-date-picker-year-selector-padding-and-size-measurements.png

📄 modal-date-with-manual-input.png

📄 outlined-text-fieldmenu-button-month-selection-pressed-menu-button-yea.png

📄 outlined-text-fieldmenu-button-month-selectionmenu-button-year-selecti.png

📄 remove-non-critical-actions-to-reduce-the-number-of-tab-stops-for-keyb.png

📄 screen-readers-will-state-the-full-day-month-date-and-year-instead-of-.png

📄 single-date-inputdate-range-input.png

📄 single-date-selectiondate-range-selectionyear-selection.png

📄 states-for-date-and-year-selection-default-enabled-disabled-hovered-fo.png

📄 text-fieldmenu-buttonicon-buttonlabel-textmenutext-buttonscontainer.png

📄 the-accessibility-label-clearly-states-the-kind-of-input-as-an-event-d.png

📄 the-edit-icon-indicates-the-ability-to-switch-to-the-modal-date-input.png

📄 the-text-field-s-logic-can-adapt-to-the-user-s-actual-input-format-app.png

📄 touch-targets-are-48x48dp.png

📁 components_dialogs/

📄 a-basic-dialog-elevated-above-an-app-in-home-space.png

📄 a-basic-dialog.png

📄 a-create-button-is-clear-that-the-event-will-be-created.png

📄 a-single-action-may-be-provided-only-if-it-s-an-acknowledgement.png

📄 avoid-excessive-text-wrapping-or-truncation-by-choosing-concise-string.png

📄 avoid-placing-long-headlines-in-a-full-screen-dialog-s-app-bar-1-as-th.png

📄 avoid-presenting-people-with-unclear-choices-cancel-doesn-t-make-sense.png

📄 avoid-putting-non-critical-information-in-a-dialog.png

📄 avoid-using-full-screen-dialogs-in-xr-required-actions-could-appear-be.png

📄 basic-dialog-color-roles-used-for-light-and-dark-themes-surface-contai.png

📄 basic-dialog-padding-and-size-measurements.png

📄 basic-dialogfull-screen-dialog.png

📄 basic-dialogs-appear-over-a-background-scrim.png

📄 basic-dialogs-are-known-as-alert-dialogs-on-web.png

📄 basic-dialogs-can-give-people-the-ability-to-provide-confirmation-of-a.png

📄 basic-dialogs-require-a-person-to-take-action-before-it-will-close.png

📄 container-header-icon-close-affordance-headline-optional-text-button-d.png

📄 containerheader-regionicon-close-affordance-headline-optional-button-l.png

📄 containericon-optional-headline-optional-supporting-text-divider-optio.png

📄 containericon-optional-headline-optional-supporting-textdivider-option.png

📄 custom-placement-area-for-basic-dialogs-that-respects-a-56dp-margin-fr.png

📄 date-picker-dialogs-allow-people-to-tap-a-date-then-confirm-it-by-tapp.png

📄 desktop-dialogs-call-attention-to-the-required-action.png

📄 dialog-custom-positioned-on-the-right-side-of-the-screen.png

📄 dialogs-shouldn-t-be-obscured-by-other-elements-except-for-full-screen.png

📄 disable-confirming-actions-1-until-a-choice-is-made-dismissive-actions.png

📄 display-two-text-buttons-next-to-one-another.png

📄 don-t-place-dismissive-actions-1-to-the-right-of-confirming-actions-in.png

📄 don-t-trigger-a-basic-dialog-when-the-confirming-action-is-selected.png

📄 don-t-use-dialog-titles-that-pose-an-ambiguous-question.png

📄 don-t-use-dialogs-for-low-or-medium-priority-information-instead-use-a.png

📄 don-t-use-the-confirming-action-to-dismiss-the-full-screen-dialog.png

📄 elements-within-a-dialog-should-be-labeled-according-to-their-guidelin.png

📄 error-messages-related-to-the-fields-should-be-displayed-inline.png

📄 errors-unrelated-to-the-fields-can-be-displayed-in-a-basic-dialog.png

📄 find-ways-to-shorten-app-bar-text-and-place-longer-headlines-into-the-.png

📄 full-screen-dialog-color-roles-used-for-light-and-dark-themes-surface-.png

📄 full-screen-dialog-on-mobiledialog-on-a-tablet.png

📄 full-screen-dialog-padding-and-size-measurements.png

📄 full-screen-dialogs-can-contain-various-elements-such-as-1-text-fields.png

📄 if-a-dialog-s-color-is-surface-container-high-don-t-use-surface-contai.png

📄 initial-focus-lands-on-the-first-interactive-element-within-a-dialog-t.png

📄 make-sure-a-spatial-dialog-s-color-is-higher-than-all-other-ui-element.png

📄 new-updates-to-color-layout-position-shape-and-typography.png

📄 present-non-critical-information-using-other-ui-within-the-flow-of-app.png

📄 side-view-of-a-basic-dialog-with-spatial-elevation-in-full-space.png

📄 snackbars-can-disappear-automatically.png

📄 stacked-buttons-accommodate-longer-button-text-but-take-up-more-room-c.png

📄 surface-container-highsurface-container-highest.png

📄 the-learn-more-action-1-navigates-away-from-this-dialog-potentially-le.png

📄 the-shift-and-tab-keys-together-move-focus-in-the-opposite-direction-t.png

📄 there-are-two-variants-of-dialogs-basic-dialogfull-screen-dialog.png

📄 this-dialog-title-poses-a-specific-question-concisely-explains-what-s-.png

📄 time-picker-dialogs-allow-people-to-move-the-clock-hand-and-then-confi.png

📄 use-a-basic-dialog-to-confirm-that-the-user-wants-to-discard-unsaved-c.png

📄 use-dialogs-for-prompts-that-block-an-app-s-normal-operation-and-for-c.png

📁 components_divider/

📄 content-may-not-require-a-divider-line.png

📄 decorative-elements-have-no-contrast-minimums.png

📄 divider-2.png

📄 divider-color-roles-used-for-light-and-dark-schemes-outline-variant.png

📄 divider.png

📄 dividers-have-new-color-mappings.png

📄 dividers-separating-items-in-a-list.png

📄 full-width-divider.png

📄 full-width-dividers-to-indicate-separation-of-content.png

📄 full-width-dividers.png

📄 inset-divider.png

📄 inset-dividers-can-be-placed-in-the-middle-of-a-layout-to-separate-ele.png

📄 inset-dividers-in-a-list-of-related-items.png

📄 inset-dividers-separate-related-content-such-as-emails-in-a-list-they-.png

📄 measurements.png

📄 use-a-combination-of-inset-and-full-width-dividers-to-reflect-the-hier.png

📄 use-full-width-divider-lines-to-separate-interactive-and-non-interacti.png

📄 use-full-width-dividers-sparingly-too-many-divider-lines-will-make-an-.png

📄 vertical-divider-in-a-large-screen-context.png

📁 components_extended-fab/

📄 an-extended-fab-can-be-effective-where-an-icon-alone-is-too-vague.png

📄 an-extended-fab-can-t-have-an-icon-without-a-text-label.png

📄 avoid-wrapping-or-truncating-text.png

📄 container-label-text-icon-optional.png

📄 containerlabel-texticon-2.png

📄 containerlabel-texticon.png

📄 don-t-place-extended-fabs-on-cards-or-inside-other-containers.png

📄 don-t-place-extended-fabs-over-another-actionable-element.png

📄 don-t-place-the-extended-fab-in-the-upper-half-of-a-mobile-screen-as-i.png

📄 don-t-place-the-extended-fab-on-top-of-toolbars-it-disrupts-the-consis.png

📄 don-t-use-multiple-extended-fabs-in-one-screen-as-it-disrupts-visual-h.png

📄 don-t-use-the-extended-fab-to-convey-an-option-in-a-set-of-actions.png

📄 enabled-hovered-elevation-4focused-pressed.png

📄 enabled-hovered-focused-pressed.png

📄 ensure-extended-fabs-get-focus-when-navigating-with-assistive-technolo.png

📄 extended-fab-color-roles-used-for-light-and-dark-schemes-primary-conta-2.png

📄 extended-fab-color-roles-used-for-light-and-dark-schemes-primary-conta.png

📄 extended-fab-height-width-and-icon-size.png

📄 extended-fab.png

📄 extended-fabs-are-more-prominent-than-regular-fabs.png

📄 extended-fabs-can-be-placed-in-the-expanded-navigation-rail.png

📄 extended-fabs-can-use-different-combinations-of-container-and-icon-col.png

📄 extended-fabs-ensure-the-main-action-is-visible-at-all-times.png

📄 extended-fabs-have-a-padding-of-16dp.png

📄 extended-fabs-should-have-margins-of-16dp.png

📄 floating-toolbars-can-be-paired-with-fabs-but-not-extended-fabs.png

📄 icons-should-be-placed-to-the-left-of-labels-for-left-to-right-ltr-lan.png

📄 icons-should-be-placed-to-the-right-of-labels-for-rtl-languages.png

📄 m2-extended-fabs-are-pill-shaped-and-have-a-different-height-and-eleva.png

📄 m3-extended-fabs-share-the-same-height-boxier-shape-and-simpler-elevat.png

📄 only-show-one-prominent-action-at-a-time-with-the-extended-fab.png

📄 place-extended-fabs-in-an-easy-to-reach-place-that-doesn-t-obstruct-ot.png

📄 place-the-extended-fab-above-the-rest-of-the-ui-off-of-elements-like-a.png

📄 shorten-the-text-as-much-as-needed-include-an-icon-for-additional-cont.png

📄 size-and-padding-measurements-of-the-small-medium-and-large-extended-f.png

📄 small-extended-fabmedium-extended-fablarge-extended-fab-2.png

📄 small-extended-fabmedium-extended-fablarge-extended-fab.png

📄 surface-container-fab.png

📄 the-accessibility-label-reads-compose-to-match-the-extended-fab-s-disp.png

📄 the-baseline-extended-fab-is-replaced-with-a-set-of-small-medium-and-l.png

📄 the-extended-fab-can-be-aligned-to-the-trailing-edge-of-the-window.png

📄 the-extended-fab-can-be-at-the-top-of-the-expanded-navigation-rail.png

📄 the-extended-fab-can-be-center-aligned.png

📄 the-extended-fab-can-be-right-aligned-in-both-ltr-and-rtl-languages.png

📄 the-extended-fab-container-hugs-the-icon-and-text.png

📄 there-are-three-sizes-of-extended-fabs.png

📄 tooltips-aren-t-required-since-the-extended-fab-has-label-text.png

📄 unlike-standard-fabs-extended-fabs-don-t-require-an-icon.png

📄 use-a-button-with-appropriate-styling-to-emphasize-it-in-a-group-of-bu.png

📄 use-an-extended-fab-to-emphasize-a-page-s-primary-action.png

📄 use-an-extended-fab-to-provide-constant-access-to-a-primary-action-abo.png

📄 when-space-is-limited-an-extended-fab-can-transform-into-a-fab.png

📄 with-icon.png

📄 without-icon.png

📁 components_fab-menu/

📄 a-primary-fab-is-paired-with-a-primary-fab-menu.png

📄 a-secondary-fab-is-paired-with-a-secondary-fab-menu.png

📄 a-tertiary-fab-is-paired-with-a-tertiary-fab-menu.png

📄 allow-the-menu-items-to-scroll-behind-the-close-button.png

📄 close-button-states-in-light-and-dark-themes-enabledhoveredfocusedpres.png

📄 close-buttonlist-item.png

📄 close-buttonmenu-item.png

📄 don-t-block-an-actionable-element-and-its-focus-indicator-completely-w.png

📄 don-t-change-fab-menu-shapes.png

📄 don-t-expand-container-sizes.png

📄 don-t-obstruct-the-close-button-in-short-screens-like-horizontal-orien.png

📄 don-t-remove-the-label.png

📄 don-t-use-a-fab-menu-with-a-toolbar-or-navigation-rail.png

📄 don-t-use-a-fab-menu-with-one-item.png

📄 ensure-the-actionable-element-and-its-focus-indicator-are-visible-behi.png

📄 fab-menu-size-measurements.png

📄 fab-menus-can-have-2-6-items.png

📄 fab-menus-have-48x48dp-minimum-width-and-sufficient-spacing-by-default.png

📄 fabs-can-be-placed-next-to-toolbars-and-other-components.png

📄 focus-lands-on-the-close-button-people-can-then-navigate-through-all-t.png

📄 in-rtl-languages-the-fab-menu-should-be-left-aligned-with-the-icon-and.png

📄 keep-the-padding-between-the-container-and-icon-icon-and-text-and-text.png

📄 label-fab-menu-items-to-match-their-ui-text-like-reply-all-and-use-the.png

📄 m2-the-speed-dial-used-small-round-fabs.png

📄 m3-the-fab-menu-uses-dynamic-color-and-a-larger-item-size.png

📄 menu-item-states-in-light-and-dark-themes-enabledhoveredfocusedpressed.png

📄 on-android-the-close-button-accessibility-labels-should-include-a-togg.png

📄 on-desktop-use-larger-fabs-and-margins.png

📄 on-primary-containerprimary-containeron-primaryprimaryon-secondary-con.png

📄 only-remove-the-icon-if-necessary-the-icon-provides-a-differentiation-.png

📄 spacing-and-interaction-on-fab-menu-for-web-enabledhoveredselected.png

📄 the-close-button-and-fab-share-the-top-trailing-corner-as-an-anchor-an.png

📄 the-close-button-is-placed-higher-to-align-with-the-top-of-the-large-f.png

📄 the-close-button-is-placed-higher-to-align-with-the-top-of-the-medium-.png

📄 the-fab-menu-can-have-up-to-six-items.png

📄 the-fab-menu-comes-in-three-color-sets-primary-secondary-tertiary.png

📄 the-fab-menu-should-always-open-from-a-fab.png

📄 the-fab-menu-uses-contrasting-color-and-large-items-to-focus-attention.png

📄 the-fab-should-always-have-16dp-margins.png

📄 the-large-fab-placement-has-16dp-margins.png

📄 the-medium-fab-placement-has-16dp-margins.png

📄 the-same-fab-menu-options-on-both-large-window-left-and-an-android-com.png

📄 there-s-one-variant-of-fab-menu.png

📄 three-color-sets-primarysecondarytertiary.png

📄 use-the-fab-menu-to-show-multiple-related-actions-in-a-prominent-expre.png

📁 components_floating-action-button/

📄 1-container2-icon.png

📄 1-small-fab.png

📄 a-fab-can-be-used-within-a-navigation-component-such-as-a-navigation-r.png

📄 a-fab-container-color-needs-to-stand-out-from-its-background.png

📄 avoid-using-colors-with-a-contrast-below-3-1.png

📄 containericon.png

📄 don-t-completely-obscure-an-actionable-element-and-its-focus-indicator.png

📄 don-t-display-multiple-fabs-on-a-single-screen.png

📄 don-t-use-confusing-or-open-ended-icons-to-symbolize-less-common-actio.png

📄 don-t-use-fabs-for-minor-overflow-unclear-or-destructive-actions.png

📄 enabledhovered-8-state-layer-elevation-4focused-10-state-layer-pressed.png

📄 fab-icons-are-above-the-3-1-contrast-ratio.png

📄 fab-medium-fablarge-fab.png

📄 fab-padding-measurements.png

📄 fab-size-measurements.png

📄 fabmedium-fablarge-fab-2.png

📄 fabmedium-fablarge-fab.png

📄 fabs-are-not-needed-on-every-screen-such-as-when-images-represent-prim.png

📄 fabs-can-use-dynamic-color.png

📄 fabs-have-multiple-sizes-that-scale-with-the-window-size.png

📄 fabs-have-updated-colors-and-sizes.png

📄 for-large-screens-place-the-fab-in-the-upper-left-corner.png

📄 in-compact-windows-place-the-fab-in-the-bottom-trailing-edge.png

📄 in-expanded-windows-place-the-fab-in-the-navigation-rail.png

📄 individual-components-such-as-cards-shouldn-t-have-their-own-fab.png

📄 large-fab-padding-measurements.png

📄 large-fab-size-measurements.png

📄 m2-fabs-are-circles-and-always-have-a-drop-shadow.png

📄 m3-fabs-have-a-boxier-shape-can-use-dynamic-color-and-include-a-new-la.png

📄 medium-fab-padding-measurements.png

📄 medium-fab-size-measurements.png

📄 primary-container-on-primary-container-default-secondary-container-on-.png

📄 surface-fabs.png

📄 the-accessibility-label-of-the-fab-with-a-pencil-icon-describes-the-ac.png

📄 the-fab-can-partially-cover-an-actionable-element-as-long-as-the-focus.png

📄 tooltips-surface-the-fab-s-label-when-focused.png

📄 use-a-large-fab-when-the-primary-action-needs-to-be-prominent.png

📄 use-a-medium-fab-in-most-window-sizes.png

📄 use-clear-and-simple-icons-such-as-add-message-or-edit.png

📄 use-fabs-for-primary-positive-actions.png

📄 use-the-extended-fab-when-label-text-is-necessary.png

📄 use-the-fab-menu-when-there-are-many-kinds-of-actions-relevant-to-the-.png

📁 components_icon-buttons/

📄 a-extra-small-b-small-c-medium-d-large-e-extra-largeicon-sizedefault-w.png

📄 a-extra-small-icon-button-size-b-small-icon-button-sizenarrow-width-de.png

📄 a-filled-b-tonal-c-outlined-d-standarddefaulttoggle-unselectedtoggle-s.png

📄 a-round-b-squareenabledhoveredpressed.png

📄 a-round-b-squareenabledhoveredpressedselected.png

📄 a-toolbar-is-a-collection-of-icon-buttons-and-other-components.png

📄 a-unselected-b-selectedenabled-disabled-10-state-layer-hovered-8-state-2.png

📄 a-unselected-b-selectedenabled-disabled-10-state-layer-hovered-8-state-3.png

📄 a-unselected-b-selectedenabled-disabled-10-state-layer-hovered-8-state-4.png

📄 a-unselected-b-selectedenabled-disabled-10-state-layer-hovered-8-state.png

📄 app-bars-often-contain-icon-buttons.png

📄 avoid-using-colors-with-contrast-below-3-1.png

📄 default-icon-buttonstoggle-icon-buttons.png

📄 default-icon-buttontoggle-icon-button.png

📄 diagram-of-icon-button-corner-radius.png

📄 enabled-disabled-10-state-layer-hovered-8-state-layer-focused-10-state-2.png

📄 enabled-disabled-10-state-layer-hovered-8-state-layer-focused-10-state-3.png

📄 enabled-disabled-10-state-layer-hovered-8-state-layer-focused-10-state-4.png

📄 enabled-disabled-10-state-layer-hovered-8-state-layer-focused-10-state.png

📄 ensure-the-meaning-of-the-icon-is-clear-such-as-a-heart-indicating-fav.png

📄 five-sizestwo-shapesfour-color-stylesthree-widths.png

📄 five-sizestwo-shapesthree-widths.png

📄 icon-buttons-can-be-used-within-other-components-such-as-an-app-bar.png

📄 icon-buttons-can-be-used-within-other-components-such-as-in-a-toolbar-.png

📄 icon-buttons-should-have-a-3-1-contrast-ratio-with-the-surface-or-back.png

📄 icon-container.png

📄 iconcontainer.png

📄 icons-without-a-fill-should-be-semibolded-when-selected.png

📄 leverage-the-different-color-styles-to-establish-emphasis-and-direct-p.png

📄 outlined-buttons-indicate-that-more-content-is-available-without-grabb.png

📄 standard-filled-unselected-filled-selected-filled-tonal-and-outlined-i.png

📄 the-container-provides-visual-separation-from-the-background-image.png

📄 the-default-left-and-toggle-right-icon-buttons-are-available-in-all-fo.png

📄 the-icon-button-label-describes-the-action-such-as-add-to-favorites-fo.png

📄 the-tooltip-label-text-should-be-clear-and-concise.png

📄 use-different-button-colors-and-sizes-to-provide-visual-hierarchy-and-.png

📄 use-icons-with-a-background-to-make-them-easy-to-see-on-any-surface.png

📄 when-everything-should-have-the-same-emphasis-use-icon-buttons-that-ar.png

📄 when-mixing-button-variants-use-color-styles-to-make-the-primary-actio.png

📁 components_lists/

📄 1-enabled2-disabled3-hovered4-focused5-pressed6-dragged.png

📄 a-clear-visual-hierarchy-makes-lists-easy-to-scan-and-read.png

📄 a-list-item-s-label-text-and-supporting-text-is-used-for-its-accessibi.png

📄 a-list-item-s-label-text-supporting-text-image-and-trailing-icon-can-b.png

📄 a-multi-column-layout-can-help-break-up-content-when-needed.png

📄 a-multi-select-list.png

📄 a-single-select-list.png

📄 adjust-margins-to-create-a-more-comfortable-line-length-for-reading.png

📄 align-content-by-importance-1-more-distinguishing-content2-less-distin.png

📄 an-expressive-list-has-a-segmented-style-and-round-corners.png

📄 arrow-keys-navigate-up-and-down-through-list-items.png

📄 avoid-placing-visuals-in-the-center-of-a-row-because-it-makes-the-list.png

📄 baseline-list-item-measurements-and-padding-2.png

📄 baseline-list-item-measurements-and-padding-3.png

📄 baseline-list-item-measurements-and-padding.png

📄 baseline-list-items-have-square-corners-and-standard-colors.png

📄 baseline-one-line-list-alignment-padding-and-size-measurements.png

📄 baseline-three-line-list-alignment-padding-and-size-measurements.png

📄 baseline-two-line-list-alignment-padding-and-size-measurements.png

📄 container-and-label-text-are-required-all-other-elements-are-optional--2.png

📄 container-and-label-text-are-required-all-other-elements-are-optional-.png

📄 cursor-hover.png

📄 cursor-selected.png

📄 don-t-scale-components-without-adjusting-other-affected-areas-of-the-s.png

📄 don-t-use-multiple-selection-interactions-in-one-item.png

📄 down-and-right-arrow-keys-move-focus-to-the-next-action-of-the-list-it.png

📄 enabled-disabledhoveredfocusedpresseddragged-2.png

📄 enabled-disabledhoveredfocusedpresseddragged.png

📄 expressive-lists-feature-improved-selection-states.png

📄 if-the-focus-is-on-a-list-item-s-first-action-the-up-and-left-arrows-m.png

📄 in-a-single-action-list-each-item-is-a-single-tappable-area.png

📄 leading-icons-should-relate-to-the-label-texttrailing-icons-can-commun.png

📄 limit-supporting-text-to-one-to-three-lines.png

📄 limit-the-use-of-dividers-to-uncontained-lists.png

📄 list-color-roles-used-for-light-and-dark-themes-surface-on-surface-var.png

📄 list-color-roles-used-for-light-and-dark-themes-surfaceon-surfaceon-su.png

📄 list-item-alignment-padding-and-size-measurements-the-icon-button-heig.png

📄 list-items-with-checkboxesswitches-radio-buttons.png

📄 lists-are-an-organized-way-to-add-imagery-and-supporting-elements-to-s.png

📄 lists-can-include-a-range-of-layout-combinations-leading-images-videos.png

📄 m2-non-standard-heights-and-alignments.png

📄 m3-baseline-standardized-heights-and-alignments.png

📄 multi-action-list-items-include-a-primary-action-and-one-or-more-secon.png

📄 on-android-views-mdc-android-the-accessibility-label-and-role-are-appl.png

📄 on-larger-screens-a-list-detail-view-can-be-more-appropriate.png

📄 on-web-a-list-container-s-role-is-list-box.png

📄 place-supplementary-actions-in-the-trailing-position-of-a-list-item.png

📄 place-supporting-visuals-like-thumbnails-at-the-leading-edge-of-a-row-.png

📄 reserve-the-use-of-slots-for-use-cases-that-maintain-the-list-s-access.png

📄 sample-listcontent-placement-in-a-rowsupporting-visuals-are-aligned-fo.png

📄 space-or-enter-keys-activate-an-element-in-a-list.png

📄 standardsegmented.png

📄 tab-brings-the-focus-to-the-first-action.png

📄 tab-key-focuses-on-the-first-item-or-the-selected-item.png

📄 the-content-slot-must-be-the-largest-section-placed-in-the-middle-of-t.png

📄 the-primary-action-takes-up-more-space-1-primary-action-area2-secondar.png

📄 the-space-or-enter-key-activates-a-selected-action-in-a-list.png

📄 three-examples-of-list-item-sizes-label-text-onlylabel-text-with-suppo.png

📄 up-and-left-arrow-keys-move-focus-to-the-previous-action-of-the-list-i.png

📄 use-a-single-action-list-for-a-primary-action-like-navigation.png

📄 use-an-expressive-circular-avatar-to-represent-a-person-or-entity.png

📄 use-checkboxes-or-switches-for-multi-select-lists.png

📄 use-non-interactive-lists-to-make-information-easy-to-scan.png

📄 use-only-one-selection-interaction-per-list-item.png

📄 use-radio-buttons-to-allow-a-single-selection-in-a-list.png

📄 use-segmented-gaps-and-filled-list-items-to-define-a-list-group.png

📄 use-trailing-text-for-supplemental-details-like-a-price-count-or-date.png

📄 use-two-visual-cues-to-show-a-list-item-is-selected-like-a-leading-che.png

📄 when-selectable-the-role-checkbox-applies-to-the-entire-list-item-on-j.png

📄 with-leading-avatarwith-leading-avatar-and-trailing-checkbox.png

📄 with-leading-checkboxwith-leading-checkbox-and-trailing-text.png

📄 with-leading-iconwith-leading-icon-and-trailing-checkbox.png

📄 with-leading-imagewith-leading-image-and-trailing-checkbox.png

📄 with-leading-radio-buttonwith-leading-radio-button-and-trailing-text.png

📄 with-leading-videowith-leading-video-and-trailing-checkbox.png

📄 with-text-onlywith-text-and-trailing-checkbox.png

📄 with-trailing-switchwith-leading-icon-and-trailing-switch.png

📁 components_loading-indicator/

📄 active-indicatorcontainer-optional.png

📄 active-indicatorcontainer.png

📄 avoid-using-when-the-contrast-is-under-3-1.png

📄 contained-loading-indicator-color-roles-used-for-light-and-dark-scheme.png

📄 defaultcontained.png

📄 ensure-at-least-3-1-contrast-between-the-indicator-and-the-surface-it-.png

📄 loading-indicator-color-roles-used-for-light-and-dark-schemes-primary.png

📄 loading-indicator-labels-should-explain-which-items-are-loading.png

📄 loading-indicator.png

📄 loading-indicators-can-range-in-size-from-24-240dp.png

📄 the-active-indicator-morphs-shape-to-capture-attention.png

📄 the-container-is-a-circle-that-provides-extra-contrast-from-body-conte.png

📄 the-loading-indicator-provides-visual-contrast-of-at-least-3-1-against.png

📄 to-ensure-sufficient-margins-the-size-is-48dp-while-the-shape-containe.png

📁 components_menus/

📄 a-baseline-menu-has-square-corners-as-compared-to-a-vertical-menu-s-ro.png

📄 a-bottom-sheet-can-replace-a-menu-on-smaller-screens.png

📄 a-context-menu-appears-when-right-clicking-with-a-mouse-or-trackpad-it.png

📄 a-divider-or-gap-can-t-receive-focus.png

📄 baseline-menu-color-roles-used-for-light-and-dark-themes-on-surface-va.png

📄 baseline-menu-padding-and-size-measurements.png

📄 density-of-menus-from-0-to-3.png

📄 disabled-menu-items-can-receive-focus.png

📄 dividers-separate-menu-items-in-baseline-menus-and-on-web.png

📄 enableddisabledhoveredfocusedpressed-2.png

📄 enableddisabledhoveredfocusedpressed.png

📄 enableddisabledhoveredfocusedpressedactive-main-menu-reveals-submenu.png

📄 examples-of-4-baseline-menu-inputs.png

📄 for-menu-items-with-text-and-an-icon-the-icon-s-accessibility-label-is.png

📄 gaps-separate-menu-items-using-expressive-shapes.png

📄 keyboard-navigation-on-android-and-web-tab-to-select-a-menu-itemspace-.png

📄 list-item-list-item-leading-icon-list-item-trailing-icon-containerlist.png

📄 m2-former-menu-colors-don-t-contrast-with-the-background.png

📄 m3-menus-feature-new-color-mappings-and-dynamic-color.png

📄 menu-item-leading-icon-optional-menu-item-texttrailing-icon-optional-b-2.png

📄 menu-item-leading-icon-optional-menu-item-texttrailing-icon-optional-b.png

📄 menu-items-can-be-grouped-to-be-more-scannable-standard-vertical-menug.png

📄 menus-appear-in-front-of-all-other-ui-elements.png

📄 menus-can-appear-around-or-in-front-of-the-element-that-opened-them.png

📄 menus-can-be-single-or-multi-select.png

📄 on-large-screens-a-menu-is-often-more-appropriate-than-a-bottom-sheet.png

📄 on-web-menus-can-open-submenus.png

📄 position-submenus-to-the-side-of-the-parent-item.png

📄 reserve-the-use-of-slots-for-use-cases-that-maintain-the-menu-s-access-2.png

📄 reserve-the-use-of-slots-for-use-cases-that-maintain-the-menu-s-access.png

📄 slots-can-appear-anywhere-in-a-menu.png

📄 standard-color-schemevibrant-color-scheme.png

📄 standardgrouped.png

📄 tapping-the-icon-triggers-a-menu-choosing-a-menu-option-doesn-t-change.png

📄 the-menu-item-s-accessibility-label-aligns-with-the-ui-text.png

📄 the-redo-action-is-disabled-when-that-action-isn-t-available.png

📄 use-multiple-visual-cues-like-color-shape-and-icons-to-show-that-an-it.png

📄 vertical-menu-padding-and-size-measurements.png

📄 vertical-menu-with-gapvertical-menu-with-divider.png

📄 vertical-menus-can-include-vibrant-colors-gaps-dividers-and-submenus-t.png

📄 vertical-menus-color-roles-used-for-light-and-dark-themes-on-surface-v.png

📄 vertical-menus-color-roles-used-for-light-and-dark-themes-on-tertiary-.png

📄 vibrant-colors-help-selected-menu-items-stand-out.png

📁 components_navigation-bar/

📄 3-destinations4-destinations5-destinations.png

📄 a-navigation-bar-in-horizontal-orientation-keeps-the-same-spacing-betw.png

📄 a-navigation-bar-s-accessibility-label-can-incorporate-its-adjacent-ui.png

📄 avoid-putting-more-than-five-navigation-items-in-a-navigation-bar.png

📄 badges-overlap-the-icon-in-both-vertical-and-horizontal-navigation-ite.png

📄 containericonactive-indicator-small-badge-optional-large-badge-optiona.png

📄 containericonlabel-textactive-indicatorlarge-badge-optional-small-badg.png

📄 containericonlabel-textactive-indicatorsmall-badge-optional-large-badg.png

📄 containericonlabel-textactive-indicatorsmall-badgelarge-badgelarge-bad.png

📄 don-t-cover-the-navigation-bar-with-a-fab.png

📄 don-t-remove-the-labels-from-navigation-items.png

📄 don-t-shrink-longer-text-to-fit-on-a-single-line.png

📄 don-t-use-a-navigation-bar-for-fewer-than-three-destinations-instead-u.png

📄 don-t-use-multiple-or-low-contrast-colors-in-a-navigation-bar-as-they-.png

📄 don-t-use-navigation-bars-for-desktop-layouts-instead-use-a-navigation.png

📄 don-t-use-outlined-icons-on-selected-nav-items.png

📄 don-t-use-the-active-indicator-for-more-than-one-destination-at-a-time.png

📄 don-t-wrap-or-truncate-text-as-it-can-make-the-label-hard-to-understan.png

📄 enabledhovered-8-state-layer-focused-10-state-layer-pressed-10-state-l.png

📄 flexible-navigation-bar.png

📄 focus-lands-on-first-navigation-item.png

📄 if-a-filled-version-of-an-icon-is-unavailable-the-icon-s-weight-must-i.png

📄 label-text-must-be-brief-and-clear.png

📄 m2-a-drop-shadow-indicates-placement-on-top-of-content-filled-and-regu.png

📄 m3-taller-and-no-drop-shadow-filled-icons-and-an-active-indicator-indi.png

📄 navigation-bar-color-roles-used-for-light-and-dark-schemes-surface-con.png

📄 navigation-bar-color-roles-used-for-light-and-dark-schemes-surfaceon-s.png

📄 navigation-bar-destinations-have-fixed-positions-don-t-scroll-them-or-.png

📄 navigation-bar-for-compact-and-medium-window-sizes.png

📄 navigation-bar-not-recommended.png

📄 navigation-bar-orbiter-padding-and-measurements.png

📄 navigation-bar-padding-and-size-measurements-2.png

📄 navigation-bar-padding-and-size-measurements.png

📄 navigation-bar-states-enabled-hovered-focused-pressed.png

📄 navigation-bar-target-size-and-margins.png

📄 navigation-bar-width-and-margins-for-compact-and-medium-windows-vertic.png

📄 navigation-bars-adapt-to-different-window-sizes.png

📄 navigation-bars-can-have-three-to-five-destinations.png

📄 navigation-bars-use-100-of-the-screen-width.png

📄 on-mobile-or-tablet-navigation-bars-should-be-used-for-top-level-desti.png

📄 surface-containersurface-container-highsurface-container-highesttertia.png

📄 text-scaled-to-1-5-size.png

📄 text-scaled-to-2x-size.png

📄 the-fab-should-be-right-aligned-above-the-navigation-bar.png

📄 the-flexible-navigation-bar-is-shorter-and-can-be-used-in-medium-windo.png

📄 the-navigation-bar-container-holds-all-elements.png

📄 the-navigation-bar-is-divided-into-equal-width-segments-with-padding-f.png

📄 the-navigation-item-is-selected-with-space-enter.png

📄 use-a-filled-icon-for-the-selected-navigation-destination-to-different.png

📄 use-a-small-badge-to-indicate-an-update-and-a-large-badge-to-show-the-.png

📄 use-brief-text-labels-to-identify-the-purpose-of-a-destination.png

📄 use-filled-icons-when-the-navigation-item-is-active.png

📄 use-navigation-for-distinct-pages-and-tabs-for-related-content-within-.png

📄 use-the-active-indicator-only-for-the-active-destination.png

📄 vertical-navigation-items-work-best-in-compact-windows-horizontal-item.png

📄 vertical-navigation-itemshorizontal-navigation-items.png

📄 when-selected-the-icon-fills-darkens-and-is-backed-by-an-active-indica.png

📄 while-the-visible-label-text-reads-library-the-accessibility-label-for.png

📁 components_navigation-drawer/

📄 1-dismiss-by-tapping-the-scrim2-dismiss-by-swiping-the-drawer.png

📄 a-modal-drawer-opened-by-an-action-such-as-clicking-a-navigation-menu-.png

📄 a-navigation-drawer-opens-from-the-left-side-of-the-screen-for-left-to.png

📄 a-navigation-drawer-s-accessibility-label-can-incorporate-its-adjacent.png

📄 a-permanently-visible-standard-navigation-drawer-on-desktop.png

📄 a-standard-dismissible-navigation-drawer-is-opened-and-closed-by-tappi.png

📄 actionable-list-items-in-a-navigation-drawer-describe-each-destination.png

📄 avoid-keeping-the-icon-style-for-the-selected-navigation-destination-t.png

📄 avoid-using-two-navigation-components-on-the-same-screen.png

📄 containerheadlinelabel-textactive-indicatorbadge-label-textscrimicon.png

📄 don-t-apply-icons-to-some-destinations-and-not-others-icons-should-be-.png

📄 don-t-shrink-text-size-in-order-to-fit-a-text-label-on-a-single-line.png

📄 don-t-use-dividers-to-separate-individual-destinations.png

📄 don-t-wrap-label-text.png

📄 element-size-measurements-2.png

📄 element-size-measurements.png

📄 focus-lands-on-first-navigation-item.png

📄 keep-text-labels-concise-but-truncate-them-if-they-extend-beyond-the-c.png

📄 m2-navigation-drawer-had-square-corners-and-a-rectangular-shape-indica.png

📄 m3-navigation-drawer-has-rounded-corners-new-color-mappings-and-an-upd.png

📄 modal-navigation-drawer-using-a-scrim-to-block-interaction-with-the-re.png

📄 modal-navigation-drawer.png

📄 navigation-drawer-color-roles-used-for-light-and-dark-schemes-surface-.png

📄 navigation-drawer-states-enabled-hovered-focused-pressed.png

📄 navigation-drawer-with-4-primary-destinations.png

📄 navigation-drawers-can-include-headers-subheads-and-dividers-to-organi.png

📄 navigation-drawers-can-use-text-labels-without-icons.png

📄 padding-and-margins-2.png

📄 padding-and-margins.png

📄 related-destinations-can-be-grouped-using-short-subhead-section-labels.png

📄 scrim-applied-behind-a-modal-navigation-drawer.png

📄 select-the-scrim-to-close-the-navigation-drawer.png

📄 standard-navigation-drawer-providing-access-to-drawer-destinations-nex.png

📄 standard-navigation-drawer.png

📄 standard-navigation-drawermodal-navigation-drawer.png

📄 standard-navigation-drawers-change-size-to-suit-the-device-s-screen.png

📄 the-active-indicator-1-is-a-background-shape-communicating-which-desti.png

📄 the-navigation-item-is-selected-via-space-enter.png

📄 use-a-filled-icon-for-the-selected-navigation-destination-to-different.png

📄 use-a-modal-navigation-drawer-on-mobile-screens.png

📄 use-a-navigation-drawer-for-5-or-more-primary-destinations-or-more-tha.png

📄 use-a-standard-navigation-drawer-on-large-and-desktop-screens.png

📄 use-full-width-dividers-1-to-separate-groups-of-destinations.png

📄 use-recognizable-icons-when-conventions-exist.png

📄 when-selected-the-icon-fills-darkens-in-light-theme-or-lightens-in-dar.png

📄 while-the-visible-label-text-reads-recents-the-accessibility-label-for.png

📁 components_navigation-rail/

📄 1-small-badge-on-a-rail-destination-2-large-badge-with-a-number3-large.png

📄 4-common-layouts-of-collapsed-navigation-rail.png

📄 4-states-of-collapsed-navigation-rails.png

📄 a-divider-can-make-the-navigation-rail-container-distinct-from-other-o.png

📄 a-navigation-rail-can-be-expanded-by-default-on-larger-screen-sizes-or.png

📄 a-navigation-rail-can-expand-to-reveal-more-destinations.png

📄 a-navigation-rail-should-be-the-only-visible-navigation-element.png

📄 a-top-aligned-fab-in-the-navigation-rail.png

📄 an-icon-with-no-filled-option-should-use-the-semibold-weight-when-acti.png

📄 avoid-placing-the-fab-below-navigation-items.png

📄 avoid-using-the-same-unfilled-icon-style-for-both-selected-and-unselec.png

📄 break-up-longer-phrases-into-two-text-lines-if-necessary.png

📄 collapsed-and-expanded-navigation-rail-elements-containermenu-optional.png

📄 collapsed-navigation-railexpanded-navigation-rail.png

📄 contained-fab-railspatialized-fab-rail.png

📄 containeractive-indicatorlarge-badge-optional-badge-optional-large-bad.png

📄 containermenu-icon-optional-iconactive-indicatorlabel-textlarge-badge-.png

📄 containermenu-optional-floating-action-button-fab-optional-icon-active.png

📄 cursor-hover-click.png

📄 don-t-reduce-the-type-size-to-fit-more-characters-into-a-destination-l.png

📄 don-t-truncate-or-display-an-ellipsis-in-place-of-label-text.png

📄 don-t-use-more-than-two-colors-for-destinations-or-low-contrast-colors.png

📄 don-t-use-the-active-indicator-for-more-than-one-navigation-item-at-a-.png

📄 don-t-use-the-navigation-rail-horizontally-use-a-navigation-bar-instea.png

📄 enabledhoveredfocusedpressed.png

📄 expanded-layout-standardexpanded-layout-modal.png

📄 icons-should-symbolize-the-content-of-the-page-they-open.png

📄 m2-the-navigation-rail-uses-icon-color-weight-and-fill-to-communicate-.png

📄 m3-the-navigation-rail-uses-a-pill-shaped-active-indicator-to-communic.png

📄 navigation-rail-color-roles-used-for-light-and-dark-schemes-surface-co.png

📄 navigation-rail-color-roles-used-for-light-and-dark-themes-on-secondar.png

📄 navigation-rail-orbiter-padding-and-measurements-with-contained-fab.png

📄 navigation-rail-orbiter-padding-and-measurements-with-spatialized-fab.png

📄 navigation-rail-padding-and-margin-measurements.png

📄 navigation-rail-padding-and-size-measurements.png

📄 navigation-rail-size-measurements.png

📄 navigation-rail-states-enabled-on-active-destination-hovered-on-active.png

📄 on-smaller-devices-use-a-navigation-bar-on-larger-displays-use-a-navig.png

📄 override-the-indicator-to-fill-the-container-to-more-closely-resemble-.png

📄 selected-navigation-items-have-an-active-indicator-a-filled-icon-and-a.png

📄 surface-container-with-tertiary-fabsurface-container-high-with-tertiar.png

📄 text-scaled-to-1-5-size.png

📄 text-scaled-to-2x-size.png

📄 the-active-indicator-hugs-contents-in-the-expanded-nav-rail.png

📄 the-baseline-navigation-rail-is-no-longer-recommended.png

📄 the-collapsed-and-expanded-navigation-rails-match-visually-and-can-tra.png

📄 the-expanded-navigation-rail-can-also-be-hidden-appearing-only-when-th.png

📄 the-navigation-rail-should-be-placed-on-the-leading-edge-of-the-window.png

📄 three-navigation-items-three-navigation-items-with-a-menuthree-navigat.png

📄 top-and-center-aligned-rail-destination-placement.png

📄 touch-tap-2.png

📄 touch-tap.png

📄 use-a-filled-icon-variant-on-the-selected-navigation-item-to-different.png

📄 use-arrows-to-move-between-navigation-items.png

📄 use-caution-when-placing-logos-in-the-rail-where-they-might-be-confuse.png

📄 use-space-enter-to-activate-the-focused-navigation-item.png

📄 use-the-active-indicator-only-for-the-current-open-page.png

📄 use-the-default-color-scheme-to-ensure-proper-contrast-and-emphasis-on.png

📄 use-the-menu-icon-to-transition-between-collapsed-and-expanded-navigat.png

📄 while-the-visible-label-text-reads-recent-the-accessibility-label-for-.png

📄 with-a-menuwith-a-fabwith-menu-and-fab-without-labelsall-destinations-.png

📄 write-clear-and-concise-labels-that-describe-the-destination-page.png

📁 components_progress-indicators/

📄 a-label-on-an-intedeterminate-progress-indicator-on-a-screen-which-is-.png

📄 active-indicatortrackstop-indicator.png

📄 amplitude-measures-from-the-center-of-the-resting-position-to-the-cent.png

📄 avoid-removing-the-stop-indicator-if-any-adjacent-containers-or-surfac.png

📄 avoid-using-a-color-below-3-1-contrast.png

📄 behavior-determinate-and-indeterminatethickness-default-4dp-and-variab.png

📄 ensure-the-indicator-s-color-provides-at-least-3-1-contrast-against-th.png

📄 linear-and-circular-progress-indicators-have-visual-configurations-for.png

📄 linear-indicator-circular-indicator.png

📄 linear-progress-indicatorcircular-progress-indicator.png

📄 linear-progress-indicators-can-flow-from-right-to-left-in-right-to-lef.png

📄 m2-progress-indicators-have-a-boxier-neutral-style.png

📄 m3-progress-indicators-are-compatible-with-dynamic-color.png

📄 only-remove-the-end-stop-indicator-if-there-s-a-visual-contrast-of-at-.png

📄 only-remove-the-stop-indicator-when-the-linear-progress-indicator-has-.png

📄 progress-indicator-color-roles-used-for-light-and-dark-schemes-primary.png

📄 progress-indicator-labels-should-explain-which-items-are-loading.png

📄 progress-indicators-have-a-new-rounded-colorful-style.png

📄 size-measurements-for-circular-progress-indicators-the-thicker-variant.png

📄 size-measurements-for-linear-progress-indicators-the-thicker-variants-.png

📄 the-linear-progress-indicator-is-inset-from-the-edge-of-the-screen-by-.png

📄 the-linear-progress-indicator-should-always-span-the-width-of-the-ui-e.png

📄 the-progress-indicator-and-stop-indicator-provide-visual-contrast-of-a.png

📄 the-waveform-should-scale-with-the-size-so-the-proportions-look-the-sa.png

📄 use-a-stop-indicator-when-placing-the-progress-indicator-inside-a-cont.png

📄 wavelength-measures-the-distance-between-two-adjacent-peaks.png

📄 when-progress-first-begins-the-active-indicator-appears-as-a-dot.png

📁 components_radio-button/

📄 arrows-move-to-next-element-in-a-list.png

📄 avoid-using-horizontal-radio-button-lists.png

📄 checkboxes.png

📄 consider-using-a-drop-down-menu-instead-of-radio-buttons-when-space-is.png

📄 don-t-allow-radio-buttons-to-select-multiple-options.png

📄 don-t-nest-radio-buttons.png

📄 enabled-hover-focus-presseddisabled.png

📄 label-the-radio-button-based-on-its-label-text.png

📄 label-the-radio-group-based-on-the-category-title.png

📄 radio-button-color-roles-used-for-light-and-dark-themes-primaryon-surf.png

📄 radio-button-icon.png

📄 radio-button-size-measurements.png

📄 radio-buttons-are-single-select-unlike-checkboxes-which-are-multi-sele.png

📄 radio-buttons-can-be-selected.png

📄 radio-buttons-feature-new-color-mappings.png

📄 radio-buttons-should-always-have-one-option-pre-selected.png

📄 radio-buttons.png

📄 selected-iconadjacent-label-textunselected-icon.png

📄 settings-page-with-3-stacked-radio-buttons-for-selecting-a-language.png

📄 switches.png

📄 tab-brings-the-focus-to-the-initially-selected-item-or-the-initial-rad.png

📄 the-text-color-remains-the-same-regardless-if-the-button-is-selected-o.png

📄 use-checkboxes-when-multiple-options-can-be-selected-from-a-list.png

📄 use-radio-buttons-when-only-one-option-can-be-selected-from-a-list.png

📄 use-radio-buttons-when-there-are-five-or-fewer-options.png

📁 components_search/

📄 4-search-bars-with-different-trailing-elements.png

📄 a-docked-layout-on-a-large-screena-full-screen-layout-the-default-for-.png

📄 a-search-bar-can-be-the-primary-focus-of-a-page.png

📄 a-search-bar-can-contain-a-non-functional-search-icon.png

📄 add-a-search-bar-below-a-title-to-search-specific-content.png

📄 autocomplete-results-should-be-announced-by-the-screen-reader.png

📄 combine-an-avatar-with-up-to-one-other-trailing-icon-button.png

📄 docked-layout-in-the-contained-style.png

📄 docked-layout-in-the-divided-style.png

📄 docked-layout-on-a-tablet.png

📄 docked-search-color-roles-used-in-light-and-dark-themes-surface-contai.png

📄 docked-search-padding-and-size-measurements-for-contained-style.png

📄 docked-search-padding-and-size-measurements-for-divided-style.png

📄 enabledhoveredfocusedpressed-ripple-2.png

📄 enabledhoveredfocusedpressed-ripple.png

📄 focused-search-bar-margin-measurements.png

📄 focused-search-can-be-a-standalone-destination-reached-by-selecting-an.png

📄 focused-search-can-show-an-optional-clear-icon-to-remove-input-text.png

📄 for-global-search-use-a-persistent-search-app-bar-integrated-into-an-a.png

📄 full-screen-layout-in-the-contained-style.png

📄 full-screen-layout-in-the-divided-style.png

📄 full-screen-layout-on-mobile.png

📄 full-screen-search-color-roles-used-in-light-and-dark-themes-surface-c.png

📄 full-screen-search-padding-and-size-measurements-for-contained-style.png

📄 full-screen-search-padding-and-size-measurements-for-divided-style.png

📄 if-there-s-no-leading-icon-focus-lands-on-the-text-field.png

📄 include-high-priority-items-like-avatars-in-search-suggestions-or-resu.png

📄 initial-focus-can-land-on-a-leading-icon.png

📄 m2-open-search-bars-were-square-and-elevated.png

📄 m3-search-bars-are-rounded-use-tonal-surface-and-support-dynamic-color.png

📄 search-bar-containerleading-iconsupporting-textavatar-or-trailing-icon.png

📄 search-bar-containerleading-iconsupporting-texttrailing-icon-and-avata.png

📄 search-bar-containers-have-persistent-rounded-corners.png

📄 search-bars-should-usually-be-placed-at-the-top-of-the-content.png

📄 search-bars-use-surface-container-high-to-provide-clear-contrast.png

📄 search-can-be-a-secondary-action.png

📄 search-helps-people-find-information-in-large-inboxes-like-messages-or.png

📄 search-suggestions-and-results-are-created-using-lists.png

📄 show-search-results-in-a-compact-organized-list-with-an-indicator-like.png

📄 the-accessibility-label-should-match-the-hinted-search-text.png

📄 the-contained-style-has-a-persistent-filled-container-expressive-motio.png

📄 the-divided-baseline-style-uses-a-divider-to-separate-the-search-bar-f.png

📄 to-separate-list-items-into-distinct-groups-use-a-gap.png

📄 unfocused-search-bar-margin-measurements.png

📄 unfocused-search-bar-with-avatar-measurements.png

📄 unfocused-search-bar-with-leading-and-trailing-icon-measurements.png

📄 use-a-maximum-of-two-trailing-icons.png

📄 use-a-search-icon-button-when-search-is-a-secondary-action.png

📄 use-icon-labels-for-icon-buttons.png

📄 using-a-surface-container-high-color-on-a-surface-container-background.png

📄 when-focused-a-search-bar-expands-to-show-search-suggestions-or-result.png

📁 components_segmented-buttons/

📄 a-multi-select-segmented-button-for-filtering-restaurant-search-option.png

📄 a-segmented-button-can-be-placed-on-a-bottom-sheet.png

📄 a-segmented-button-can-help-switch-between-viewing-restaurant-and-bar-.png

📄 a-single-select-segmented-button-for-choosing-beverage-size.png

📄 allow-adequate-space-for-margins-the-button-container-shouldn-t-reach-.png

📄 avoid-mixing-icon-only-labels-with-text-labels-choose-one-label-type-a.png

📄 containericon-optional-for-unselected-state-label-text.png

📄 don-t-allow-segmented-buttons-to-span-the-full-width-of-larger-screens.png

📄 don-t-allow-segments-to-wrap-onto-a-new-line.png

📄 don-t-use-more-than-five-segments-in-a-single-segmented-button-choices.png

📄 each-step-down-in-density-removes-4dp-from-the-height.png

📄 focus-begins-on-the-left-for-left-to-right-languages-and-on-the-right-.png

📄 icons-can-be-used-in-place-of-labels-but-they-must-clearly-communicate.png

📄 keep-labels-short-and-consistent-in-length.png

📄 m2-segmented-buttons-had-a-small-corner-radius-and-label-text-in-all-c.png

📄 m3-segmented-buttons-have-fully-rounded-corners-sentence-case-text-dif.png

📄 padding-and-container-size-target-size.png

📄 segmentcontainericon-optional-label-text-optional-selected-icon.png

📄 segmented-button-color-roles-used-for-light-and-dark-schemes-on-surfac.png

📄 segmented-buttons-are-best-used-for-selecting-between-2-and-5-choices.png

📄 segmented-buttons-can-include-icons.png

📄 segmented-buttons-have-fully-rounded-corners.png

📄 segmented-buttons-now-have-a-container-height-of-40dp.png

📄 selected-button-states-selected-hovered-on-selectedfocused-on-selected.png

📄 set-a-maximum-padding-within-the-segments-to-ensure-usability-on-large.png

📄 single-select-multi-select.png

📄 single-select-segmented-button-can-only-have-1-segment-selectedmulti-s.png

📄 single-select-segmented-buttonmulti-select-segmented-button.png

📄 the-label-for-segmented-button-matches-the-text-label.png

📄 the-role-for-the-multi-select-segmented-button-is-checkbox.png

📄 the-segmented-button-shouldn-t-have-a-contrast-outline-less-than-3-1.png

📄 there-can-be-anywhere-from-2-to-5-segments-in-single-select-and-multi-.png

📄 unselected-button-states-enabled-disabled-hovered-focused-pressed.png

📄 use-an-outline-with-a-surface-contrast-of-at-least-3-1.png

📄 use-consistent-label-types.png

📄 use-labels-that-are-as-clear-and-short-as-possible.png

📄 use-tab-to-navigate-through-segments-and-space-enter-to-select-unselec.png

📁 components_side-sheets/

📄 a-close-icon-button-makes-the-side-sheet-easy-to-dismiss.png

📄 action-buttons.png

📄 back-icon-button-optional-headlinecontainer-close-icon-buttondivider-o.png

📄 back-icon-button-optional-headlinecontainerclose-icon-buttondivider-op.png

📄 back-icon-button.png

📄 close-icon-button.png

📄 container.png

📄 divider-optional-headlinecontainerclose-icon-button-2.png

📄 divider-optional-headlinecontainerclose-icon-button.png

📄 divider.png

📄 don-t-allow-horizontal-scrolling-or-lay-out-the-side-sheet-in-a-way-th.png

📄 don-t-inset-a-side-sheet-from-the-screen-edges-far-beyond-the-recommen.png

📄 form-controls-shown-in-a-side-sheet-for-app-settings.png

📄 information-about-a-photo-in-a-standard-side-sheet.png

📄 modal-side-sheet-padding-and-size-measurements.png

📄 modal-side-sheet-with-filter-controls.png

📄 place-side-sheets-along-the-edge-of-the-screen-usually-on-the-right-si.png

📄 side-sheet-color-roles-used-for-light-and-dark-themes-on-surface-varia.png

📄 side-sheet-color-roles-used-for-light-and-dark-themes-outline-varianto.png

📄 side-sheet-elements-are-reversed-in-rtl-languages.png

📄 side-sheet-padding-and-size-measurements.png

📄 side-sheets-have-new-color-mappings-to-support-dynamic-color.png

📄 standard-side-sheet-modal-side-sheet-2.png

📄 standard-side-sheet-modal-side-sheet.png

📄 the-role-for-side-sheets-is-dialog.png

📄 visible-focus-shown-on-the-available-actions-within-a-side-sheet-headl.png

📄 without-a-close-icon-button-people-can-t-predict-the-opening-and-closi.png

📁 components_sliders/

📄 a-handle-changes-shape-when-it-s-being-pressed-or-dragged.png

📄 a-slider-s-accessibility-label-should-match-the-adjacent-ui-text.png

📄 a-stop-indicator-on-the-inactive-track-makes-it-easier-to-identify-the.png

📄 a-value-can-appear-while-the-handle-is-being-pressed-or-dragged.png

📄 because-of-the-additional-cognitive-load-of-a-range-slider-avoid-using.png

📄 don-t-use-an-inset-icon-on-a-centered-slider.png

📄 don-t-use-an-inset-icon-on-a-range-slider.png

📄 don-t-use-an-inset-icon-with-sliders-that-have-track-thicknesses-under.png

📄 enableddisabledhoveredfocusedpressed.png

📄 for-range-sliders-the-value-only-appears-on-one-handle-at-a-time.png

📄 horizontal-centered-slider.png

📄 horizontal-range-slider.png

📄 horizontal-standard-slider.png

📄 icon-buttons-placed-outside-the-slider-should-have-the-button-role.png

📄 icons-make-it-easier-to-identify-the-ends-of-the-slider-on-a-low-contr.png

📄 inset-icons-change-placement-based-on-the-handle.png

📄 inset-iconstops-value-indicator.png

📄 m2-sliders-have-a-circular-handle-and-a-small-label-when-pressed.png

📄 m3-sliders-have-new-color-mappings-and-support-dynamic-color.png

📄 m3-visual-refresh-sliders-have-a-stop-indicator-larger-label-text-and-.png

📄 orientation-horizontal-verticalsize-xs-s-m-l-xl.png

📄 padding-and-size-measurements-for-common-sliders.png

📄 padding-and-size-measurements-for-xs-s-m-l-and-xl-sliders.png

📄 plus-and-minus-icons-or-text-can-be-added-to-the-left-and-right-of-the.png

📄 slider-color-roles-used-for-light-and-dark-schemes-inverse-surfaceinve.png

📄 standard-slider-in-horizontal-orientation.png

📄 standard-slider-in-vertical-orientation.png

📄 standard-slidercentered-sliderrange-slider.png

📄 standardcenteredrange.png

📄 stop-indicators-show-each-available-value-on-a-slider.png

📄 the-track-on-a-slider-shows-the-available-range.png

📄 two-handles-are-used-for-sliders-with-range-selection.png

📄 use-sliders-to-pick-a-value-from-a-range-like-volume-loudness.png

📄 value-indicator-optional-stop-indicators-optional-active-trackhandlein-2.png

📄 value-indicator-optional-stop-indicators-optional-active-trackhandlein.png

📄 vertical-centered-slider.png

📄 vertical-standard-slider.png

📄 xl-sliders-should-be-the-focus-of-the-page.png

📄 xs-16dps-24dpm-40dpl-56dpxl-96dp.png

📁 components_snackbar/

📄 a-dismiss-action-is-unnecessary-as-snackbar-disappears-on-their-own-by.png

📄 a-horizontally-expanded-snackbar-placed-at-the-bottom-of-screen-on-a-m.png

📄 adjust-the-size-of-the-snackbar-to-avoid-blocking-elements-in-focus.png

📄 also-communicate-snackbar-information-near-the-action-that-triggered-t.png

📄 an-app-can-apply-slight-transparency-to-the-container-background-as-lo.png

📄 auto-dismissing-snackbars-should-remain-on-screen-long-enough-to-read-.png

📄 avoid-adding-icons-to-snackbars-if-your-message-needs-an-icon-consider.png

📄 avoid-placing-snackbars-in-front-of-navigation-components.png

📄 avoid-significantly-altering-the-shape-of-a-snackbar-container.png

📄 avoid-using-stylized-text-or-inline-links-in-snackbars-they-can-add-un.png

📄 center-aligned-snackbar.png

📄 communicate-snackbar-information-near-the-action-that-triggered-the-sn.png

📄 containericon-optional-close-affordance-action-optional-supporting-tex.png

📄 containersupporting-textaction-optional-close-button-optional.png

📄 diagram-of-snackbar-placement.png

📄 dialogs-require-immediate-action.png

📄 don-t-let-the-snackbar-fully-cover-elements-in-focus.png

📄 don-t-place-a-snackbar-behind-a-fab.png

📄 don-t-place-a-snackbar-in-front-of-a-fab.png

📄 don-t-place-consecutive-snackbars-side-by-side-or-next-to-one-another.png

📄 don-t-place-snackbars-flush-to-one-edge-of-the-layout.png

📄 don-t-use-a-filled-or-elevated-button-in-a-snackbar-as-it-draws-too-mu.png

📄 if-an-action-is-long-it-can-be-displayed-on-a-third-line.png

📄 in-wide-layouts-extend-the-container-width-to-accommodate-longer-text-.png

📄 keep-the-snackbar-text-label-to-one-line-long-when-possible.png

📄 left-aligned-snackbar.png

📄 on-mobile-the-text-label-can-be-up-to-two-lines-long.png

📄 place-a-snackbar-in-front-of-the-main-content.png

📄 single-linesingle-line-with-actiontwo-linestwo-lines-with-actiontwo-li.png

📄 snackbar-above-a-fab.png

📄 snackbar-at-the-bottom-of-a-mobile-device.png

📄 snackbar-color-roles-used-for-light-and-dark-schemes-inverse-surfacein.png

📄 snackbar-containers-use-a-solid-background-color-with-a-shadow-to-stan.png

📄 snackbar-padding-and-size-measurements.png

📄 snackbar-should-visually-stand-out.png

📄 snackbar-showing-email-archived-text-with-an-undo-text-button.png

📄 snackbar-with-its-label-text-extending-to-the-second-line-and-maintain.png

📄 snackbars-are-announced-when-they-appear-but-don-t-trap-focus.png

📄 snackbars-can-span-the-entire-width-of-a-ui-however-they-should-not-ap.png

📄 snackbars-have-new-color-mappings.png

📄 text-labels-are-short-clear-updates-on-processes-that-have-been-perfor.png

📄 the-text-label-shouldn-t-share-the-same-color-as-the-text-button.png

📄 to-allow-users-to-amend-choices-display-an-undo-action.png

📄 to-distinguish-the-action-from-the-text-label-text-buttons-should-disp.png

📁 components_split-button/

📄 1-type-of-split-button.png

📄 a-unselected-b-selected-trailing-iconelevatedfilledtonaloutlined.png

📄 align-the-menu-with-the-trailing-button.png

📄 avoid-modifying-the-menu-in-unusual-ways.png

📄 avoid-using-very-long-labels-or-changing-the-trailing-icon.png

📄 color-configurations-elevated-filled-tonal-outlinedsize-configurations.png

📄 enableddisabledhoveredfocusedpressed-pressed-with-focus.png

📄 enableddisabledhoveredfocusedpressed-pressed-with-focusselected-select.png

📄 extra-small-4dpsmall-4dpmedium-4dplarge-8dpextra-large-12dp.png

📄 if-not-possible-align-the-menu-to-the-side-of-the-leading-or-trailing-.png

📄 label-iconlabelicon.png

📄 leading-buttoniconlabel-texttrailing-button-2.png

📄 leading-buttoniconlabel-texttrailing-button.png

📄 leading-buttons-should-have-the-same-labels-as-common-buttons.png

📄 left-to-rightright-to-left.png

📄 menu-icon-offset-when-unselected-xs-1dp-from-centers-1dp-from-centerm-.png

📄 open-a-menu-from-a-split-button.png

📄 split-buttons-come-in-many-sizes-and-colors.png

📄 split-buttons-have-the-same-five-recommended-sizes-as-label-and-icon-b.png

📄 split-buttons-mirror-the-order-of-elements-in-right-to-left-languages.png

📄 split-buttons-on-their-own-can-grab-attention.png

📄 split-buttons-work-harmoniously-with-regular-buttons.png

📄 target-areas-should-be-at-least-48x48dp-extra-smallsmall.png

📄 the-most-prominent-controls-can-be-larger-while-secondary-controls-in-.png

📄 top-aligned-to-trailing-buttonbottom-aligned-to-trailing-buttontop-rig.png

📄 trailing-buttons-should-communicate-the-state-of-the-menu-and-that-mor.png

📄 using-large-split-buttons-on-small-screens-can-add-extra-emphasis-for-.png

📁 components_switch/

📄 3-example-switches-with-and-without-icons-in-on-and-off-states.png

📄 a-switch-can-t-replace-a-button-people-expect-a-call-to-action-to-be-a.png

📄 a-switch-s-accessibility-label-can-incorporate-its-adjacent-ui-text.png

📄 avoid-using-a-switch-to-select-multiple-options-that-require-people-to.png

📄 avoid-using-more-ambiguous-or-non-binary-icons-such-as-a-moon-or-edit-.png

📄 avoid-using-switches-to-toggle-between-opposing-options.png

📄 checkboxes.png

📄 cursor-hover-click.png

📄 don-t-add-label-text-into-the-switch-the-font-size-would-be-too-small-.png

📄 enabled-hovered-focused-pressed-disabled.png

📄 focus-lands-on-the-switch-handle.png

📄 keep-labels-short-and-direct-a-label-should-describe-what-the-control-.png

📄 m2-switches-have-a-circular-handle-that-extends-beyond-the-edge-of-the.png

📄 m3-switches-have-a-taller-and-wider-track-new-color-mappings-and-the-a.png

📄 pressed-switches-with-icons.png

📄 pressed-switches-without-icons.png

📄 radio-buttons.png

📄 settings-screens-are-common-places-to-use-switches.png

📄 switch-color-roles-used-for-light-and-dark-themes-surface-container-hi.png

📄 switches-are-commonly-used-on-mobile-to-turn-settings-on-or-off.png

📄 switches-can-be-toggled-on-and-off.png

📄 switches-change-settings-and-other-options-immediately.png

📄 switches-with-icons.png

📄 switches-without-icons.png

📄 the-switch-is-toggled-using-space-or-enter.png

📄 the-text-label-uses-on-surface-supporting-text-may-use-on-surface-vari.png

📄 touch-tap-drag.png

📄 track-handle-formerly-thumb-icon.png

📄 trackhandleicon-optional.png

📄 use-a-connected-button-group-to-choose-between-opposing-options.png

📄 use-checkboxes-not-switches-to-let-people-select-one-or-more-options-f.png

📄 use-icons-that-clearly-communicate-whether-the-switch-is-on-or-off-suc.png

📄 use-radio-buttons-not-switches-when-only-one-item-can-be-selected-from.png

📄 while-the-visible-label-text-reads-photo-album-the-accessibility-label.png

📁 components_tabs/

📄 active-hover-focused-and-pressed-states.png

📄 badges-are-used-to-highlight-notifications-related-to-tab-specific-con.png

📄 containerbadge-optional-icon-optional-labeldivideractive-indicator.png

📄 containerbadge-optional-labeldivideractive-indicator.png

📄 containericon-optional-badge-optional-labeldivideractive-indicator.png

📄 don-t-truncate-labels-unless-required-as-truncated-text-can-impede-com.png

📄 don-t-use-tabs-to-move-through-sequential-content-that-needs-to-be-rea.png

📄 don-t-use-tabs-with-both-icons-and-text-labels-on-only-some-tabs-but-n.png

📄 enabled-active-destination-hover-active-destination-focused-active-des-2.png

📄 enabled-active-destination-hover-active-destination-focused-active-des.png

📄 offset-the-first-scrollable-tab-52dp-from-the-leading-edge-so-it-s-cle.png

📄 primary-tab-active-indicators-are-inset-2dp-on-each-side-have-a-fully-.png

📄 primary-tab-color-roles-used-for-light-and-dark-schemes-surfaceprimary.png

📄 primary-tabs-secondary-tabs.png

📄 primary-tabssecondary-tabs.png

📄 secondary-tab-color-roles-used-for-light-and-dark-schemes-surfaceon-su.png

📄 secondary-tabs-are-found-within-other-content-to-assist-users-with-gre.png

📄 tab-icons-and-labels-are-positioned-in-the-vertical-center-of-the-cont.png

📄 tab-labels-can-include-icons-and-text-text-labels-should-be-short.png

📄 tab-labels-should-be-short-and-succinct-there-should-be-a-clear-relati.png

📄 tabs-are-divided-into-equal-sections-with-labels-and-icons-positioned-.png

📄 tabs-can-be-joined-with-components-like-app-bars-embedded-in-a-specifi.png

📄 tabs-can-grow-in-width-in-relation-to-the-number-of-items-contained-wi.png

📄 tabs-can-use-a-combination-of-labels-and-icons.png

📄 the-container-is-the-area-that-contains-the-tabs-directly-under-the-ti.png

📄 use-icons-that-are-globally-recognized-when-using-icons-alone.png

📄 utilize-tabs-to-categorize-related-groups-of-content-into-clearly-defi.png

📄 while-the-icon-visually-represents-a-video-camera-the-accessibility-la.png

📁 components_text-fields/

📄 a-filled-read-only-text-field.png

📄 a-form-containing-fields-with-both-a-prefix-for-currency-and-a-suffix-.png

📄 a-form-with-dense-text-fields.png

📄 a-required-text-field-s-accessibility-label-should-include-any-support.png

📄 a-text-field-s-label-should-include-its-ui-text.png

📄 a-text-field-with-a-currency-symbol-text-prefix.png

📄 a-text-field-with-a-grading-scale-as-suffix.png

📄 a-text-field-with-an-email-domain-suffix.png

📄 an-outlined-read-only-text-field.png

📄 asterisk-with-required-supporting-text.png

📄 contact-form-using-outlined-text-fields.png

📄 containerleading-icon-optional-label-text-in-empty-fieldlabel-text-in--2.png

📄 containerleading-icon-optional-label-text-in-empty-fieldlabel-text-in-.png

📄 don-t-choose-colors-that-won-t-pass-material-s-minimum-contrast-of-3-1.png

📄 don-t-truncate-label-text-keep-it-short-clear-and-fully-visible.png

📄 don-t-use-fixed-text-field-margins-on-large-devices-text-fields-should.png

📄 empty-and-populated-filled-text-fields-with-supporting-texttrailing-ic.png

📄 empty-and-populated-outlined-text-fields-with-supporting-texttrailing-.png

📄 enabled-container-outlinelabel-text-in-empty-fieldleading-icon-optiona.png

📄 enabled-container-outlineleading-icon-optional-label-text-in-empty-fie.png

📄 enabled-empty-focused-empty-hovered-empty-disabled-empty-enabled-popul-2.png

📄 enabled-empty-focused-empty-hovered-empty-disabled-empty-enabled-popul.png

📄 enabled-empty-focused-empty-hovered-empty-enabled-populated-focused-po-2.png

📄 enabled-empty-focused-empty-hovered-empty-enabled-populated-focused-po.png

📄 filled-and-outlined-text-fields.png

📄 filled-text-field-color-roles-used-for-light-and-dark-schemes-surface-.png

📄 filled-text-field.png

📄 filled-text-fieldoutlined-text-field.png

📄 filled-text-fields.png

📄 for-compact-window-sizes-text-fields-can-span-the-full-width-of-the-di.png

📄 icon-signifiervalid-or-error-icon-clear-icon-voice-input-icondropdown-.png

📄 input-text-in-a-filled-text-field.png

📄 label-text-shouldn-t-take-up-multiple-lines.png

📄 login-screen-with-outlined-text-fields.png

📄 long-errors-can-wrap-to-multiple-lines-if-there-isn-t-enough-space-to-.png

📄 make-sure-the-container-outline-has-a-minimum-contrast-of-3-1-to-the-b.png

📄 mobile-form-using-filled-text-fields.png

📄 outlined-text-field-color-roles-used-for-light-and-dark-schemes-outlin.png

📄 outlined-text-field.png

📄 outlined-text-fields.png

📄 padding-and-size-measurements-with-icons-2.png

📄 padding-and-size-measurements-with-icons.png

📄 padding-and-size-measurements-with-supporting-text-and-character-count-2.png

📄 padding-and-size-measurements-with-supporting-text-and-character-count.png

📄 padding-and-size-measurements-without-icons-2.png

📄 padding-and-size-measurements-without-icons.png

📄 supporting-textcharacter-counter.png

📄 text-field-containers.png

📄 text-field-error-messages-should-be-given-an-alert-role-in-accessibili.png

📄 text-field-supporting-text-should-have-its-own-accessibility-label.png

📄 text-fields-have-new-color-mappings.png

📄 text-fields-with-adjacent-labels.png

📄 the-error-icon-is-an-important-second-visual-indicator-that-a-text-fie.png

📄 the-remaining-character-counter-should-be-called-character-count-withi.png

📄 the-same-mobile-form-using-outlined-text-fields.png

📄 when-a-trailing-icon-in-the-field-acts-as-a-button-the-label-should-cl.png

📄 when-using-both-variants-of-text-fields-don-t-use-both-next-to-each-ot.png

📄 when-using-both-variants-of-text-fields-in-a-ui-separate-them-by-regio.png

📁 components_time-pickers/

📄 12h-input-24h-input.png

📄 24-hour-dial-view.png

📄 24h-dial-in-vertical-layout-default-on-mobile-24h-dial-in-horizontal-l.png

📄 a-screen-reader-reads-the-text-label-of-a-dial-selector.png

📄 dial-selector-for-a-12-hour-clock.png

📄 dial-selector-targets-should-be-48x48dp.png

📄 dial-selector-time-picker-for-a-12-hour-clock.png

📄 don-t-apply-density-to-the-time-picker-dial-when-the-viewport-is-const.png

📄 enabledhover-focus-pressed.png

📄 for-time-selection-that-doesn-t-require-a-dial-view-make-a-time-input-.png

📄 headlinetime-input-field-seperatorcontainerperiod-selector-containerpe.png

📄 headlinetime-selector-separatorcontainerperiod-selector-containerperio.png

📄 high-density-time-picker-displayed-on-mobile.png

📄 horizontal-time-picker-dial-padding-and-size-measurements.png

📄 hour-input-with-keyboard-entry.png

📄 hour-selection-in-a-mobile-calendar-picker.png

📄 input-selector-for-a-12-hour-clock.png

📄 label-headline-time-selector-separatorinput-fieldinput-text-period-sel-2.png

📄 label-headline-time-selector-separatorinput-fieldinput-text-period-sel.png

📄 m2-time-pickers-had-different-color-mappings.png

📄 m3-time-pickers-have-new-color-mappings-compatible-with-dynamic-color.png

📄 on-mobile-the-time-picker-can-adapt-to-landscape-orientation.png

📄 the-container-includes-all-time-picker-elements.png

📄 the-hour-and-minute-fields-have-the-text-input-role.png

📄 the-keyboard-icon-allows-people-to-switch-between-the-dial-selector-pi.png

📄 the-time-picker-should-change-to-fit-the-size-of-the-screen-so-the-tim.png

📄 time-picker-dial-color-roles-used-for-light-and-dark-themes-on-surface.jpg

📄 time-picker-dialtime-picker-input.png

📄 time-picker-input-color-roles-used-for-light-and-dark-themes-on-surfac.jpg

📄 time-picker-input-padding-and-size-measurements.png

📄 time-pickers-shouldn-t-scroll.png

📄 vertical-layout-default-on-mobile-horizontal-layout.png

📄 vertical-time-picker-dial-padding-and-size-measurements.png

📁 components_toolbars/

📄 a-toolbar-is-essentially-a-container-with-configurable-slots.png

📄 a-toolbar-provides-actions-related-to-the-current-page.png

📄 align-controls-to-the-edge-of-the-screen-to-make-them-easier-to-reach-.png

📄 alignment-and-padding-can-be-configured-to-create-unique-layouts-left-.png

📄 always-align-the-toolbar-orbiter-within-the-horizontal-bounds-of-nearb.png

📄 always-align-the-toolbar-orbiter-within-the-vertical-bounds-of-nearby-.png

📄 at-larger-screen-sizes-the-container-can-display-more-controls-before-.png

📄 avoid-mixing-too-many-different-controls-in-the-same-toolbar-a-consist.png

📄 avoid-modifying-the-container-shape.png

📄 avoid-using-multiple-toolbars-in-smaller-windows.png

📄 bottom-app-bar-color-role-used-for-light-and-dark-themes-surface-conta.png

📄 bottom-app-bar-not-recommended.png

📄 bottom-app-bar-padding-and-size-measurements.png

📄 choose-the-most-essential-actions-to-show-on-screen-by-default.png

📄 configurations-of-floating-toolbars.png

📄 container.png

📄 containerelements.png

📄 containerplaced-components-2.png

📄 containerplaced-components.png

📄 default-margins-and-paddingmargins-and-padding-with-leading-middle-and.png

📄 default-padding-of-floating-toolbar.png

📄 depending-on-the-configuration-horizontal-or-vertical-of-the-toolbar-o.png

📄 docked-toolbar-items-should-be-evenly-spaced-in-compact-windows.png

📄 docked-toolbar-shows-global-controls.png

📄 docked-toolbarfloating-toolbar.png

📄 docked-toolbars-are-always-at-the-bottom-of-the-window.png

📄 don-t-add-extra-space-to-a-toolbar-beyond-its-necessary-items.png

📄 don-t-emphasize-multiple-buttons-with-bold-primary-colors-such-as-a-bu.png

📄 don-t-overwhelm-people-with-too-many-controls.png

📄 don-t-place-a-vertical-toolbar-orbiter-between-spatial-panels.png

📄 don-t-show-a-navigation-bar-and-a-toolbar-with-navigation-controls-at-.png

📄 don-t-use-square-filled-icon-buttons-in-floating-toolbars.png

📄 floating-toolbar-margins.png

📄 floating-toolbar-show-controls-relevant-to-the-current-page.png

📄 floating-toolbar-size-and-padding-measurements.png

📄 floating-toolbars-can-be-paired-with-fabs.png

📄 floating-toolbars-shouldn-t-exceed-the-edge-of-the-window-or-pane.png

📄 floating-vibrant-color-scheme-and-paired-with-fabdocked-with-embedded-.png

📄 horizontal-floating-toolbars-should-be-at-least-16dp-from-the-edge-of-.png

📄 horizontal-floating-toolbarvertical-floating-toolbar.png

📄 icon-buttons-and-fabicon-buttons-and-no-fab.png

📄 in-ltr-languages-the-next-button-is-intentionally-placed-on-the-traili.png

📄 in-medium-window-sizes-and-larger-create-a-spacious-layout-by-centerin.png

📄 in-rtl-languages-reverse-the-order-so-next-remains-on-the-trailing-edg.png

📄 keep-navigation-distinct-and-use-a-toolbar-to-display-local-navigation.png

📄 m2-bottom-app-bar-had-higher-elevation-of-8dp-and-didn-t-contain-the-f.png

📄 m3-bottom-app-bar-has-new-colors-a-taller-container-no-elevation-or-sh.png

📄 maintain-at-least-a-24dp-margin-for-vertical-toolbars.png

📄 measurements-for-toolbar-orbiters.png

📄 multiple-toolbars-with-different-stylistic-treatments-can-create-hiera.png

📄 navigation-bar-on-a-primary-pagetoolbar-on-a-secondary-page-with-conte.png

📄 on-web-and-other-large-screens-docked-toolbars-can-be-rounded-and-plac.png

📄 on-web-use-the-toolbar-role.png

📄 padding-for-toolbar-orbiters.png

📄 standard-and-vibrant-toolbarsvertical-floating-toolbarfloating-toolbar.png

📄 standard-color-schemes-and-icon-button-types-surface-containerfilled-b.png

📄 surface-containersurface-container-highsurface-container-highesttertia.png

📄 the-elevation-on-floating-toolbars-can-be-removed-if-on-a-visually-dis.png

📄 the-recommended-toolbar-orbiter-position-from-the-spatial-panel-is-off.png

📄 the-toolbar-orbiter-shouldn-t-exceed-the-height-of-adjacent-spatial-pa.png

📄 the-toolbar-orbiter-shouldn-t-exceed-the-width-of-adjacent-spatial-pan.png

📄 to-prevent-content-obstruction-don-t-overlap-the-toolbar-orbiter-and-s.png

📄 toolbar-actions-can-open-a-menu.png

📄 toolbars-are-made-of-slots-that-can-contain-many-kinds-of-actions.png

📄 toolbars-can-be-used-for-a-wide-variety-of-use-cases.png

📄 two-different-ways-to-create-a-high-emphasis-action-in-toolbars.png

📄 use-space-or-enter-to-activate-actions.png

📄 use-straight-corners-for-docked-toolbars.png

📄 use-tab-to-navigate-through-interactive-elements.png

📄 use-the-standard-color-scheme-to-draw-focus-to-content-outside-the-too.png

📄 use-the-vibrant-color-scheme-to-emphasize-controls-or-actions.png

📄 using-wide-buttons-with-vertical-toolbars-can-unnecessarily-widen-tool.png

📄 vertical-toolbars-can-cover-important-content-in-compact-windows.png

📄 vibrant-color-scheme-and-icon-button-types-primary-containerfilled-but.png

📄 when-a-nav-rail-is-visible-the-floating-toolbar-should-be-vertical-on-.png

📁 components_tooltips/

📄 avoid-stacking-buttons.png

📄 avoid-wrapping-text-to-multiple-lines-or-including-many-pieces-of-info.png

📄 avoid-wrapping-to-more-than-one-line.png

📄 briefly-describe-a-ui-element.png

📄 containersupporting-text.png

📄 don-t-hide-critical-information-within-tooltips-as-it-s-easy-to-miss-u.png

📄 don-t-use-a-persistent-rich-tooltip-on-icon-buttons.png

📄 four-different-rich-tooltip-locations-based-on-dynamic-positioning.png

📄 m2-rich-tooltips-have-slightly-rounded-corners.png

📄 m3-rich-tooltips-have-more-rounded-corners-and-support-dynamic-color.png

📄 only-display-one-tooltip-at-a-time.png

📄 parent-elementinline-linktext-button.png

📄 plain-and-rich-tooltips-serve-different-purposes.png

📄 plain-tooltip-color-roles-used-for-light-and-dark-themes-inverse-on-su.png

📄 plain-tooltip-padding-and-size-measurements.png

📄 plain-tooltip-with-a-4dp-distance-between-the-target-and-tooltip.png

📄 plain-tooltiprich-tooltip-2.png

📄 plain-tooltiprich-tooltip.png

📄 plain-tooltips-aren-t-needed-when-the-ui-element-already-has-label-tex.png

📄 rich-tooltip-color-roles-used-for-light-and-dark-themes-on-surface-var.png

📄 rich-tooltip-padding-and-size-measurements.png

📄 rich-tooltips-can-appear-when-an-element-is-selected.png

📄 subhead-optional-containersupporting-texttext-button-optional.png

📄 subhead-supporting-text-and-two-buttonssubhead-supporting-text-and-one.png

📄 subheadcontainersupporting-texttext-button.png

📄 summarize-the-message-in-a-few-words.png

📄 supporting-textcontainer.png

📄 the-tooltip-container-should-have-the-tooltip-role.png

📄 tooltips-can-appear-on-hover-or-focus-to-explain-actions.png

📄 use-plain-tooltips-to-label-icon-only-buttons.png

📄 use-rich-tooltips-to-provide-extra-information-and-actions-about-a-ui-.png

📁 develop/

📄 developer-documentation-to-build-with-material-for-android-views.png

📄 developer-documentation-to-build-with-material-in-any-web-framework.png

📄 flutter-offers-the-best-material-support-for-multi-platform-app-develo.png

📄 jetpack-compose-is-the-modern-toolkit-for-building-material-ui-on-andr.png

📄 jetpack-compose-is-the-recommended-toolkit-for-building-material-ui-on.png

📁 develop_android_jetpack-compose/

📄 check-out-the-reply-sample-app-for-compose.png

📄 compose-is-the-primary-ui-toolkit-to-build-adaptive-high-performance-a.png

📄 documentation-for-all-material-3-components-available-for-jetpack-comp.png

📄 guides-on-implementing-material-design-3-migrating-from-material-2-to-.png

📄 jetpack-compose-makes-it-easy-to-give-your-app-a-consistent-look-and-f.png

📄 learn-how-to-design-beautiful-and-modern-android-apps-with-updated-and.png

📄 learn-how-to-get-the-most-from-navigation-components-like-nav-rail-dra.png

📄 learn-how-to-use-jetpack-compose-to-build-native-android-ui.png

📄 material-android-is-all-in-on-compose-read-about-upcoming-material-com.png

📄 material-components-and-layouts-are-available-as-composable-functions.png

📄 material-s-latest-evolution-helps-you-make-products-even-more-engaging-2.png

📄 material-s-latest-evolution-helps-you-make-products-even-more-engaging.png

📄 supercharge-your-android-transitions-and-animations-with-the-new-m3-ex-2.png

📄 supercharge-your-android-transitions-and-animations-with-the-new-m3-ex.png

📄 use-jetpack-compose-to-build-a-simple-ui-with-declarative-functions.png

📁 develop_android_mdc-android/

📄 codelab-and-video-tutorial-get-step-by-step-instructions-for-material-.png

📄 codelab-with-step-by-step-instructions-for-adding-dynamic-color-featur.png

📄 documentation-for-all-material-components-available-in-the-android-vie.png

📄 learn-how-the-shift-to-compose-affects-android-views-mdc-android-libra.png

📄 learn-how-to-apply-dynamic-color-in-this-short-talk-from-two-material-.png

📄 material-s-latest-evolution-helps-you-make-products-even-more-engaging.png

📄 material-views-1-14-mdc-android-is-the-final-stable-release-for-the-vi.png

📄 new-color-options-and-carousel-refinements.png

📄 youtube-playlist-with-step-by-step-instructions-for-using-material-com.png

📁 develop_flutter/

📄 google-s-ui-toolkit-for-building-beautiful-natively-compiled-applicati.png

📄 learn-how-to-build-the-basil-material-study-in-flutter-with-advanced-t.png

📄 see-how-to-build-an-adaptive-responsible-application-using-material-3-.png

📄 set-themedata-usematerial3-to-true-for-updated-components-and-to-apply.png

📄 start-with-an-empty-flutter-app-and-build-out-a-fully-styled-and-anima.png

📄 step-by-step-codelab-on-how-to-apply-material-3-in-your-flutter-app.png

📄 the-flutter-team-is-currently-working-on-material-design-3-support-for.png

📄 umbrella-tracking-issue-for-all-past-and-future-engineering-work-on-fl.png

📄 what-to-prioritize-when-building-a-responsive-ui-experience.png

📄 wonderous-pushes-visual-fidelity-effects-and-transitions-to-showcase-f.png

📁 develop_web/

📄 build-using-material-3-in-angular-note-implementation-may-differ-from-.png

📄 build-using-material-s-made-in-house-library-documentation-for-all-mat.png

📄 install-material-web-components-and-start-building.png

📄 material-web-is-currently-in-maintenance-mode-the-roadmap-lists-what-u.png

📄 start-using-lightweight-and-accessible-material-components-in-any-web-.png

📄 use-theming-to-apply-color-typography-and-other-styles-to-your-materia.png

📁 foundations/

📄 accessible-design-enables-users-with-diverse-abilities-to-navigate-und.png

📄 building-for-everyone-with-everyone.png

📄 get-to-know-the-key-terms-and-concepts-behind-material-from-a-to-z.png

📄 layout-is-the-visual-arrangement-of-elements-on-the-screen.png

📄 m3-makes-brand-expression-in-an-interface-simpler-and-more-beautiful-t.png

📄 states-are-visual-indicators-used-to-communicate-the-status-of-a-compo.png

📄 tokens-store-style-values-like-colors-and-fonts-so-the-same-values-can.png

📄 ux-writing-and-information-design-make-uis-easy-to-use.png

📁 foundations_building-for-all/

📄 image-2.png

📄 image-3.png

📄 image-4.png

📄 image-5.png

📄 image.png

📁 foundations_content-design_alt-text/

📄 alt-text-should-always-relate-to-the-context-alt-text-brown-oak-dining.png

📄 avoid-copying-data-pointsalt-text-interest-in-manchester-city-12am-40-.png

📄 avoid-detailed-descriptions-that-don-t-contribute-to-the-image-s-meani.png

📄 avoid-leaving-the-automatically-generated-file-number-as-alt-text-alt-.png

📄 avoid-writing-image-of-the-screen-reader-will-announce-it-s-an-image-a.png

📄 be-careful-when-using-alt-text-that-describes-the-type-of-image-alt-te.png

📄 capture-the-meaning-of-the-chart-along-with-key-data-pointsalt-text-su.png

📄 capture-the-meaning-of-the-image-in-a-few-words-alt-text-flying-pigeon.png

📄 change-alt-text-for-an-image-depending-on-where-it-s-used-alt-text-boo.png

📄 describe-the-image-rather-than-the-format-alt-text-a-wooden-box-of-art.png

📄 don-t-ignore-the-caption-information-in-alt-text-should-correspond-to-.png

📄 don-t-repeat-the-caption-as-the-alt-text-alt-text-pigeons-have-a-disti.png

📄 don-t-summarize-a-chart-used-for-analysisalt-text-high-average-and-low.png

📄 don-t-write-about-every-aspect-of-the-motion-alt-text-a-hand-shaped-cu.png

📄 don-t-write-alt-text-with-details-that-aren-t-relevant-to-the-context-.png

📄 don-t-write-more-than-140-characters-of-alt-text-alt-text-an-aqua-colo.png

📄 focus-on-the-important-part-of-the-image-alt-text-a-scandinavian-style.png

📄 focus-on-the-meaning-of-the-image-alt-text-a-black-and-white-photo-of-.png

📄 images-that-don-t-add-information-don-t-need-alt-text-alt-text.png

📄 in-charts-used-for-analysis-mention-the-general-structure-and-highligh.png

📄 in-charts-with-an-editorial-focus-highlight-the-main-takeaway-and-metr.png

📄 make-alt-text-consistent-with-the-caption-alt-text-a-well-composed-pho.png

📄 summarize-the-main-purpose-of-the-data-here-the-chart-involves-interes.png

📄 use-alt-text-to-reinforce-ideas-in-the-caption-alt-text-a-photographer.png

📄 use-interactive-charts-for-complicated-visualizations.png

📄 write-alt-text-for-images-to-provide-context-to-screen-reader-users-al.png

📄 write-alt-text-that-summarizes-the-motion-asset-alt-text-a-tooltip-lab.png

📄 write-brief-alt-text-alt-text-a-small-happy-dog-hanging-out-the-passen.png

📁 foundations_content-design_global-writing/

📄 3-apps-in-different-languages.png

📄 avoid-abbreviations-if-they-re-used-provide-their-meaning-in-message-d.png

📄 avoid-using-pronouns-when-it-s-unclear-what-nouns-they-re-referring-to.png

📄 avoid-using-this-and-that.png

📄 clarify-words-that-have-multiple-meanings-home-could-reference-a-homep.png

📄 clear-everyday-language-can-be-used-in-an-expressive-and-whimsical-way.png

📄 confusing-language-makes-it-difficult-for-people-to-understand-the-act.png

📄 don-t-call-out-a-specific-country-or-culture-s-holiday.png

📄 help-translators-understand-the-context-by-adding-message-descriptions.png

📄 idiomatic-phrases-can-be-difficult-for-everyone-to-understand-and-for-.png

📄 make-sure-it-s-clear-who-text-is-referring-to.png

📄 many-languages-like-german-are-longer-than-english.png

📄 plain-language-is-easier-for-everyone-to-understand.png

📄 use-clear-names-to-refer-to-things.png

📄 use-generalized-global-examples-most-countries-and-cultures-have-holid.png

📄 using-nouns-instead-of-or-in-addition-to-pronouns-can-help-clarify-fut.png

📁 foundations_content-design_notifications/

📄 be-specific-to-capture-user-attention.png

📄 clearly-guide-the-user-to-their-next-action.png

📄 don-t-add-negative-emotions-to-a-message-don-t-replace-words-with-emoj.png

📄 don-t-be-so-generic-as-to-lose-value.png

📄 don-t-bury-next-steps.png

📄 don-t-place-dynamic-text-in-a-long-notification-title.png

📄 don-t-prompt-the-user-with-a-notification-or-email-that-might-interrup.png

📄 don-t-use-full-emails-or-website-links-for-text-length.png

📄 don-t-use-relative-terms-like-today-or-tomorrow.png

📄 don-t-waste-characters-on-app-names-niceties-or-unimportant-informatio.png

📄 don-t-waste-space-repeating-information-that-is-already-included-by-th.png

📄 image.png

📄 jokes-aren-t-appropriate-for-notifications.png

📄 keep-notifications-short-and-information-dense.png

📄 make-it-easy-for-users-to-start-or-stop-receiving-notifications.png

📄 place-dynamic-text-in-the-notification-body-where-there-is-more-space-.png

📄 prioritize-straightforward-and-useful-messages.png

📄 prioritize-the-most-important-information.png

📄 sms-messages-should-be-brief-and-important.png

📄 specify-the-day-of-the-week-so-that-it-makes-sense-if-someone-reads-it.png

📄 use-emoji-only-to-enhance-a-message.png

📄 use-the-available-space-for-useful-information.png

📁 foundations_content-design_overview/

📄 ui-content-templates-for-various-components.png

📁 foundations_content-design_style-guide/

📄 abbreviate-million-with-m-and-don-t-use-commas-when-giving-people-a-se.png

📄 ampersands-can-be-used-in-headlines-where-there-s-limited-space.png

📄 avoid-ampersands-in-email-subject-lines.png

📄 avoid-spelling-out-words-that-can-be-contractions.png

📄 avoid-using-abbreviations-when-there-s-space-to-spell-out-a-word.png

📄 avoid-using-exclamation-marks-for-empty-states-and-common-tasks-save-i.png

📄 avoid-using-first-person-pronouns-write-from-the-user-s-point-of-view-.png

📄 avoid-using-periods-to-end-single-sentences.png

📄 avoid-writing-that-sounds-impersonal-and-robotic.png

📄 capitalize-the-first-word-of-a-sentence-or-phrase.png

📄 don-t-italicize-a-sentence.png

📄 don-t-misrepresent-consequences-or-try-to-influence-a-user-s-decision.png

📄 don-t-mix-different-forms-of-address-in-the-same-screen-instead-use-yo.png

📄 don-t-skip-serial-commas-before-and.png

📄 don-t-use-caps-block-use-sentence-case-for-all-product-text.png

📄 don-t-use-ellipses-in-buttons-or-menu-items.png

📄 don-t-use-first-person-pronouns-to-speak-for-the-voice-of-google.png

📄 don-t-use-parentheses-to-add-extra-thoughts-if-information-is-needed-i.png

📄 don-t-use-title-case-capitalization-instead-use-sentence-case.png

📄 ellipses-show-an-action-in-progress.png

📄 exclamation-marks-can-be-used-to-emphasize-celebratory-moments.png

📄 first-person-pronouns-can-help-users-understand-when-they-re-making-im.png

📄 italicize-a-word-or-phrase.png

📄 omit-punctuation-on-single-line-sentences.png

📄 phrases-that-aren-t-contracted-can-feel-stiff-or-overly-formal.png

📄 tell-users-what-will-happen-if-they-take-an-action-and-how-they-can-un.png

📄 use-a-serial-comma-in-lists-of-three-or-more-items.png

📄 use-an-en-dash-without-spaces-for-ranges.png

📄 use-caution-with-we-or-our-even-when-these-pronouns-represent-real-peo.png

📄 use-colons-for-lists-within-body-text.png

📄 use-commas-in-numbers-between-1-000-and-1-million.png

📄 use-headings-and-subheads-to-prioritize-and-group-information.png

📄 use-parentheses-to-define-terms-and-jargon.png

📄 when-an-abbreviation-is-appropriate-make-sure-it-s-formatted-and-spell.png

📄 write-from-a-user-s-point-of-view-by-emphasizing-their-perspective-wit.png

📄 write-from-the-user-s-point-of-view-to-help-them-take-action.png

📁 foundations_customization/

📄 a-user-generated-color-scheme-can-flow-through-apps-that-use-a-custom-.png

📄 apps-can-take-on-an-array-of-colors-from-baseline-schemes-user-generat.gif

📄 examples-of-4-identical-mobile-ui-screens-using-4-different-color-sets.png

📄 examples-of-brand-attributes-left-that-can-be-used-to-generate-and-app.png

📄 examples-of-color-roles-in-the-plant-care-ui-mapped-to-design-tokens.png

📄 the-material-theme-builder-figma-plugin-helps-you-create-custom-color-.png

📁 foundations_design-tokens/

📄 a-button-that-receives-its-container-color-through-a-system-of-three-t.png

📄 as-design-systems-evolve-certain-values-will-change-with-design-tokens.gif

📄 color-and-typography-reference-tokens-and-their-values.png

📄 communicates-design-systemcommunicates-token-classcommunicates-token-s.png

📄 component-tokens-system-tokens-reference-tokens-and-their-values.png

📄 design-tokens-provide-a-central-repository-for-design-choices-with-a-v.png

📄 diagram-and-token-table-for-filled-button-label-color.png

📄 example-of-a-reference-token-and-its-color-value.png

📄 example-of-a-token-module.png

📄 example-of-tokens-assigned-to-the-secondary-and-on-secondary-color-rol.png

📄 system-tokens-reference-tokens-and-their-values.png

📄 the-diagram-and-token-module-for-elevated-button.png

📄 the-same-system-token-for-background-color-can-point-to-different-refe.png

📄 using-design-tokens-instead-of-hardcoded-values-can-streamline-the-wor.png

📁 foundations_designing/

📄 1-switch-in-the-on-state-with-visible-focus-2-switch-in-the-off-state-.png

📄 an-example-of-how-content-hierarchy-in-a-screen-can-be-identified-in-a.png

📄 be-wary-of-using-non-standard-elements-such-as-a-non-standard-platform.png

📄 define-initial-focus-and-component-level-focus.png

📄 don-t-include-the-control-type-in-the-label-screen-readers-automatical.png

📄 don-t-include-the-element-type-button-menu-etc-in-your-label-this-will.png

📄 each-button-s-container-color-has-contrast-of-at-least-3-1-against-the.png

📄 each-button-s-container-color-has-less-than-material-s-required-minimu.png

📄 example-of-a-page-diagram-mapping-the-areas-for-a-ui-in-order-to-consi.png

📄 example-of-headings-marked-up-in-code.png

📄 example-the-accessibility-labels-for-these-icons-describe-their-purpos.png

📄 icons-24dpstar-icon-40dptouch-target-on-both-48dp.png

📄 in-the-case-of-the-google-homepage-even-though-there-are-links-and-but.png

📄 in-the-case-of-unique-layouts-and-use-cases-it-can-help-to-group-a-col.png

📄 mark-decorative-visual-elements-to-hide.png

📄 navigating-the-interactive-elements-on-a-card-via-tab.png

📄 recommended-target-size-for-pointers-44dp.png

📄 standalone-components-such-as-fabs-don-t-need-to-meet-material-s-minim.png

📄 target-guidelines-on-buttons-for-easy-accessibility.png

📄 the-container-color-exceeds-material-s-required-minimum-contrast-of-3-.png

📄 the-contrast-of-the-button-container-color-against-the-background-colo.png

📄 the-label-voice-search-describes-the-user-task-search-paired-with-the-.png

📄 this-layout-has-two-areas-assigned-the-navigation-role-each-landmark-s.png

📄 two-colors-applied-to-button-container-and-ui-surface-with-contrast-th.png

📄 two-groups-of-icons-showing-their-overall-spacing-and-the-spacing-betw.png

📄 use-native-elements-such-as-the-standard-platform-dialog.png

📁 foundations_interaction_gestures/

📄 a-calendar-event-can-be-picked-up-and-moved-to-a-new-time.png

📄 a-map-ui-can-be-navigated-through-a-combination-of-pan-and-pinch.png

📄 a-photo-can-be-pinched-outward-to-a-full-screen-view.png

📄 vertical-scrolling-reveals-more-content.png

📁 foundations_interaction_inputs/

📄 a-pointer-provides-a-visible-indicator-for-input-controls.png

📄 a-visible-mouse-cursor-is-seen-when-the-external-input-is-connected.png

📄 an-i-beam-cursor-indicates-selectable-text.png

📄 components-without-a-hover-statecomponents-with-a-hover-state-change-a.png

📄 designing-for-inputs-allows-people-to-use-the-inputs-they-prefer-like-.png

📄 image-of-a-keyboard.png

📄 image-of-a-laptop-keyboard-and-trackpad.png

📄 image-of-a-mouse.png

📄 resize-arrows-indicate-an-element-can-be-resized.png

📄 selected-text-shows-a-visible-highlight.png

📄 tab-focus-includes-a-visible-keyboard-focus-indicator.png

📄 the-circle-cursor-indicates-the-selected-stylus-tool-and-size.png

📄 the-context-menu-should-appear-when-right-clicking-with-a-mouse-or-tra.png

📄 the-focus-state-moves-elements-as-the-user-presses-tab-on-their-keyboa.png

📄 the-hand-cursor-is-used-for-links-and-clickable-images.png

📄 when-a-physical-keyboard-is-attached-hide-the-virtual-keyboard.png

📄 when-a-physical-keyboard-is-removed-show-the-virtual-keyboard.png

📄 when-using-a-mouse-trackpad-or-stylus-to-select-text-use-the-right-cli.png

📄 when-using-a-touchscreen-to-select-text-show-touch-controls.png

📁 foundations_interaction_selection/

📄 checkboxes-are-visible-by-default-in-this-table-because-selection-is-a.png

📄 if-the-long-press-and-drag-combination-is-already-in-use-to-pick-up-an.png

📄 items-in-a-list-selected-via-touch.png

📄 long-press-and-drag-can-be-used-together-to-select-items-in-batches.png

📄 selected-components-segmented-buttonschipslist-items-checkboxesradio-b.png

📄 selected-components-with-active-indicators-tabnavigation-drawer.png

📁 foundations_interaction_states/

📄 a-selected-filter-chip-in-both-selected-and-focused-states.png

📄 components-like-an-app-bar-that-require-consistent-placement-should-no.png

📄 containerstate-layercontent.png

📄 disabled-button-2.png

📄 disabled-button.png

📄 disabled-redo-icon-buttondisabled-checklist-icon-button.png

📄 disabled-states-for-checkboxicon-buttonradio-buttonsegmented-button.png

📄 dragged-chip.png

📄 dragged-list-item.png

📄 dragged-states-for-chipcard.png

📄 enabled-button.png

📄 enabled-states-for-buttonfabswitchtext-field.png

📄 focused-button-2.png

📄 focused-button.png

📄 focused-states-for-fabicon-buttonchipsegmented-buttons.png

📄 four-overlay-states-and-their-values-hover-8-opacity-focus-10-opacity-.png

📄 hovered-button-2.png

📄 hovered-button.png

📄 hovered-states-for-fabicon-buttonchipsegmented-buttons.png

📄 if-the-action-represented-in-the-fab-is-unavailable-the-fab-shouldn-t-.png

📄 keyboard-focus-indicator-for-a-filled-button.png

📄 order-of-surface-layers-shows-the-state-layer-2-between-the-container-.png

📄 pressed-button-2.png

📄 pressed-button-with-elevation.png

📄 pressed-button.png

📄 pressed-states-for-fabicon-buttonchipsegmented-button.png

📄 state-layerinteractive-target.png

📄 the-individual-components-that-are-actionable-within-the-app-bar-inher-2.png

📄 the-individual-components-that-are-actionable-within-the-app-bar-inher-3.png

📄 the-individual-components-that-are-actionable-within-the-app-bar-inher.png

📁 foundations_layout_bidirectionality-rtl/

📄 12-hour-clocks-in-rtl-move-clockwise-but-mirror-ui-elements-such-as-am.png

📄 24-hour-clocks-in-rtl-move-clockwise-but-mirror-elements-such-as-butto.png

📄 a-mirrored-layout-in-an-rtl-language-reverses-the-alignment-and-orderi.png

📄 back-and-foward-icons-are-mirrored-in-rtl.png

📄 based-on-the-language-a-navigation-rail-is-set-on-a-screen-s-leading-e.png

📄 don-t-apply-ltr-directionality-to-rtl-content-because-it-may-scramble-.png

📄 don-t-reverse-the-order-of-the-email-username-and-domain-google-com-th.png

📄 feed-layout-mirrored-for-rtl-where-the-order-of-text-grid-and-other-el.png

📄 filter-chips-shown-in-an-rtl-layout-note-this-example-is-not-translate.png

📄 icons-symbols-and-label-text-for-rtl-icon-signifier-valid-or-error-ico.png

📄 in-urdu-controls-and-progress-for-media-and-a-podcast-title-are-shown-.png

📄 large-badge-appears-on-the-top-left-of-the-icon.png

📄 list-detail-mirrored-for-rtl-where-text-and-other-elements-are-aligned.png

📄 mirrored-floating-toolbar-where-the-fab-appears-on-the-left.png

📄 rtl-center-aligned-small-app-bars-rtl-medium-flexible-app-bar-rtl-larg.png

📄 rtl-expanded-navigation-rails-open-from-the-leading-edge-and-should-in.png

📄 rtl-linear-progress-indicator-starts-to-fill-progress-from-the-right-c.png

📄 send-buttons-are-mirrored-in-rtl-help-icons-are-mirrored-in-some-rtl-l.png

📄 small-badge-appears-on-the-top-left-of-the-icon.png

📄 supporting-pane-to-the-left-of-the-primary-content-text-and-other-elem.png

📄 swiping-reveals-additional-action-in-rtl-list-layout.png

📁 foundations_layout_breakpoints/

📄 a-collapsed-navigation-rail-in-medium-or-expanded-layouts-can-become-a.png

📄 a-compact-breakpoint-focuses-on-a-single-view.png

📄 a-product-s-layout-should-adjust-to-fit-each-breakpoint-for-example-a-.png

📄 a-product-s-navigation-rail-can-be-revealed-in-an-expanded-layout.png

📄 a-settings-view-with-low-density-content-and-quick-actions-is-a-good-u.png

📄 a-single-pane-layout-is-recommended-for-medium-breakpoints.png

📄 a-small-card-in-a-compact-layout-can-be-resized-larger-in-a-medium-or-.png

📄 a-two-pane-layout-is-recommended-for-large-and-extra-large-breakpoints.png

📄 an-expanded-layout-for-a-messaging-app-reveals-a-second-pane-with-the-.png

📄 at-an-expanded-breakpoint-reserve-single-pane-layouts-for-information-.png

📄 button-icons-and-label-text-can-remain-anchored-to-each-other-no-matte.png

📄 collapsed-navigation-areasingle-pane-layout.png

📄 compact-and-medium-breakpoints-should-use-a-single-pane-while-larger-b.png

📄 compact-layouts-should-dynamically-transition-to-larger-layouts-when-a.png

📄 compactmediumexpanded.png

📄 consider-how-a-large-layout-should-change-at-smaller-breakpoints.png

📄 consider-using-an-immersive-single-pane-layout-for-video-calls.png

📄 don-t-arbitrarily-swap-components-that-aren-t-functionally-equivalent-.png

📄 expanded-navigation-areasingle-pane-layout.png

📄 fixed-panes-should-be-412dp-in-large-and-extra-large-layouts.png

📄 in-compact-layouts-use-16dp-margins.png

📄 in-split-pane-layouts-navigation-components-shrink-the-leading-pane-so.png

📄 largeextra-large.png

📄 limit-interactions-in-the-upper-quarter-of-a-screen-as-they-can-be-har.png

📄 medium-breakpoint-ergonomic-regions-inconvenientcomfortablechallenging.png

📄 navigation-areasingle-pane-2.png

📄 navigation-areasingle-pane.png

📄 only-use-a-single-pane-layout-for-dense-content-or-media.png

📄 place-navigation-elements-near-the-bottom-of-a-compact-window-so-they-.png

📄 products-should-automatically-adapt-to-any-breakpoint.png

📄 rotating-a-device-often-changes-the-breakpoint-a-layout-can-have-two-p.png

📄 single-pane-layouts-can-focus-attention-on-one-action-or-view-such-as-.png

📄 single-pane-layouts-work-best-for-compact-breakpoints.png

📄 standard-side-sheet-third-pane.png

📄 swap-a-navigation-bar-in-a-compact-layout-for-a-navigation-rail-in-a-m.png

📄 tabs-can-remain-anchored-to-the-middle-of-a-layout-at-both-compact-and.png

📄 think-of-how-a-medium-layout-should-change-to-a-compact-or-expanded-la.png

📄 two-pane-layout-with-navigation-bar.png

📄 two-pane-layouts-are-often-best-for-expanded-breakpoints.png

📄 two-pane-layouts-should-use-50-widths-for-each-pane-by-default.png

📄 use-24dp-for-margins-and-spacer-in-a-medium-layout.png

📄 use-24dp-for-margins-and-spacer-in-an-expanded-layout.png

📄 use-24dp-for-margins-and-spacers-in-large-and-extra-large-layouts.png

📁 foundations_layout_canonical-examples/

📄 a-course-list-in-a-feed-layout-at-a-medium-breakpoint-8-cards-in-a-sin.png

📄 a-layout-scaffold-can-include-bar-rail-and-pane-regions.png

📄 bottom-sheets-can-provide-supporting-information-in-compact-windows.png

📄 column-width-can-increase-at-larger-breakpoints.png

📄 feed-items-can-change-size-to-group-content.png

📄 feed-layouts-can-adapt-the-number-of-columns-across-breakpoints.png

📄 feed-layouts-can-add-columns-in-a-medium-window.png

📄 feed-layouts-help-people-quickly-browse-and-discover-content.png

📄 feeds-can-organize-content-of-different-sizes-like-using-small-and-lar.png

📄 foldable-open-flattablet-in-portrait-orientation-2.png

📄 foldable-open-flattablet-in-portrait-orientation.png

📄 in-compact-windows-the-cards-in-a-feed-stack-vertically-filling-the-fu.png

📄 layering-panes-helps-people-focus-on-a-specific-task.png

📄 list-detail-layout-of-a-messaging-app-pane-1-lists-all-conversations-p.png

📄 list-detail.png

📄 phone-in-landscape-orientationtablet-in-landscape-orientation.png

📄 phone-in-portrait-orientationclosed-foldabletablet-in-split-screen-mod.png

📄 simplified-diagram-of-list-areadetail-area.png

📄 supporting-pane-layout-the-primary-pane-shows-course-details-the-secon.png

📄 supporting-pane-layouts-organize-content-into-primary-and-secondary-ar.png

📄 supporting-panes-appear-below-the-focus-pane-in-medium-windows.png

📄 supporting-panes-appear-beside-the-focus-pane-in-expanded-windows.png

📄 supporting-panes-can-appear-beside-or-below-the-primary-area.png

📄 supporting-panes-provide-contextual-info-for-the-primary-area.png

📄 the-most-basic-list-detail-views-for-compact-medium-and-expanded-layou.png

📄 use-a-selection-state-in-two-pane-layouts-onlyuse-a-back-button-in-sin.png

📁 foundations_layout_grids-spacing/

📄 apply-component-density-based-on-the-needs-and-layout-of-a-design.png

📄 as-screen-size-increases-additional-columns-allow-for-a-richer-layout.png

📄 as-screen-size-increases-for-example-when-a-foldable-screen-is-unfolde.png

📄 bar-and-safety-rulers-align-to-the-edges-of-a-screen-s-usable-space-pr.png

📄 cards-should-maintain-consistent-horizontal-spacing-to-establish-a-str.png

📄 carousel-images-categories-and-titles-should-appear-in-a-consistent-lo.png

📄 close-spacing-implicitly-groups-carousel-images.png

📄 consider-the-amount-and-priority-of-information-on-screen-higher-densi.png

📄 consider-using-higher-density-information-design-when-people-need-to-s.png

📄 content-rulers-offer-flexible-alignment-options-to-help-create-a-consi.png

📄 desktop-layouts-can-use-more-generous-spacing-than-mobile-layouts.png

📄 don-t-increase-density-in-uis-that-involve-focused-tasks-such-as-selec.png

📄 don-t-increase-the-density-in-components-that-alert-a-person-of-change.png

📄 high-density-elements-have-more-pixels-per-inch.png

📄 high-density-screen-displayed-with-density-independence.png

📄 layouts-in-material-are-based-on-a-grid-that-adapts-across-all-screen-.png

📄 low-density-elements-have-fewer-pixels-per-inch.png

📄 low-density-screen-displayed-with-density-independence.png

📄 lower-density-can-be-better-for-sites-prioritizing-aesthetics-a-focuse.png

📄 marginbar-or-safety-regiontitlecontent-1content-2content-3content-4bar.png

📄 negative-space-gives-shape-and-emphasis-to-the-course-header.png

📄 on-compact-screens-fewer-columns-are-used-to-create-a-focused-layout.png

📄 outlines-define-clear-boundaries-to-explicitly-group-elements.png

📄 placing-a-caption-under-an-image-creates-an-implicit-group.png

📄 placing-two-buttons-as-a-group-near-content-implies-they-ll-both-affec.png

📄 primary-panesupporting-pane.png

📄 rulers-allow-components-and-media-to-use-different-margin-widths.png

📄 the-bar-region-can-contain-a-toolbar.png

📄 the-interaction-target-of-a-common-button-can-be-larger-as-long-as-it-.png

📄 the-label-and-input-are-centered-within-their-parent-container.png

📄 the-measurement-between-the-label-and-input-is-20dp.png

📄 the-number-and-size-of-columns-changes-based-on-breakpoints.png

📄 the-rail-region-on-larger-screens-usually-contains-a-navigation-rail.png

📄 the-target-should-remain-48x48dp-even-if-the-icon-is-smaller.png

📄 the-title-ruler-aligns-with-the-title-in-an-app-bar.png

📄 thumbnails-in-a-shopping-basket-should-use-identical-sizes-and-styles-.png

📄 use-a-row-of-chips-to-signal-a-single-unified-control.png

📄 use-caution-when-applying-component-scaling-where-selectable-targets-w.png

📁 foundations_layout_layout-overview/

📄 1-app-bars-are-placed-at-the-top-of-the-screen-to-help-people-navigate.png

📄 12-hour-clocks-in-rtl-move-clockwise-but-mirror-ui-elements-such-as-am.png

📄 24-hour-clocks-in-rtl-move-clockwise-but-mirror-elements-such-as-butto.png

📄 a-density-menu-with-large-medium-and-small-options-to-customize-the-sc.png

📄 a-desktop-layout-can-adjust-from-three-to-two-columns-to-fit-a-medium-.png

📄 a-high-density-ui-element.png

📄 a-low-density-ui-element.png

📄 a-margin-separates-the-edge-of-the-screen-from-the-elements-on-the-scr.png

📄 a-mirrored-layout-in-an-rtl-language-reverses-the-alignment-and-orderi.png

📄 a-mobile-device-s-content-safe-area-around-a-display-cutout-for-the-fr.png

📄 a-news-app-shows-a-feed-in-a-compact-and-expanded-window-class-when-a-.png

📄 a-physical-hinge-separates-two-parts-there-is-no-display-hardware-in-t.png

📄 a-single-pane-can-scroll-its-inside-content-vertically-and-horizontall.png

📄 a-spacer-splits-two-panes-from-each-other.png

📄 android-taskbar.png

📄 back-and-foward-icons-are-mirrored-in-rtl.png

📄 based-on-the-language-being-used-a-navigation-rail-is-set-on-a-screen-.png

📄 buttons-can-hug-their-contents-or-span-their-containers-based-on-conte.png

📄 buttons-in-3-different-densities-apply-button-density-based-on-the-nee.png

📄 by-placing-a-caption-under-an-image-this-composition-shows-an-explicit.png

📄 co-planar-panes-are-displayed-side-by-side.png

📄 column-count-width-and-spacing-dynamically-adjust-to-different-breakpo.png

📄 columnfoldmarginbardrag-handlepanerail.png

📄 consider-the-amount-and-priority-of-information-on-screen-higher-densi.png

📄 consider-using-higher-density-information-design-when-users-need-to-sc.png

📄 docked-a-pane-is-displayed-above-other-panes-and-one-of-its-edges-exte.png

📄 don-t-apply-ltr-directionality-to-rtl-content-because-it-may-scramble-.png

📄 don-t-increase-density-in-uis-that-involve-focused-tasks-such-as-selec.png

📄 don-t-increase-the-density-in-components-that-alert-the-user-of-change.png

📄 don-t-reverse-the-order-of-the-email-username-and-domain-google-com-th.png

📄 drag-handle-touch-target.png

📄 feed-layout-mirrored-for-rtl-where-the-order-of-text-grid-and-other-el.png

📄 filter-chips-shown-in-an-rtl-layout-note-this-example-is-not-translate.png

📄 first-panesecond-pane.png

📄 floating-a-pane-is-displayed-above-other-panes-or-content-like-a-dialo.png

📄 folds-are-typically-found-in-the-center-of-the-device-screen-and-can-p.png

📄 high-density-screen-displayed-with-density-independence.png

📄 icons-symbols-and-label-text-for-rtl-icon-signifier-valid-or-error-ico.png

📄 if-camera-hardware-is-present-a-tabletop-device-is-best-positioned-on-.png

📄 images-in-a-carousel-are-grouped-by-their-proximity.png

📄 in-an-open-landscape-state-the-longer-device-edge-is-horizontal-while-.png

📄 in-an-open-portrait-state-the-longer-device-edge-is-vertical-while-the.png

📄 in-an-xr-full-space-layout-a-navigation-rail-can-become-an-orbiter-and.png

📄 in-multiple-pane-layouts-use-color-to-show-emphasis-and-close-spacing-.png

📄 in-urdu-controls-and-progress-for-media-and-a-podcast-title-are-shown-.png

📄 large-badge-appears-on-the-top-left-of-the-icon.png

📄 list-detail-mirrored-for-rtl-where-text-and-other-elements-are-aligned.png

📄 list-items-can-reveal-more-text-on-a-tablet.png

📄 low-density-screen-displayed-with-density-independence.png

📄 lower-density-can-be-better-for-sites-prioritizing-aesthetics-a-focuse.png

📄 mirrored-floating-toolbar-where-the-fab-appears-on-the-left-of-the-scr.png

📄 mobile-layouts-default-to-a-full-screen-window.png

📄 multi-window-mode-can-have-horizontal-positioning.png

📄 multi-window-mode-can-have-vertical-positioning.png

📄 multiple-panes-can-scroll-inside-content-independently-of-one-another.png

📄 on-mobile-the-rail-region-can-contain-a-toolbaron-desktop-the-rail-reg.png

📄 padding-separates-a-headline-from-a-image-above.png

📄 panes-are-the-primary-segments-of-a-layout-and-can-change-based-on-con.png

📄 rtl-center-aligned-small-rtl-medium-flexible-rtl-large-flexible.png

📄 rtl-linear-progress-indicator-starts-to-fill-progress-from-the-right-c.png

📄 rtl-navigation-drawer-including-a-mirrored-icon-for-outbox.png

📄 rulers-ensure-global-alignment-across-a-product-keeping-margins-and-pl.png

📄 screen-displaying-an-email-app-and-a-contacts-app-in-multi-window-mode.png

📄 send-buttons-are-mirrored-in-rtl-help-icons-are-mirrored-in-some-rtl-l.png

📄 small-badge-appears-on-the-top-left-of-the-icon.png

📄 supporting-pane-to-the-left-of-the-primary-content-text-and-other-elem.png

📄 swiping-reveals-additional-action-in-rtl-list-layout.png

📄 the-elements-in-this-card-are-explicitly-grouped.png

📄 the-extended-fab-can-change-to-a-standard-fab-when-the-window-is-small.png

📄 the-front-screen-of-a-foldable-device.png

📄 the-interaction-target-of-a-common-button-can-be-larger-as-long-as-it-.png

📄 the-label-and-input-are-centered-within-their-parent-container.png

📄 the-material-layout-scaffold-enables-layouts-to-adapt-across-different.png

📄 the-measurement-between-the-label-and-input-is-20dp.png

📄 the-screen-handle-can-be-dragged-and-released-to-create-the-desired-wi.png

📄 the-target-should-remain-48x48-even-if-the-icon-is-smaller.png

📄 two-windows-can-be-shown-at-once-with-a-taskbar-underneath.png

📄 use-caution-when-applying-component-scaling-where-selectable-targets-w.png

📄 use-contrast-between-panes-and-the-background-to-create-a-spatial-effe.png

📄 windows-can-be-moved-around-resized-and-adapt-to-different-screen-size.png

📁 foundations_layout_scaffold/

📄 a-compact-screen-can-have-a-docked-paneon-a-large-screen-it-should-cha.png

📄 a-navigation-bar-occupies-the-bottom-bar-region-on-mobilean-app-bar-oc.png

📄 a-single-flexible-pane-adapts-to-fit-any-breakpoint.png

📄 a-standard-side-sheet-can-be-used-as-a-third-pane.png

📄 at-larger-breakpoints-the-leading-rail-region-can-be-occupied-by-an-ex.png

📄 co-planar-panes-are-displayed-side-by-side.png

📄 docked-a-pane-is-displayed-above-other-panes-and-one-of-its-edges-exte.png

📄 fixed-paneflexible-pane-2.png

📄 fixed-paneflexible-pane.png

📄 floating-a-pane-is-displayed-above-other-panes-or-content-like-a-dialo.png

📄 floating-pane-with-a-scrimfloating-pane-without-a-scrim.png

📄 in-full-space-an-xr-navigation-rail-can-float-outside-the-main-content.png

📄 layouts-often-include-multiple-panes-that-work-together.png

📄 on-mobile-a-toolbar-can-float-in-the-rail-region.png

📄 panes-can-be-displayed-permanently-side-by-side.png

📄 rails-occupy-the-spaces-immediately-adjacent-to-bars-a-toolbar-sits-ab.png

📄 safety-regionbarpanerail.png

📄 the-app-bar-sits-at-the-top-of-the-screen-outside-of-the-safety-region.png

📄 the-navigation-and-first-pane-should-be-50-of-the-window-width-to-keep.png

📄 the-navigation-bar-sits-at-the-bottom-of-the-screen-above-the-safety-r.png

📄 the-rail-region-can-also-be-occupied-by-a-vertical-toolbar-or-other-co.png

📄 the-safety-region-at-the-top-and-bottom-edges-of-the-screen-on-compact.png

📄 when-a-pane-uses-explicit-containment-content-can-use-implicit-groupin.png

📄 with-no-navigation-rail-visible-split-pane-layouts-set-each-pane-to-50.png

📁 foundations_overview/

📄 cube-floating-above-a-circular-hole.png

📄 foam-like-material-sculpted-into-a-puzzle-piece-resembling-a-standing-.png

📄 icons-are-one-example-of-interactive-elements-that-require-an-understa.png

📄 silhouette-of-person-s-head-made-out-of-colorful-liquid.png

📁 foundations_usability/

📄 all-the-elements-were-large-and-competed-for-attentionthe-visual-hiera.png

📄 app-elements-in-order-of-emphasis-the-start-breathing-button-is-the-pr.png

📄 different-weights-and-width-of-letters.png

📄 five-shapes-from-the-material-shape-set.png

📄 four-different-rectangular-shapes-with-round-or-rounded-corners.png

📄 image.png

📄 large-text-and-colorful-completed-sessions-draw-attention-to-the-key-p.png

📄 light-purple-dark-purple-yellow-and-dark-green-colors-on-a-light-purpl.png

📄 shapes-and-smaller-sizes-emphasize-key-information-and-draw-attention-.png

📄 small-medium-and-large-soft-burst.png

📄 the-four-goals-in-the-aura-breathing-app-start-a-breathing-sessionexpe.png

📄 the-large-start-breathing-button-is-a-strong-visual-focal-pointthe-sup.png

📄 the-primary-color-role-1-makes-the-button-clear-and-prominentthe-secon.png

📄 the-same-color-roles-primary-1-2-and-primary-container-3-are-used-for-.png

📄 the-shapes-have-different-forms-and-sizes-the-shapes-overlap.png

📄 there-s-more-even-spacing-between-shapesthe-shapes-are-uniform.png

📄 version-1-no-containment-similar-sizes-and-inconsistent-colors.png

📄 version-2-neatly-grouped-settings-an-extra-large-button-and-consistent.png

📁 foundations_watches/

📄 1-ongoing-activities-like-timers-media-players-or-workouts-can-be-acce.png

📄 arc-large.png

📄 at-a-glance-views-allow-people-to-quickly-see-calendar-events.png

📄 buttons-with-2-on-primary-on-1-primary-and-4-on-primary-container-on-3.png

📄 buttons-with-2-primary-dim-on-1-primary-or-4-primary-dim-on-3-primary-.png

📄 complications-are-details-on-the-watch-face-that-can-be-customized-for.png

📄 consider-which-actions-are-appropriate-for-each-device.png

📄 controls-for-smartwatches-can-adapt-to-the-form-factor.png

📄 design-for-small-screens-first-starting-with-a-192dp-size-watch.png

📄 don-t-create-complex-and-detailed-apps-such-as-a-calendar-grid.png

📄 limit-choicesreduce-the-number-of-actions-to-prevent-decision-fatigue-.png

📄 limit-the-number-of-illuminated-pixels-for-a-display-that-s-always-on.png

📄 lists-use-scrolling-layouts-to-show-additional-options.png

📄 navigation-on-a-watch-complements-the-experience-on-a-phone.png

📄 notifications-should-offer-easy-access-to-more-interactions.png

📄 numeral-large.png

📄 primary-dimtertiary-dim.png

📄 primary-dimtertiary.png

📄 primaryprimary-dim.png

📄 primarytertiary-dim.png

📄 primarytertiaryprimary-container.png

📄 prioritize-contentplace-the-most-important-information-at-the-top-of-t.png

📄 rotating-side-buttons-used-for-volume-control-or-to-scroll-through-opt.png

📄 show-more-content-on-devices-that-are-larger-than-225dp.png

📄 simplify-navigationuse-a-clear-shallow-hierarchy-so-people-don-t-get-l.png

📄 tertiaryprimarysecondary-container.png

📄 the-baseline-type-scale-is-optimized-for-round-screens-to-keep-text-le.png

📄 the-color-system-includes-three-main-colors-and-specific-color-roles-t.png

📄 the-network-state-can-be-communicated-through-an-offline-icona-dialog.png

📄 time-textpage-titlescroll-indicatoraction-button.png

📄 use-non-scrolling-layouts-for-focused-tasks-like-a-timer.png

📄 use-stronger-haptics-for-key-interactions-and-subtler-feedback-for-pre.png

📄 use-tiles-for-quick-access-to-to-a-few-key-options.png

📄 watches-use-a-black-background-to-conserve-battery.png

📁 foundations_writing/

📄 avoid-setting-text-size-limits-that-don-t-fit-the-space-in-a-component.png

📄 button-text-displayed-at-1x-1-3x-and-2x-scales-all-have-top-and-bottom.png

📄 don-t-cut-off-text-without-providing-a-way-for-users-to-view-it.png

📄 don-t-truncate-content-without-providing-users-another-way-to-see-it.png

📄 for-example-if-a-font-is-14pt-at-1x-scale-then-the-font-size-should-be.png

📄 imagecaptionadjacent-text.png

📄 larger-text-can-help-people-focus-on-one-decision-at-a-time-and-improv.png

📄 left-and-right-padding-remains-constant-at-24dp-as-the-text-size-incre.png

📄 scale-up-text-in-an-adjacent-tooltip-to-maintain-space-in-a-ui-for-con.png

📄 some-screens-may-not-be-able-to-resize-and-display-necessary-content-i.png

📄 take-caution-when-embedding-essential-information-anywhere-a-screenrea.png

📄 text-that-is-too-small-and-dense-can-appear-overwhelming-and-difficult.png

📄 the-illustration-contains-both-essential-and-non-essential-information.png

📄 ui-displayed-at-1x-buttons-positioned-side-by-side-in-a-standard-layou.png

📄 ui-text-displayed-at-1x.png

📄 ui-text-displayed-at-2x-in-which-only-text-and-line-height-is-enlarged.png

📄 unresponsive-container-unintentionally-clipped-textunresponsive-textov.png

📄 use-alt-text-to-convey-what-the-image-is-showing-in-an-informative-sho.png

📄 use-captions-to-help-readers-understand-how-the-image-relates-to-the-c.png

📄 use-flexible-component-containers-that-change-size-to-fit-their-conten.png

📄 when-designing-for-text-resizing-don-t-resize-components-without-text.png

📄 wrap-text-and-if-it-still-doesn-t-fit-provide-a-way-for-users-to-see-m.png

📁 foundations_xr_components/

📄 a-basic-dialog-elevated-above-an-app-in-home-space.png

📄 a-dialog-can-be-spatially-elevated-on-the-z-axis-above-spatial-panels.png

📄 adjust-the-width-of-the-app-bar-orbiter-to-fit-in-a-person-s-field-of-.png

📄 always-align-the-app-bar-orbiter-within-the-bounds-of-nearby-spatial-p.png

📄 always-align-the-toolbar-orbiter-within-the-horizontal-bounds-of-nearb.png

📄 always-align-the-toolbar-orbiter-within-the-vertical-bounds-of-nearby-.png

📄 an-app-bar-orbiter-with-a-20dp-offset-creates-visual-separation-from-t.png

📄 avoid-expanding-the-app-bar-orbiter-beyond-the-adjacent-panel-s-width-.png

📄 avoid-using-full-screen-dialogs-in-xr-required-actions-could-appear-be.png

📄 center-aligned-app-barleft-aligned-app-bar.png

📄 contained-fab-railspatialized-fab-rail.png

📄 containeractive-indicatorlarge-badge-optional-badge-optional-large-bad.png

📄 containerheadlinetrailing-iconsleading-icon.png

📄 containericonactive-indicator-small-badge-optional-large-badge-optiona.png

📄 containerplaced-components.png

📄 depending-on-the-configuration-horizontal-or-vertical-of-the-toolbar-o.png

📄 don-t-overlap-the-app-bar-orbiter-and-spatial-panel-more-than-12dp.png

📄 don-t-place-a-vertical-toolbar-orbiter-between-spatial-panels.png

📄 horizontal-floating-toolbarvertical-floating-toolbar.png

📄 if-a-dialog-s-color-is-surface-container-high-don-t-use-surface-contai.png

📄 make-sure-a-spatial-dialog-s-color-is-higher-than-all-other-ui-element.png

📄 measurements-and-padding-for-app-bar-orbiters.png

📄 measurements-for-toolbar-orbiters.png

📄 navigation-bar-orbiter-padding-and-measurements.png

📄 navigation-rail-orbiter-padding-and-measurements-with-contained-fab.png

📄 navigation-rail-orbiter-padding-and-measurements-with-spatialized-fab.png

📄 padding-for-toolbar-orbiters.png

📄 side-view-of-a-basic-dialog-with-spatial-elevation-in-full-space.png

📄 surface-container-highsurface-container-highest.png

📄 surface-container-with-tertiary-fabsurface-container-high-with-tertiar.png

📄 surface-containersurface-container-highsurface-container-highest.png

📄 surface-containersurface-container-highsurface-container-highesttertia-2.png

📄 surface-containersurface-container-highsurface-container-highesttertia.png

📄 the-app-bar-orbiter-shouldn-t-exceed-the-width-of-adjacent-spatial-pan.png

📄 the-recommended-toolbar-orbiter-position-from-the-spatial-panel-is-off.png

📄 the-toolbar-orbiter-shouldn-t-exceed-the-height-of-adjacent-spatial-pa.png

📄 the-toolbar-orbiter-shouldn-t-exceed-the-width-of-adjacent-spatial-pan.png

📄 to-prevent-content-obstruction-don-t-overlap-the-toolbar-orbiter-and-s.png

📁 foundations_xr_design/

📄 3d-models-can-be-viewed-from-all-angles-and-moved-with-natural-interac.png

📄 arbitrary-layout-panels-are-placed-freely-in-space-best-for-multi-task.png

📄 at-a-1-75-meter-launch-distance-a-spatial-panel-s-size-is-1024x720dp.png

📄 curved-layout-panels-curve-around-the-person-best-for-immersive-media-.png

📄 flat-layout-panels-are-arranged-in-a-straight-line-best-for-comparing-.png

📄 in-xr-a-material-menu-uses-elevation-to-appear-in-3d.gif

📄 in-xr-icon-buttons-should-have-a-56dp-target-size-and-4dp-offset.png

📄 place-primary-content-in-the-center-41-of-a-person-s-field-of-view.png

📄 place-the-panel-s-vertical-center-5-below-eye-level-to-maximize-comfor.png

📄 positioning-content-in-a-person-s-field-of-view-keeps-the-ui-visible-a.png

📄 use-56dp-or-larger-target-sizes-for-interactive-elements.png

📄 INDEX.tsv

📁 m3-expressive-motion-theming/

📄 austin-fisher-sr-ux-content-designer.png

📄 effects-springs-applied-to-color.gif

📄 effects-springs-applied-to-opacity.gif

📄 expressive-and-standard-motionscheme.png

📄 gus-sonoda-sr-staff-motion-designer.jpg

📄 image.gif

📄 image.png

📄 rebecca-franks-developer-relations-engineer-android.png

📄 spatial-springs-applied-to-movement.gif

📄 spatial-springs-applied-to-rotation.gif

📁 material-is-compose-first/

📄 material-android.jpg

📄 text-compose-material-3-is-going-stable.png

📁 styles/

📄 color-is-used-to-express-style-and-communicate-meaning-with-dynamic-co.png

📄 elevation-is-the-relative-distance-between-two-surfaces-along-the-z-ax.png

📄 icons-can-be-used-to-represent-common-actions-material-symbols-are-a-s.png

📄 the-shape-scale-defines-the-style-of-container-corners-offering-a-rang.png

📄 use-motion-to-make-a-ui-expressive-and-easy-to-use-material-transition.png

📄 use-typography-to-make-writing-legible-and-beautiful-material-s-defaul.png

📁 styles_color_advanced/

📄 advanced-customizations-include-the-ability-to-remap-colors-on-compone.png

📄 color-fidelity-adjusts-tones-in-color-roles-to-produce-the-closest-mat.png

📄 colors-can-be-remapped-on-existing-material-components-or-can-be-mappe.png

📄 colors-can-stay-completely-static-and-forgo-harmonization-if-their-val.png

📄 example-of-creating-a-custom-color-role-the-primary-tonal-palette-with.png

📄 full-screen-content-based-color-moments-can-orient-users-within-a-cont.png

📄 in-lists-and-collections-of-repeated-items-that-benefit-from-different.png

📄 in-this-example-a-static-green-color-called-success-is-defined-in-addi.png

📄 in-this-example-the-color-scheme-has-green-as-the-primary-colorstatic-.png

📄 static-colors-can-be-harmonized-with-dynamic-color-to-appear-harmoniou.png

📄 this-smart-home-control-screen-combines-two-color-schemes-a-teal-conte.png

📄 to-preserve-the-semantic-meaning-of-colors-harmonization-limits-the-am.png

📄 when-many-types-of-information-and-actions-share-a-screen-use-content-.png

📄 you-can-define-your-own-dynamic-scheme-to-reflect-a-user-s-wallpaper-b.png

📄 you-can-input-your-own-colors-to-produce-a-static-baseline-scheme-in-t.png

📁 styles_color_choosing-a-scheme/

📄 colors-are-static-in-the-baseline-color-scheme.png

📄 while-the-actual-colors-may-change-the-color-role-mappings-remain-the-.gif

📁 styles_color_dynamic/

📄 an-app-colored-with-a-dynamic-content-based-scheme-sourced-from-the-in.png

📄 an-app-colored-with-a-dynamic-user-generated-scheme-sourced-from-the-u.png

📄 an-app-colored-with-schemes-from-multiple-sources-content-based-color-.png

📄 dynamic-color-in-a-work-app-2.png

📄 dynamic-color-in-a-work-app-3.png

📄 dynamic-color-in-a-work-app.png

📄 messaging-app-with-content-based-color.png

📁 styles_color_resources/

📄 material-theme-builder-lets-you-create-color-schemes-and-apply-them-to.png

📁 styles_color_roles/

📄 a-customized-banner-which-uses-on-primary-fixed-variant-1-for-its-deem.png

📄 a-fab-which-uses-primary-fixed-1-for-its-container-fill-color-shown-in.png

📄 a-snackbar-which-uses-inverse-surface-for-its-backgroundinverse-on-sur.png

📄 a-text-field-which-uses-outline-for-its-container-bordera-list-item-wh.png

📄 dark-themesurface-brightsurface-container.png

📄 dark-themesurfacesurface-container.png

📄 default-surface-container-roles-applied-to-components-surface-containe.png

📄 diagram-of-all-material-color-roles-including-optional-add-on-roles-fo.png

📄 don-t-use-the-outline-color-for-components-that-contain-multiple-eleme.png

📄 don-t-use-the-outline-color-for-dividers-since-they-have-different-con.png

📄 don-t-use-the-outline-variant-color-to-create-visual-hierarchy-or-defi.png

📄 error-color-roles-include-error-and-error-container-with-their-respect.png

📄 examples-of-fixed-and-fixed-dim-colors-in-use-primary-fixed-for-a-fab-.png

📄 fixed-and-fixed-dim-color-roles-for-the-primary-secondary-and-tertiary.png

📄 fixed-colors-don-t-change-based-on-light-or-dark-theme-so-they-re-like.png

📄 for-comparison-a-fab-which-uses-primary-container-2-for-its-container-.png

📄 icon-on-secondary-container-button-secondary-container.png

📄 improper-color-mappings-can-produce-unintended-visual-results-and-brea.png

📄 inverse-surface-inverse-on-surface-and-inverse-primary-roles-in-the-co.png

📄 light-themesurface-brightsurface-container.png

📄 light-themesurfacesurface-container.png

📄 navigation-rail-with-surface-dim-backgroundchat-window-with-surface-br.png

📄 on-fixed-and-on-fixed-variant-color-roles-for-the-primary-secondary-an.png

📄 on-primary-container-primary-container.png

📄 on-primary-primary.png

📄 on-tertiary-containertertiary-container.png

📄 outline-and-outline-variant-roles-in-the-color-scheme-shown-in-light-t.png

📄 pair-and-layer-color-roles-as-intended-to-ensure-expected-visual-resul.png

📄 primary-color-roles-include-primary-and-primary-container-with-their-r.png

📄 primary-colors-are-used-for-the-most-important-elements-like-a-starred.png

📄 secondary-color-roles-include-secondary-and-secondary-container-with-t.png

📄 surface-and-on-surface-roles-in-light-theme.png

📄 surface-dim-surface-and-surface-bright-in-dark-theme.png

📄 surface-dim-surface-and-surface-bright-in-light-theme.png

📄 surfacesurface-container-2.png

📄 surfacesurface-container.png

📄 tertiary-color-roles-include-tertiary-and-tertiary-container-with-thei.png

📄 the-outline-variant-color-can-be-used-for-the-border-of-targets-like-c.png

📄 use-primary-secondary-and-tertiary-roles-for-accent-colors-where-contr.png

📁 styles_color_static/

📄 baseline-scheme-colors-in-dark-theme.png

📄 baseline-scheme-colors-in-light-theme.png

📄 music-app-with-the-static-baseline-color-scheme.png

📄 news-app-with-the-static-baseline-color-scheme.png

📄 this-example-meditation-app-uses-a-static-scheme-created-from-its-bran.png

📁 styles_color_system/

📄 1-when-run-through-the-user-generated-color-algorithm-the-source-color.png

📄 2-when-run-through-content-based-color-algorithm-the-same-source-color.png

📄 3-custom-colors-such-as-brand-colors-can-individually-run-through-the-.png

📄 360-degree-hue-spectrum.png

📄 a-custom-volume-slider-can-use-primary-container-and-on-primary-contai.png

📄 a-dynamic-color-scheme-changes-the-ui-s-colors-based-on-different-inpu.png

📄 a-source-color-generates-five-key-colors.png

📄 additional-accent-colors-provide-more-choice-for-color-application.png

📄 at-medium-and-other-contrast-levels-those-color-roles-apply-the-necess.png

📄 changes-in-tone-and-chroma-in-the-default-light-theme-surface.png

📄 color-roles-assigned-to-the-ui.png

📄 colors-are-generated-dynamically-from-a-user-s-wallpaper-or-in-app-con.png

📄 colors-from-the-five-tonal-palettes-are-assigned-to-color-roles-for-ex.png

📄 colors-used-for-text-and-icons-now-appear-more-colorful.png

📄 dark-theme.png

📄 each-part-of-a-ui-is-assigned-a-number-and-each-number-is-assigned-a-c.png

📄 high-contrast.png

📄 high-contrastfurther-emphasizes-essential-elements-with-a-7-1-contrast.png

📄 light-theme.png

📄 medium-contrast.png

📄 medium-contrastprovides-a-minimum-contrast-ratio-of-3-1-for-those-who-.png

📄 new-tone-based-surface-colors-offer-more-flexibility-and-support.png

📄 source-color-from-a-user-s-wallpaper.png

📄 source-color-from-in-app-content.png

📄 source-color-hand-picked-by-a-designer.png

📄 specific-colors-such-as-semantic-colors-can-be-set-to-not-dynamically-.png

📄 standard-contrast.png

📄 standard-contrastthe-baseline-color-scheme-already-uses-mixed-levels-o.png

📄 static-colors-are-hand-picked-like-this-green-icon-button.png

📄 the-100-tone-is-always-100-white-the-lightest-tone-in-the-range-the-0-.png

📄 the-baseline-color-scheme-doesn-t-dynamically-change.png

📄 the-color-source-can-be-changed-automatically-changing-the-color-schem.png

📄 the-dynamic-color-process-is-automatic-a-single-source-color-is-used-t.png

📄 the-guidelines-have-been-reorganized-and-updated.png

📄 the-higher-the-color-purity-the-higher-the-chromanote-how-lightening-a.png

📄 the-same-color-roles-are-used-in-light-and-dark-themes.png

📄 the-smaller-the-tonal-value-the-darker-the-color.png

📄 tonal-values-range-from-0-black-to-100-white-the-smaller-the-tonal-val.png

📄 tones-from-the-tonal-palette-are-assigned-to-different-roles.png

📄 using-colors-of-tones-30-and-98-for-a-button-and-its-label-create-a-7-.png

📄 using-tones-50-and-98-for-a-button-and-its-label-creates-an-accessible.png

📁 styles_elevation/

📄 a-fab-s-elevation-helps-separate-it-from-body-contenta-scrim-appears-b.png

📄 all-components-have-a-default-elevation-which-should-be-used.png

📄 don-t-use-colors-with-insufficient-contrast-the-relationship-between-s.png

📄 elevation-represents-the-distance-between-elements-the-product-applies.png

📄 ensure-floating-elements-have-sufficient-contrast-with-surfaces-beneat.png

📄 interactive-elements-are-emphasized-with-elevation.png

📄 larger-softer-shadows-express-more-distance-between-a-surface-and-the-.png

📄 m2-shadows-applied-at-all-levels.png

📄 m3-using-color-instead-of-shadows-to-communicate-elevation.png

📄 material-uses-six-levels-of-elevation-each-with-a-corresponding-dp-val.png

📄 scrims-help-bring-focus-to-important-elements-like-the-navigation-rail.png

📄 smaller-sharper-shadows-indicate-a-surface-s-close-proximity-to-the-su.png

📄 surfacesurface-container.png

📄 two-overlapping-surfaces-with-distinct-tonal-valuestwo-overlapping-sur.png

📁 styles_icons/

📄 24dp-grid-at-100-scale.png

📄 24dp-grid-at-1000-scale-2.png

📄 24dp-grid-at-1000-scale.png

📄 2dp-outlined-icons-remain-readable-across-sizes-and-applications.png

📄 400-regular-weight-symbols.png

📄 an-icon-with-active-state-using-positive-value-grade-for-emphasis.png

📄 apply-weights-consistently.png

📄 at-grade-0-the-thickness-of-the-symbol-does-not-changeat-negative-grad.png

📄 avoid-mixing-styles-for-one-icon-set.png

📄 be-careful-using-excessive-weight-for-standard-24dp-symbols.png

📄 circle-diameter-20dp.png

📄 corner-radii-for-round-icons.png

📄 cornerstroke-terminalcounter-strokestrokecounter-areabounding-area.png

📄 counter-stroke-on-an-icon.png

📄 don-t-be-overly-literal-avoid-complex-icons.png

📄 don-t-mix-different-weights.png

📄 don-t-mix-the-sizes-of-your-symbol-and-text.png

📄 don-t-place-the-icon-on-a-coordinate-that-isn-t-on-pixel.png

📄 don-t-tilt-rotate-or-make-icons-appear-dimensional.png

📄 don-t-use-delicate-or-loose-organic-shapes.png

📄 don-t-use-different-optical-weights-for-material-symbols-and-text.png

📄 don-t-use-inconsistent-corner-radii.png

📄 don-t-use-inconsistent-stroke-weights-or-rounded-stroke-terminals.png

📄 don-t-use-the-lightest-weight-for-standard-size-24dp-icons-the-minimum.png

📄 don-t-use-the-same-baseline-for-material-symbols-and-text.png

📄 exterior-corners-with-2dp-corner-radii.png

📄 figma-symbols-plugin.png

📄 filled-symbols-with-fill-set-to-1.png

📄 for-optimal-legibility-and-recognition-some-symbols-should-remain-fill.png

📄 four-optical-sizes-20dp-24dp-40dp-48dp.png

📄 grid.png

📄 horizontal-rectangle-height-16dp-and-width-20dp.png

📄 icon-button-featuring-a-0-default-grade-symbol-in-light-ui.png

📄 icon-button-featuring-a-negative-grade-symbol-in-dark-ui.png

📄 icon-content-is-limited-to-the-20dp-x-20dp-live-area-with-2dp-of-paddi.png

📄 icon-drawn-using-circle-keyline.png

📄 icon-drawn-using-horizontal-rectangle-keyline.png

📄 icon-drawn-using-square-keyline.png

📄 icon-drawn-using-vertical-rectangle-keyline.png

📄 icons-can-now-be-copied-with-a-single-click.png

📄 if-additional-visual-weight-is-needed-content-may-extend-into-the-padd.png

📄 interior-corners-shouldn-t-be-rounded.png

📄 label-text-provides-short-descriptions-especially-useful-for-navigatio.png

📄 live-areaicon-content-is-limited-to-the-20dp-x-20dp-live-area-with-2dp.png

📄 make-icons-face-forward.png

📄 make-icons-graphic-and-bold.png

📄 match-the-optical-weight-and-size-of-text-and-icon-to-ensure-consisten.png

📄 measurementsplacement-2.png

📄 measurementsplacement.png

📄 no-parts-of-the-icon-should-extend-outside-of-the-trim-area.png

📄 outlined-rounded-sharp.png

📄 outlined-style.png

📄 overly-round-corners-reduces-the-symbol-s-legibility.png

📄 padding2dp-of-padding-surrounds-the-live-area.png

📄 position-icons-on-pixel-within-the-icon-grid.png

📄 rounded-style-icons.png

📄 sharp-style-icons.png

📄 shift-down-the-baseline-of-symbols-to-approximately-11-5-of-the-text-s.png

📄 simplify-icons-for-greater-clarity-and-legibility.png

📄 square-corner-radii-for-sharp-icons.png

📄 square-height-and-width-18dp.png

📄 stroke-terminal-on-an-icon.png

📄 supported-icon-sizes-20dp-24dp-40dp-and-48dp.png

📄 the-0dp-corner-radius-of-the-sharp-icon-set-echoes-this-app-s-rectangu.png

📄 the-lighter-stroke-weight-of-these-outlined-symbols-mirrors-the-thin-l.png

📄 the-paperclip-icon-uses-1-5dp-of-the-possible-2dp-stroke-area-to-fit-m.png

📄 the-ramen-bowl-icon-uses-1-5dp-stroke-and-2dp-stroke-together-within-t.png

📄 think-about-how-color-translates-some-locales-use-red-as-a-warning-col.png

📄 this-app-uses-rounded-buttons-and-round-icons.png

📄 timer-icon-at-the-regular-stroke-weight-400.png

📄 timer-symbol-shown-across-a-100-700-weight-range.png

📄 translate-icons-for-local-markets-for-example-different-locales-may-pr.png

📄 unfilled-symbols-with-fill-set-to-0.png

📄 use-20dp-optical-size-value-for-dense-layouts-on-desktop.png

📄 use-and-maintain-a-consistent-visual-style-throughout-one-icon-set.png

📄 use-caution-if-icons-are-displayed-without-labels-icon-meaning-should-.png

📄 use-consistent-stroke-weights-and-squared-stroke-terminals.png

📄 use-larger-size-40dp-48dp-symbols-when-primary-actions-need-to-be-high.png

📄 use-the-same-optical-weight-for-your-symbol-and-text.png

📄 use-the-same-size-for-your-material-symbols-and-text.png

📄 vertical-rectangle-height-20dp-and-width-16dp.png

📁 styles_motion_overview/

📄 each-scheme-expressive-standard-has-three-speeds-fast-default-slow-for.png

📁 styles_shape/

📄 abstract-shapes-can-help-people-express-themselves.png

📄 add-unexpected-moments-by-switching-between-square-and-fully-rounded-s.png

📄 avoid-using-the-same-corner-radius-value-for-nested-objects.png

📄 create-tension-by-using-a-combination-of-round-and-square-shapes.png

📄 inner-corner-component-tokens-always-map-to-individual-corner-shape-to.png

📄 leverage-the-material-shape-library-for-moments-of-delight.png

📄 m2-three-level-shape-scale-based-on-the-size-of-the-component-containe.png

📄 m3-defines-corner-radii-using-a-shape-scale-this-can-be-used-to-create.png

📄 m3-has-35-shapes-to-easily-apply-to-designs.png

📄 m3-shapes-and-google-sans-flex-share-roundness-visual-attributes.png

📄 m3-ten-level-shape-scale-based-on-the-roundedness-of-shape-corners.png

📄 paddingouter-radiusinner-radius.png

📄 shapes-can-be-intentionally-rounder-to-add-more-visual-variety.png

📄 shapes-without-clear-meaning-behind-why-they-re-different-can-add-more.png

📄 steps-on-the-scale-are-named-for-the-amount-of-roundedness-applied-to-.png

📄 use-different-corner-radii-values-for-nested-components-so-they-have-o.png

📁 styles_spacing/

📄 avoid-defining-margins-on-child-elements-as-they-usually-aren-t-unifor.png

📄 components-have-padding-tokens-that-map-to-system-tokens-which-resolve.png

📄 customize-component-spacing-to-change-it-across-the-entire-product.png

📄 define-padding-and-gaps-on-the-parent-container-to-organize-all-elemen.png

📄 for-products-that-adapt-spacing-the-exact-same-way-consider-creating-a.png

📄 gaps-can-be-horizontal-vertical-or-defined-by-the-elements-around-it.png

📄 keep-the-same-spacing-when-text-scales.png

📄 many-material-components-map-to-spacing-system-tokens.png

📄 margins-can-be-horizontal-or-vertical-or-on-a-specific-edge-leading-tr.png

📄 material-only-defines-nested-units-that-are-actively-used-in-common-la.png

📄 padding-can-be-horizontal-or-vertical-or-on-a-specific-edge-leading-tr.png

📄 search-horizontal-margins-are-24dp-by-default-to-ensure-accurate-place.png

📄 search-margins-change-to-12dp-when-focused-while-the-container-padding.png

📄 spacing-concepts-for-components-vertical-padding-top-bottom-vertical-g.png

📄 spacing-concepts-for-layouts-margintop-paddinghorizontal-padding-leadi.png

📄 spacing-should-adapt-to-component-size-layout-form-factor-and-other-co.png

📄 spacing-units-are-are-created-as-a-multiplier-from-the-baseline-unit-o.png

📄 system-tokens-define-all-spacing-values-recommended-by-material.png

📄 the-main-spacing-units-are-multiples-of-8dp.png

📁 styles_typography/

📄 a-card-using-a-display-size.png

📄 a-line-of-text-rests-on-the-invisible-baseline.png

📄 a-music-player-using-label-style-for-the-timecode.png

📄 a-navigation-bar-using-label-style-for-the-destination-text.png

📄 a-news-article-title-using-the-title-style-to-capture-attention-as-sho.png

📄 a-response-with-the-right-type-treatment-can-convey-ecstatic-emotion-h.png

📄 a-thinner-width-can-allow-for-more-characters-to-fit-at-small-sizes-su.png

📄 a-variable-font-roboto-flex-offers-a-fluid-range-of-weights.png

📄 adjust-variable-axes-like-weight-and-width-to-customize-fonts-like-rob.png

📄 an-expressive-typeface-can-be-used-for-display-styles-as-shown-here-wi.png

📄 an-expressive-typeface-can-entice-readers-to-engage-with-an-eye-catchi.png

📄 android-screens-rely-on-distance-to-baselines-for-spacing.png

📄 app-bar-using-title-style.png

📄 be-careful-when-using-very-light-weight-for-body-text-lower-resolution.png

📄 body-style-used-throughout-an-article-about-pesto.png

📄 body-styles-must-be-readable-for-long-passages.png

📄 create-tokens-for-editorial-treatments-to-apply-them-consistently-in-y.png

📄 custom-typefaces-can-be-used-together-like-baskervville-and-jacquard.png

📄 default-typography-colors.png

📄 diagram-of-using-distance-to-baseline-to-measure-line-height-alignment.png

📄 diagram-of-using-padding-and-bounding-boxes-to-measure-line-height-ali.png

📄 dialog-using-a-headline-style.png

📄 don-t-use-large-optical-type-sizes-at-small-sizes-instead-use-a-smalle.png

📄 equal-sizing-for-each-character-keeps-uniformity-of-spacing.png

📄 example-of-body-style-used-throughout-a-setup-flow.png

📄 example-of-title-style-applied-to-a-category-header-top-news.png

📄 excessive-weight-at-smaller-sizes-can-make-text-harder-to-read.png

📄 expressive-typefaces-can-be-used-for-headlines-styles-as-well-as-shown.png

📄 font-branding-is-preserved-when-moving-from-roboto-flex-to-roboto-to-n.png

📄 for-larger-type-legibility-using-styles-like-title-headline-and-displa.png

📄 for-smaller-body-copy-using-styles-like-body-and-label-we-recommend-a-.png

📄 grade-can-change-the-emphasis-without-reflowing-text.png

📄 headline-style-used-for-short-text-on-a-small-screen.png

📄 hyperlinks-should-be-underlined-and-use-primary-or-tertiary-color.png

📄 if-the-default-sizes-from-the-material-design-type-scale-do-not-meet-y.png

📄 in-editorial-treatments-type-can-freely-dominate-the-screen.png

📄 label-styles-should-enable-quick-reading-at-small-sizes-such-as-in-but-2.png

📄 label-styles-should-enable-quick-reading-at-small-sizes-such-as-in-but.png

📄 large-text-should-achieve-a-contrast-ratio-of-3-1.png

📄 m3-has-five-distinct-type-styles-display-headline-title-body-and-label.png

📄 material-s-default-typescale-of-15-styles-allows-distinction-between-e.png

📄 proportional-numbersmonospaced-tabular-numbers.png

📄 roboto-can-be-replaced-with-another-font-like-roboto-flex.png

📄 roboto-flex-includes-the-styles-of-roboto-plus-many-more-weights-and-w.png

📄 roboto-flex-offers-a-fluid-range-of-widths-from-25-to-150.png

📄 roboto-flex-offers-a-positive-grade-of-150-and-a-negative-grade-of-200.png

📄 roboto-flex-roboto-serif-and-roboto-mono-have-a-fluid-range-of-axes-li.png

📄 roboto-is-the-default-typeface-in-android-and-material-3.png

📄 roboto-serif-offers-a-functional-set-of-weights-and-widths.png

📄 several-noto-sans-fonts-for-different-writing-systems.png

📄 since-wider-styles-take-up-more-space-avoid-using-them-for-areas-with-.png

📄 small-text-should-achieve-a-contrast-ratio-of-4-5-1.png

📄 the-bounding-box-height-is-defined-by-the-line-height-specified-with-e.png

📄 the-expressive-type-scale-includes-fifteen-baseline-type-styles-and-fi.png

📄 the-increase-in-the-bedroom-light-brightness-prompts-an-algorithmic-re.png

📄 the-material-design-type-scale-uses-the-major-second-scale-1-125.png

📄 the-padding-surrounding-the-text-bounding-box.png

📄 the-scale-is-a-range-of-contrasting-styles-that-support-the-needs-of-v.png

📄 the-typeface-literata-has-a-continuous-range-of-optical-size-from-7pt-.png

📄 type-at-different-scales.png

📄 typography-tokens-describe-scalable-size-that-adapts-to-devices-or-set.png

📄 use-an-exuberant-cover-image-for-a-photo-album-here-shown-with-roboto-.png

📄 use-an-optical-size-that-matches-your-type-size.png

📄 use-caution-when-mixing-different-editorial-treatments-in-the-same-lay.png

📄 use-line-height-padding-and-container-measurements-for-setting-typogra.png

📄 use-tabular-numbers-to-prevent-layout-shifting-when-values-change-such.png

📄 weight-apply-emphasized-styles-to-text-already-bolded-for-an-expressiv.png

📄 when-switching-between-dark-and-light-mode-the-same-text-may-appear-he.png

📄 your-product-likely-will-not-need-all-15-default-styles-from-the-mater.png

📁 whats-new-at-io26/

📄 apply-spacing-tokens-to-the-margins-padding-and-gaps-of-a-component-or.png

📄 compose-material-3-is-going-stable.png

📄 design-for-immersive-xr-to-create-immersive-environments-using-spatial.png

📄 design-for-watches-using-a-physics-based-motion-system-arc-text-styles.png

📄 expressive-lists-and-menus-showcasing-vibrant-expressive-designs.png

📄 material-design.jpg

📄 use-the-expressive-layout-scaffold-to-adapt-screens-across-breakpoints.png