Skip to main content
This page outlines the guidelines for defining safe areas in image assets to ensure important content is not cut off on different devices and screen sizes. These guidelines apply to all type of image assets, including hero banners, thumbnails, logos, and icons.

​
Safe Area Definition

The safe area is the central portion of an image where critical content should be placed to avoid being cut off. Typically, this is the central 80% of the image.

​
Guidelines for Images

  • Image position: Keep the image focal points in the central area.
  • Content of the image: The images should not contain logos or text to provide readability of the bloc/modal’s content.
  • Gradient: When applying gradient on the image, consider individually what orientation and color to use. The color decision is based on the image color scheme, and the same gradient will work on light, medium bright and darker backgrounds differently. The gradient orientation has to follow the content alignment (that is, when the content is on the left side, apply the gradient on the left side). As default, use #000000 (black) with the following parameters: Linear gradient, from black 70% opacity to black 0% opacity.
Parent topic:Merchant Asset and Metadata Specifications