Implementing your theme

The following techniques can be used to customize and apply color, typography, and shape. Iconography is provided with five unique sets to choose from.


Color

The color system supports 13 categories of color that can be applied to components, text, icons, and surfaces.

1. Primary 2. Primary Variant 3. Primary Variant 2 4. Secondary 5. Secondary Variant 6. Background 7. Surface 8. Error 9. On Primary 10. On Secondary 11. On Background 12. On Surface 13. On Error

Theming with color

To use Material Theming with color, start by choosing suitable colors to apply to your UI. Color can be selected in several ways: The Material...

Read More

Primary and secondary colors

Primary and secondary colors are applied sparingly to strategic parts of your UI. They are typically chosen for their ability to represent your brand. Primary...

Read More

Primary and secondary colors are applied sparingly to strategic parts of your UI. They are typically chosen for their ability to represent your brand.

Primary colors map to components and elements, like app bars and buttons. Secondary colors are most often used as accents on components, such as FABS and selection controls.

Finally, color variants can also be used to complement and provide accessible options for your primary and secondary colors.

Surface, background, and error colors

Surface, background, and error colors typically don’t represent brand. In general, they occupy the following areas of the UI: The elements in an app use...

Read More

Surface, background, and error colors typically don’t represent brand.

In general, they occupy the following areas of the UI:

  • Surface colors map to components such as cards, sheets, and menus
  • Background color is found behind scrollable content
  • Error color indicates errors in components, such as text fields

“On” colors

The elements in an app use colors from specific categories in your color palette, such as a primary color. Whenever other screen elements, such as text or icons, appear in front of surfaces using those colors, those elements should use colors specifically designed to appear clearly and legibly against the colors behind them.

This category of colors is called “on” colors, referring to the fact that they color elements that are sometimes placed “on” top of key surfaces that use a primary color, secondary color, surface color, background color, or error color. These are labelled using the original category name (such as primary color) with the prefix “on”.

“On” colors are primarily applied to text, iconography, and strokes. Sometimes, they are also applied to surfaces.

“On” color naming

Category

“On” category

Primary

On Primary

Secondary

On Secondary

Surface

On Surface

Background

On Error

Error

On Background

The colors in the “on” category are applied to text and icons (and sometimes surfaces) that appear in front of areas colored using: a primary color, secondary color, surface color, background color, or error color.


Typography

The type system supports 13 categories that, when combined, form the typescale. This typescale is evident in the variety of text styles and sizes that appear on screen, ranging from body copy to buttons. Type appears across the UI, in places such as in components and on surfaces.

Type attributes are controlled by values that can be customized for the type family, font, case, size, and tracking.

Theming methods

There are multiple ways to choose typography:

Read More

Customize and apply typography

There are multiple ways to choose typography:

  • Generate typescales from your local system’s fonts using the Material Theme Editor, and then apply them across your stickersheet
  • Pick a typeface from Google Fonts that reflects your product

Headings

Headlines 1-6 are the largest sizes in the typescale. They are reserved for short, but impactful, moments of text. They are also used for numerals....

Read More

Headlines 1-6 are the largest sizes in the typescale. They are reserved for short, but impactful, moments of text. They are also used for numerals.

Subtitles are smaller than headlines. They are typically reserved for medium-emphasis text used in shorter text strings.

Body and smaller text

Body text 1-2 is typically used for longform writing. It should be optimized for small text sizes. Caption and overline text are the smallest font...

Read More

Body text 1-2 is typically used for longform writing. It should be optimized for small text sizes.

Caption and overline text are the smallest font sizes. They are used sparingly to annotate imagery or to provide a brief introduction to a headline.

Button text is typically used in text buttons, outlined buttons, and contained buttons.


Shape

The shape system is currently defined by a series of baseline radii. These radii can be customized for specific components, such as changing shapes from sharp to round, and can additionally include cuts. Component radii variations and cuts can be symmetric or asymmetric.

1. Sharp (0dp), 2. Round (4dp), 3. Round (16dp), 4. Round (24dp)

Scaled to 500%

Theming with shape

Alter the shape of UI components using the Material Theme Editor. Shapes can be modified to suit your brand and app, such as adjusting shapes...

Read More

Alter the shape of UI components using the Material Theme Editor. Shapes can be modified to suit your brand and app, such as adjusting shapes from sharp to round, and applying cuts.

Sharp components

Components that traditionally have 4dp radii (such as cards, buttons, menus, snackbars, tooltips, and dialogs) can be adjusted to have sharp corners, such as 0dp...

Read More

Components that traditionally have 4dp radii (such as cards, buttons, menus, snackbars, tooltips, and dialogs) can be adjusted to have sharp corners, such as 0dp radii.

1. Zoomed at 2000%, 2. Zoomed at 400%

Round components

Components such as cards, menus, snackbars, tooltips, and dialogs, and buttons map to 4dp radii. The roundest components – pill and circular shaped components, such...

Read More

Components such as cards, menus, snackbars, tooltips, and dialogs, and buttons map to 4dp radii.

1. Zoomed at 2000%, 2. Zoomed at 400%

The roundest components – pill and circular shaped components, such as chips and FABs – have a baseline radii of 16dp and 24dp, respectively.

1. Zoomed at 2000%, 2. Zoomed at 400%

1. Zoomed at 1200%, 2. Zoomed at 400%

Cut components

Components can be cut at 45 degree angles. Cuts can be different lengths, depending on the component and the style. For example, sheets might have...

Read More

Components can be cut at 45 degree angles. Cuts can be different lengths, depending on the component and the style.

1. Zoomed at 2000%, 2. Zoomed at 400%

For example, sheets might have larger cuts, while buttons might contain smaller cuts. The amount of surface area, and the need to protect legibility, helps determine the best cut size for each element.

1. Zoomed at 2000%, 2. Zoomed at 2000%


Icons

1. Filled, 2. Sharp, 3. Rounded, 4. Outlined, 5. Two-Tone

In addition to the original filled Material Design Icons, four additional icon themes are available. Each icon set should be used consistently across an app to maintain visual consistency, without mixing multiple icon sets in a single UI.

Theming with icons

Select an icon set from five different themes:

Read More

Select an icon set from five different themes:

  • Filled icons
  • Sharp icons
  • Rounded icons
  • Outlined icons
  • Two-tone icons

Icon types

The filled icon set is the original set of Material icons. The sharp icon set has eliminated the corner radius from the filled icons. The...

Read More

Filled icons

The filled icon set is the original set of Material icons.

1. Grid structure, 2. Filled set samples

Sharp icons

The sharp icon set has eliminated the corner radius from the filled icons.

1. Grid structure, 2. Sharp set samples

Rounded icons

The rounded icon set shares the same 2dp radii with the filled set for its exterior corners. There is an additional 1dp radii for strokes, the interior corners, and counter area.

1. Grid structure, 2. Rounded set samples

Outlined icons

The outlined icon set eliminates a majority of fills, converting most icons to 2dp strokes, reducing their visual weight. These can also be used to represent state, such as combining them with filled icons to show a selected state.

1. Grid structure, 2. Outlined set samples

Two-tone icons

The two-tone icon set uses the same color at varying opacities for the stroke and fill.

1. Grid structure, 2. Two-Tone set samples