Tiles share some fundamental design elements. Use tile templates and components to build unique tiles for your app.
Fundamental elements
The following table describes fundamental tile design elements.
|
|
|
|
|
|
App iconApp icons are provided by the app developer, and shown temporarily on screen. |
Design areaEach tile template has its own rules concerning the primary content area. Be sure to refer to the layout guidance. |
Bottom buttonButtons are important for enabling secondary actions on the tile. Place buttons 6.3% above the bottom of the screen. |
App icon
Wear displays the app icon automatically as the user scrolls through the tile carousel. The app icon fades away and should not be implemented within the tile. For more information on creating app icons, see Product icons.
Figure 1. Examples of app icons
Wear automatically shows your app icon
Do
Don't
Button
Choose short text for your buttons. Use text that is specific to the action and destination of the call to action. Ensure that the translation of the button text accommodates the character count. If the translated button text is too long, set your button to say More instead.
|
|
|
Placement |
Button Spec |
Type |
| Place your button 6.3% from the bottom if the watch face. | Leave 12dp padding from both sides. | Font sizes are not scalable. Set a minimum font size of nine. For non latin languages use a minimum font size of seven. |
Templates
There are four types of tile templates available. Download Tile Design Kit (Figma) to see the examples, and to provide feedback on your experience with using this template.
Text centric
The text-based tile template is designed for displaying text on tiles such as the latest news, upcoming events, and reminders. It is commonly used for sign-in, error, and setup states to inform users of what's happening and offer a clear call to action.
Button centric
The button-centric tile template is designed for tiles with up to five primary actions. Use this template to quickly start specific tasks.
Information centric
The information-centric tile template displays high-level metrics and progress. This is particularly useful for health- and fitness-related tiles. It provides flexible options for content display. To maintain glanceability, prioritize important data and avoid over-crowding the template.
Data centric
The data-centric tile template is a versatile template designed to display charts and graphical elements summarizing periodical information. It offers flexibility in data visualization and is useful for creating visual empty states. Maintaining simple graphical elements is essential to ensure the tile remains glanceable.
Color
To keep tiles glanceable, limit yourself to three colors.
Do
Don't
Typography
Use Roboto as the primary font on Wear OS. Use Body 2 as the default and smallest font size, and Display 2 as the largest.
For more information about font, weight and sizing, see Typography.
Components
Use components to build your tiles. Customize the colors of the component to express your brand by following the Wear Material Theming guidelines.
Download the Tile Design Kit (Figma) to see component examples.
| Component | Variant | Example |
| Button | Standard button | Available sizes: Standard, Large and Extra Large  |
| Button | Standard text button | Available sizes: Standard, Large and Extra Large  |
| Chip | Primary standard chip |
 |
| Chip | Secondary standard chip |
 |
| Chip | Small avatar chip |
 |
| Chip | Large avatar chip |
 |
| Chip | Compact (bottom) chip |
 |
| Progress indicator | Standard progress indicator |
 |
| Progress indicator | Progress indicator with gap |
 |
Resources
For more information, see the Tile design guidelines.