---
url: /foundations/watches/overview.md
description: Watches have special design considerations and interaction patterns
---

# Design for watches

Watches have special design considerations and interaction patterns

**Overview** · [Foundations](foundations.md) · [Styles](styles.md) · [Layout](layout.md)

![Design for watches](/assets/729910f3-mroczzd8-foundations.BGysLyxA.webp)

## Resources

| Type           | Resource                                                                                                     |
| -------------- | ------------------------------------------------------------------------------------------------------------ |
| Design         | [About M3 Expressive](../../index.md)                                                                        |
| Design         | [M3 Expressive on Wear OS](https://developer.android.com/design/ui/wear/guides/get-started)                  |
| Design         | [Figma Design Kits for Wear OS](https://developer.android.com/design/ui/wear/guides/get-started/design-kits) |
| Implementation | [Android Developers: Wear OS](https://developer.android.com/training/wearables)                              |
| Implementation | [Jetpack Compose for Wear OS](https://developer.android.com/training/wearables/compose?version=3)            |

## New in GM3 Expressive

Design expressive layouts for watches with harmonious shape, animation, color, and typography treatments. All examples shown here are based on Material for Wear OS. [More on M3 Expressive on Wear OS](https://developer.android.com/design/ui/wear/guides/get-started)

### Designed for round screens

A new shape system with edge-hugging containers and buttons creates variety and visual balance on round screens.

[More on shape system for Wear OS](https://developer.android.com/design/ui/wear/guides/get-started/apply)

![Watch screenshots using rounded buttons, progress bars, and page indicators.](/assets/d3329e3c-mp4amaej-01.C7OnwjYt.webp)

Controls for smartwatches can adapt to the form factor

### Expressive motion & springs

A new physics-based system makes interactions and transitions feel more alive, fluid, and natural.<br><br>[More on M3 motion physics](../../styles/motion/overview/how-it-works.md)

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fmq5i6utk-Platforms%20-%20WearOS%20-%20Overview%2002%20-%20IA%20-V01.mp4?alt=media" aria-label="A settings screen scrolling through options."></video>

Use motion to make interactions intuitive

### Shape morphing

With shape morphing, controls respond to show interaction. Containers change corner radius.<br><br>[More on M3 shape morphing](../../styles/shape/shape-morph.md)<br>

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fmq5i6n4r-Platforms%20-%20WearOS%20-%20Overview%2001%20-%20IA%20-%20v01.mp4?alt=media" aria-label="A number pad with buttons morphing from rounded to squared as they are pressed."></video>

Selected buttons change shape to show interaction

### Rich color

Dynamic color and deep tonal palettes are applied in a system of [color roles](../../styles/color/roles.md#8b68e9f2-2db2-408f-b002-55adba3b6299 "Material has 26 standard color roles organized into six groups: primary, secondary, tertiary, error, surface, and outline.") to create depth and variety.

[More on color for Wear OS](https://developer.android.com/design/ui/wear/guides/styles/color)

![A media player on a smartwatch displaying a song title, artist, and playback controls.](/assets/3f55f90d-mp4aosfu-04-alt.BYplVcGx.webp)

The color system includes three main colors and specific color roles to create depth and variety

### New type roles

Along with an updated and optimized [type scale](https://developer.android.com/design/ui/wear/guides/styles/typography/type-scale-tokens), new styles serve specific use cases for watches:

* [Arc](https://developer.android.com/design/ui/wear/guides/styles/typography/apply#arc-styles) text for curved titles
* [Numeral](https://developer.android.com/design/ui/wear/guides/styles/typography/apply#numeral-styles) text for bigger, stylized text

[More on typography for Wear OS](https://developer.android.com/design/ui/wear/guides/styles/typography)

![3 smartwatch screens showing a fitness tracker, a timer, and a calendar notification using Roboto Flex.](/assets/0bcfefc2-mp4antdv-05.wea8AaUV.webp)

The baseline type scale is optimized for round screens to keep text legible in a compact space