Inventory of the latest design specifications of Material Design 3

In 2014, Google released Material Design (MD for short), which became a unified UI design language for Google's products. So far, MD has had two major upgrades,   Material Theming (Material Design2, M2), which was released in 2018, and Material You (Material Design3, M3), which was newly released in 2021. 

The biggest feature of M3 is the emphasis on personalization, just like the name "You". A concentrated expression is dynamic color matching (Dynamic Color). Devices that support M3 (such as Pixel series mobile phones equipped with Android12) can dynamically change the theme of the App or Widget according to the wallpaper color.

You can experience the dynamic color-matching effect based on wallpaper through the tools provided by Google.

Dynamic color matching is based on ColorScheme, the system extracts and updates ColorScheme from the current wallpaper through an algorithm. We can observe this change in our application through duyamicColorScheme and apply it automatically. Take the Compose-M3 code as an example:

What is ColorScheme? We'll see it later in the introduction to the color system.

val dynamic = Build.VERSION.SOK_INT = Build.VERSION_CODES.S

val colorScheme = if (dynamic) {

    val context = LocalContext.current

    // Use the dynamicLightColorScheme function to create a ColorScheme instance with light dynamic values

    // or use dynamicDarkColorScheme to create an instance with dark dynamic values

    // Pass in Context to get dynamic color matching resources from Android system

    if (dark) dynamiclightColorScheme(context) else dynamicDarkColorScheme(context)

} else {

    // use lightColorScheme or darkColorScheme


Multi-screen size adaptation

With the increase of various tablets and folding screen devices, more and more applications need to consider the effect of running under various screen sizes, and can dynamically respond to changes in screen size.

An important design principle of M3 is that the UI adapts to different screen sizes and gives a more reasonable layout. M3 gives a lot of details for the cross-screen design, such as how to place the menu bar, how to display the Detail-List on the same screen, and even the transition animation of layout switching, etc., but the basis of all this is to give a set of screen type standards, Any screen size can be classified as Compact / Medium / Expanded

enum class WindowSizeClass { Compact, Medium, Expanded }


fun MyApp(windowSizeClass: WindowSizeClass) {

    // Select a navigation element based on window size.

    when (windowSizeClass) {

        WindowSizeClass.Compact - { /* Bottom bar */ }

        WindowSizeClass.Medium - { /* Rail */ }

        WindowSizeClass.Expanded - { /* Persistent drawer */ }



MD has three major specifications, Color, Shape and Typography. These specifications are the corresponding constants defined in the MateriaTheme when these specifications are implemented in the code, for us to refer to in the project. Next, let's take a look at the changes of M3 from these three aspects.


The color system of M3 is consistent with the overall idea of ​​M2. Both use the color slot (ColorRule) to classify the color scenes in the application, but the definition of the color slot has been adjusted and added. There are 25 color slots defined in M3, as shown in the table below. Many color slots are inherited from M2, and the green frame part is the newly added content of M3.

In the color slot table, the vertical direction is classified according to the usage scene and importance. Just like a performance with protagonists and supporting roles, works with clear primary and secondary are more beautiful. The scene can be divided into three categories:

  • AccentColor (accent color): including Primary, Secondary, and Tertiary, these are the actors on the stage, followed by the lead actor, the second and third actors. We can assign these colors according to the importance of UI components, Primary is used for those components with the most important functions or the largest area.
  • NeutralColor: Includes Background and Surface, which are environments and sets on stage that can be used as a component's background color to complement the starring performance.
  • AdditonalColor: They are some special props that only appear in special scenes, such as Error and so on.

The color slot table is horizontal, and each group of colors is composed of four shades, which can be used together inside the component.

Take the Primary color slot as an example:

  • Primary & OnPrimary: inherited from M2. Primary is the base color of this group of colors, and OnPrimary is used to contrast with the content displayed above Primary. 1 and 2 as shown above
  • PrimaryContainer & OnPrimaryContainer: The newly added definitions of M3, they are lighter in color and can be used on components with lower importance than Primary & OnPrimary, as shown in Figures 3 and 4 above. It seems to be similar to the use of Secondary. They are selected according to the importance of components. The difference is that they are the same color as Primary, which is suitable for forming larger components with Primary, which is more coordinated.

The different shades of the same group are taken from the color palette. The following is the Primary palette. The palette consists of 13 colors. The larger the number, the lighter the color, and vice versa, the darker the color. Light/Dark themes are also picked from the palette

ColorScheme is used in M3 to define a set of color slot schemes. Take the Compos-M3 code as an example:

class ColorScheme( ColorScheme (

    primary: Color,: Color , 

    onPrimary: Color,: Color , 




Set the theme color by setting ColorScheme in Theme

import androidx.compose.material3.MaterialTheme androidx.compose.material3.MaterialTheme _ _ _ _ _ _


@Composablefun MaterialTheme (@Composablefun MaterialTheme (  

    colorScheme: ColorScheme,: ColorScheme , 

    typography: Typography,: Typography , 

    // Function to update Shape is coming// Function to update Shape is coming

    content: @Composable () -> Unit: @Composable () -> Unit    



In terms of shape, first of all, the classification of shapes has changed between M3 and M2


M2 is classified according to the size of the component itself: Small / Medium / Large, and M3 is divided into seven categories according to the radian of the rounded corner of the component: from None to Full, each component has more expressions, making the UI more expressive.

Text Typography

In addition to color, the text is also one of MD's specifications. In terms of font definition, M2 has 6 kinds of headings (Headline 1~6), 2 kinds of subtitles (Subtitle 1~2), 2 kinds of text titles (Body 1~2), buttons, overlines, and other style fonts. M3 is relatively more regular in classification, no longer using number classification, but according to Small / Medium / Large classification


Above, color, shape, and text are the three basic specifications of MD. The system's default components form a unique visual style by applying these specifications. The UI components of the M3 have two visual features as a whole, one is more rounded, and the other is a larger area, which makes the click area more obvious in the current large-screen devices. Next, take a look at the specific changes in the design of various basic components:

FAB floating button

  • The shape changed from a circle to a rounded rectangle
  • Added a Large (96dp) large size FAB, M2 has only Default (56dp) and Mini (40dp) sizes by default
  • The default background color changed from Primary to Primary Container
  • The height of the Extended Fab is aligned with the Fab, and the vision is more unified. The heights of the two are slightly different in M2.


  • The basic shape changed from a rounded rectangle to half circle
  • Text buttons are no longer in all caps, they are case sensitive
  • Increase height (36dp > 45dp)

Chip label

  • The semicircle becomes a rounded rectangle (as if M3 and M2 have swapped round <> rounded corners on the component shape...)
  • Adjustment of function types, Actioin class Chip is split into Assist and Suggestion types
  • By default, there is no shadow (elevation = 0). The M3 component cancels a lot of shadow elements by deepening the color contrast of the border and weakens the quasi-physical style as a whole.

TopAppBar title bar

  • By default, the shadow is canceled, and the shadow will be added when scrolling (Elevation = 2)
  • Height increases, the font gets bigger
  • The definition of Primary Variant in M2 has been deleted in M3, which was originally used in StatusBar with a darker color than Primary, and M2 StatusBar is also Primary, creating an immersive title bar


  • Larger area and increased height
  • Cancel the shadow and turn the quasi-object into a flat
  • Add identifiable graphics such as checkmarks to be more friendly to color blindness


  • First of all, the name has changed, M2 is called Bottom Navigation, and M3 is called NavigationBar
  • Removed shadows, increased height
  • M2 indicates the selected state through the transparency of the color, and M3 adds an Outline


  • Increased the font of the Title
  • Increased padding
  • Larger rounded corners

In addition to the above components, the styles of other components have not changed much, most of which are to cancel the shadow, increase the area, etc.

Post a Comment