Marketing UI graphics overview

We use UI graphics to connect our marketing and top of funnel campaigns to our product. These graphics also serve as quick references to how we use product features, and allows for more in-depth storytelling.

UI elements sit on 5 images stacked on top of a green background.

When to use

Use UI graphics to reinforce our brand language—creating consistency and visual connection across our product and marketing experiences. These graphics are primarily used on tiles and containers aiming to leverage brand equity.

Container styles

UI graphics have 2 container styles—outlined and filled. When using the outlined options, ensure the stroke color is the same as the text and set to 50% opacity. Outlined options can also follow our tone-on-tone color guidance referenced in the Color pairing tool.

Outlined

Filled

Types

Numerous UI graphics are available for enhancing storytelling across marketing, social media, and campaigns.

Size

UI graphics should be sized and scaled to best fit the composition it occupies. Always use your best judgment when scaling UI graphics.

With title

UI graphic heights are determined by the cap height or x-height of the headline.

Two ‘Free Shipping’ UI Elements: the first is sized in hight relative to the x-height of a headline, and the second is sized relative to the cap height of a headline.

Without title

In the absence of a headline, the UI graphic's height should be 15% of the the layouts shortest side.

UI Elements on layouts take up about 15% of a layout’s shortest side, demonstrated in a layout diagram to the left. On the right, there is a ‘Top Rated Seller’ UI Element sits on the top left edge of a card layout.

Clear space

Clear space is necessary to ensure we provide enough visual impact and credit for our brand. The clear space is 1/3 the overall height of the UI graphic.

Position

Align UI graphics to any of the four corners of a card. Icons are typically placed in the upper right corner, while pill tag variants are used in the upper and lower left corners.