Introduction

The Play is a visual icon used to indicate playable media, such as videos and podcasts. It appears overlaid on the thumbnail of a piece of content, to clearly signal that the content can be played.

It is a marker, not a control: it tells users that something is playable, and the content itself handles the playback.

Anatomy

The icon and its background

The Play is a play icon centered on a background. Between the two, a padding keeps the icon off the edge.

Size, padding and icon go together: the padding is what takes the icon from its own size up to the size of the Play.

Properties

Sizes

The Play comes in four fixed sizes, and each one carries its own padding and its own icon size.

The default is 56 px. The largest one suits immersive layouts, the smallest one compact lists, and each template picks the size that fits its own layout. Whichever size is chosen, the Play keeps it across devices, so that it stays a recognizable interaction point from one screen size to the next.

Shape

The Shape atom applies to the background, from Sharp to Round. Because it is a square, Round makes it a full circle.

Color

The color of the icon and the color of its background can both be customized: a white icon on a colored background, or a colored icon on a light one. The Color atom drives both.

Background

By default, the background is not a flat color. It is a Background set to black at 50% opacity, with a blur effect: the image keeps showing through it, out of focus, and the white icon stays readable whatever the picture underneath.

Layout

Placement

The Play is placed in the middle zone of the media, always centered horizontally and vertically over the image.

Behavior

When space runs short

In a 16:9 ratio, the vertical space can become too tight for the Play and the duration to coexist, and the two would overlap. In that case the Play takes priority, and the duration is hidden.