Overview
Stay organized with collections
Save and categorize content based on your preferences.
Material 3 Expressive is the latest design system for our smallest
screen: the watch. Optimized for the round form factor, it brings a design
update which emphasizes premium and a greater level of expression. Design and
build beautiful and expressive watch apps with Material 3 Expressive.
Expressive design principles
Expressive design elevates each UI layer with thoughtful shape, animation,
color, and typography treatments.
Embrace round
Material 3 Expressive introduces a shape framework designed for round
screens. It uses the entire canvas to optimize glanceability and visual
balance.
Premium motion and springs
Material 3 Expressive updates make navigation feel natural, premium, and
consistent across all transitions. Motion now spatially connects surfaces.
They respond more accurately to user gestures, making navigation more
intuitive.
Shape morphing
Material 3 Expressive introduces a shape morphing framework for lists and
select buttons, optimized for a more premium feel. Lists feature smooth
scrolling on a round form factor.
Rich color
The color system expands to adopt the deeper tonal palettes and wider
token set included with Material 3 Expressive. The addition of a third
accent color, along with more token variants and more specific color roles,
brings both depth and variety to the design system.
Variable fonts
Material 3 Expressive replaces all instances of Roboto with Roboto Flex.
A baseline type scale is tailored and optimized for the watch's rounded screen.
Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.
Last updated 2025-05-20 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-05-20 UTC."],[],[],null,["# Overview\n\nMaterial 3 Expressive is the latest design system for our smallest\nscreen: the watch. Optimized for the round form factor, it brings a design\nupdate which emphasizes premium and a greater level of expression. Design and\nbuild beautiful and expressive watch apps with Material 3 Expressive.\n\nExpressive design principles\n----------------------------\n\nExpressive design elevates each UI layer with thoughtful shape, animation,\ncolor, and typography treatments.\n\n### Embrace round\n\n\nMaterial 3 Expressive introduces a shape framework designed for round\nscreens. It uses the entire canvas to optimize glanceability and visual\nbalance. \n\n\u003cbr /\u003e\n\n### Premium motion and springs\n\n\nMaterial 3 Expressive updates make navigation feel natural, premium, and\nconsistent across all transitions. Motion now spatially connects surfaces.\nThey respond more accurately to user gestures, making navigation more\nintuitive. \n\n\u003cbr /\u003e\n\n### Shape morphing\n\n\nMaterial 3 Expressive introduces a shape morphing framework for lists and\nselect buttons, optimized for a more premium feel. Lists feature smooth\nscrolling on a round form factor. \n\n\u003cbr /\u003e\n\n### Rich color\n\n\nThe color system expands to adopt the deeper tonal palettes and wider\ntoken set included with Material 3 Expressive. The addition of a third\naccent color, along with more token variants and more specific color roles,\nbrings both depth and variety to the design system. \n\n\u003cbr /\u003e\n\n### Variable fonts\n\n\nMaterial 3 Expressive replaces all instances of Roboto with Roboto Flex.\nA baseline type scale is tailored and optimized for the watch's rounded screen. \n\n\u003cbr /\u003e"]]
