Tiles design system

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.

alt_text alt_text
alt_text alt_text alt_text

App icon

App icons are provided by the app developer, and shown temporarily on screen.

Design area

Each tile template has its own rules concerning the primary content area. Be sure to refer to the layout guidance.

Bottom button

Buttons 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

Assume Wear OS automatically displays your app icon.
Put the app icon on the tile design or it will display twice.


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.

alt_text alt_text alt_text


Button Spec


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.


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.

text centric

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.

button centric

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.

info centric

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.

data centric


To keep tiles glanceable, limit yourself to three colors.

Set the background color to black.
Set the background color to a full bleed image or color.


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.

type size

For more information about font, weight and sizing, see Typography.


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 alt_text
Chip Secondary standard chip alt_text
Chip Small avatar chip alt_text
Chip Large avatar chip alt_text
Chip Compact (bottom) chip alt_text
Progress indicator Standard progress indicator alt_text
Progress indicator Progress indicator with gap alt_text


For more information, see the Tile design guidelines.