Tiles design system

Understand tile fundamental elements. Use tile templates, layouts, and components to design and build unique tiles for your apps.

Fundamental elements

Percentage padding

Top, bottom, and side margins all use percentages, rather than fixed margin amounts, to achieve proportional scaling.

Design areas

Each type of tile template has its own rules within the primary content area. Refer to the layout guidance for more information.

Bottom compact chip

Important for enabling secondary actions on the tile. Consistently placed 6.3% above the bottom.

Bottom compact chip

Within the button, use a word that's short but specific to a particular action or destination. The translation of this call-to-action text must accommodate the character count limits. As a default or fallback value, you can use "More" as the call-to-action text.

Placement

  • Margin: 2.1% from the bottom
  • Internal padding: 8 dp above and below

Button spec

  • Internal padding: 12 dp on both sides

Side internal padding/margins

  • 16.64%

Recommended character limit < 225 dp

  • Max lines: 1
  • Max character limit: 8
  • Recommended character limit: 6
  • Truncation: No

Recommended character limits > 225 dp

  • Max lines: 1
  • Max character limit: 9
  • Recommended character limit: 7
  • Truncation: No

Color

Apply your brand's theme

There are several brand colors to choose from. They can also be customized and changed to fit your app's look and feel.
Use the Material theme tools and guidance to generate colors that have adequate color contrast levels, using your primary color as a source color Use the generated palette to replace the primary, primary-variant, on-primary, surface, and on-surface colors in your palette in Figma to theme your tile correctly. All other colors are not customizable to create consistency across tiles.

Other Material theme building tools:

Color application

Always set the background color to black.

Do

Don't set the background as a full bleed image or block color.

Don't

Typography

Roboto is the primary font used in Wear OS. Body 2 is recommended as the default and the smallest font size, while Display 2 is the largest type style that's available for tiles.

Primary label

Primary label text is always 16.64% from the top edge and have an internal padding of 6.3%. Color and font also remain consistent throughout.

Internal padding

Top margins: 16.64%
Side margin: 6.3%

Color

On-Background-Variant (Gray 300)

Type

Tiles3P (Roboto) / Button - 15S Bold

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

Components

There are several components available to build your app's tiles. These components are aligned with Material Design.

Icon button

Options: Button or Toggle Button
Sizes: Standard, XS, S, L
Types: Filled, tonal-filled, and image

List up to 7 options.

Text button

Options: Button or Toggle Button
Sizes: Standard, XS, S, L
Types: Filled and tonal-filled

List up to 7 options.

Standard chip

Options: Icon, secondary label, and text alignment

List up to 2 options.

Title chip (primary-fill only)

Center-aligned text

Create a single, prominent CTA.

Compact chip

Types: Filled and tonal-filled
Options: Icon or no icon

Use in the bottom button slot.

Progress indicator

Types: Customizable stroke width
(Default sizes: 8 dp and 5 dp)
Options: Gap at the bottom or full

Indicate progress and task completion.

Figma design kit

Download the Tiles on Wear OS design kit to start using the tile design layouts with built-in components, options, and recommendations to create different layouts that suit your needs, while following the guidelines in the ProtoLayout templates.