Context

Assets are other visual elements that don't fit categories such as colors, fonts, etc. These can be images or logos, for example.

Home screen image

For this one, use the whole safe area to show any neat visuals of your choice. As the components on top of the image can make the image hard to see on smaller devices, we do not recommend putting texts inside of it.

You can find it in Figma template here.

Requirements:

• Aspect ratio: 16:10
• Image size: 2880x1800px
• Maximum size: 1mb
• Image format: JPG
• File name: home_background

Logo

The logo is the symbol of your Brand. It is mostly used in the Header.

Requirements

• Safe area: 150x48px SVG, 300x96px PNG and JPG
• Maximum size: 128kb
• Maximum width: 150px
• Image format: Recommended SVG, PNG and JPG
• Filename: brandname_logo

Logo - dos and don'ts

Do

• Keep the logo aligned on the left edge
• Keep width

Don’t

• Leave empty space on sides

Logo can have spacing at the top or at the bottom; it will automatically be positioned to a max-width of a container.

You can find it in Figma template here.

Icons

Order type icons

These icons serve as a placeholder image for each Order Type a venue has. Create an icon for each Order Type your Brand covers. They are used on the homepage.

You can find it in Figma template here.

Requirements:

• Aspect ratio: 1:1
• Image size: 48x48px
• Maximum size: 128kb
• Image format: SVG
• File name: order_type_name_icon

Other assets

Favicon

Favicon is an element associated with a website. Many will use a favicon as a visual reminder of the site identity in the tabs of a browser.

You can find it in Figma template here.

Requirements: 

• Aspect ratio: 1:1
• Image size: 144x144px
• Maximum size: 128kb
• File format: SVG, PNG, JPG
• FIle name: favicon

Location pins

As the bottom pin is showing the exact coordinate spot, the asset should always be fixed to the bottom edge of the container. Usage: Directory map, Delivery details, Delivery tracking.

You can find Figma template here

Requirements:

• Image size: 56x64px
• File format: SVG
• FIle name: user_location_pin, venue_open_pin, venue_closed_pin

Venue pin

This asset shows the venue location coordinates on map. The asset needs to have has two separate images/variants:

• Venue open: Asset shown when in venues opening hours
• Venue closed: Asset shown outside opening hours or in a case a venue is not working for some reason

User location

Asset used to show the coordinates. It shows the location of the User on a map either if the User shares their location through their browser or manually chooses an address one from the search input.

Offer (coupon) icon

If your Brand has offers or promotions configured but don’t have Loyalty you should also provide an offer icon that will be shown on the menu page.

You can find Figma template here.

Requirements:

• Image size: 48x48px
• File format: SVG
• FIle name: coupon.svg