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.

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.

Seller handle

Program handle

Pricing

Icons

Descriptions

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.

Without title

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

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.