Tiles design system

Tiles share some fundamental design elements. By understanding tile templates and tile components, you can easily build unique tiles for your apps.

Fundamental elements

The following table describes fundamental tile design elements.

alt_text alt_text
alt_text alt_text alt_text

App icon

Design area

Bottom button

App icons are provided by the app developer, and shown temporarily on screen. Each tile template has its own rules concerning the primary content area. Be sure to refer to the layout guidance. Buttons are important for enabling secondary actions on the tile. Place buttons 2.1% 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.

alt_text

Figure 1. Examples of app icons

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.

alt_text alt_text alt_text

Placement

Button Spec

Type

Margin: Place your button 6.3% from the bottom if the watch face. Padding: Leave 12dp padding from both sides. Font size: Font sizes are not scalable. Set a minimum font size of nine. For non latin languages use a minimum font size of seven.

Tile Templates

There are four type of tile templates available. Download Tile Design Kit (Figma) to see the examples.

alt_text alt_text
Text centric template Button centric template
alt_text alt_text
Info centric template Data centric template

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

alt_text
Button Standard text button

Available sizes: Standard, Large and Extra Large

alt_text
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

Resources

For more information, see the Tile design guidelines.