Web: Assets
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
The home screen image is now square-shaped and visible across all desktop, tablet, and mobile resolutions. You can use it to showcase your brand or promote your offerings.
Requirements:
- Aspect ratio: 1:1
- Image size: 1480x1480px
- 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.
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.
Requirements:
- Aspect ratio: 1:1
- Image size: 48x48px
- Maximum size: 128kb
- Image format: SVG
- File name: order_type_name_icon
Tab bar icons
These icons are used for navigation between pages on mobile resolutions. Create an icon for every page (Home, Order, Rewards, and Other).
Requirements:
- Aspect ratio: 1:1
- Image size: 24x24px
- Maximum size: 128kb
- Image format: SVG
- File name: page_name_default, page_name_selected
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.
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.
Requirements:
- Image size: 56x64px
- File format: SVG
- FIle name: user_location_pin, venue_open_pin, venue_closed_pin, favorite_store_open_pin, favorite_store_close_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.
Requirements:
- Image size: 48x48px
- File format: SVG
- FIle name: coupon.svg
