Customer Assets Styleguide: Updated June 16, 2017

Customer Assets Styleguide
Updated June 16, 2017
Section 1. Global Assets

Section 2. Email Assets
Section 3. Desktop Assets
Section 4. Mobile Web Assets
Section 5. Mobile App Assets
Section 1. Global
1.1 LOGO
Requirements Desktop Mobile Web App
Minimum dimensions: 125px x 125px, 72px dpi

Larger size or vector format strongly recommended
Preferred file types: Required Required Required
1.2 FAVICON
Square dimensions: Favicon

Minimum 32px x 32px, 72px dpi
Maximum 500px x 500px, 72px dpi
Not
Required Required
Accepted file types: Applicable
We recommend minimal design
using shapes and colors. Text will
not be legible.
1.3 FONTS
The following fonts are considered web safe and do not require additional
assets:
Arial Lucida Console

Arial Black Lucida Sans Unicode
Arial Narrow Palatino Linotype
Century Gothic Tahoma
Copperplate Gothic Light Times New Roman
Courier New Trebuchet
Georgia Verdana
Impact
To use a font not listed above, provide font files which are licensed for web use. Required Optional Optional
We can convert TTF and OTF that do not require external licensing.
We do support the following font foundries:

• Typography.com
• MyFonts.com
• Google Fonts
We do not support Adobe TypeKit, as the Adobe script is insecure and violates
Olo PCI compliance standards.
Accepted file types:

Section 1. Global
1.4 COLORS
Please provide us with 2 to 4 brand colors.

We require color information in HEX format. (For example: #0188BB)
These colors will be used as core colors across all platforms.

Required Required Required
For desktop design, use PSD mockups to indicate specific application of
these colors. Note ADA contrast requirements as described in Section
3.0.1.
1.5 CATEGORY IMAGES

1.5.1 CATEGORY IMAGES (DESKTOP)
Separate image for each menu category.

To be provided with site design assets; see section 3.4 for details.
Required resolution: 72px dpi

Required width: 500px Not Not
Recommended height: 138px Optional
Applicable Applicable
1.5.2 CATEGORY IMAGES (MOBILE WEB & APP)
Separate image for each menu category.

To be uploaded directly to Olo’s Menu Image Management tool.

Required mobile & app dimensions: 1200px x 800px Not
Optional Optional
Applicable
Section 1. Global
1.6 PRODUCT IMAGES

1.6.1 PRODUCT IMAGES (MENU ITEMS)
Separate image for each menu item.

To be uploaded directly to Olo’s Menu Image Management tool.

Minimum dimensions: 800px x 800px
Recommended dimensions: 1200px x 800px Optional Optional Optional
Recommended aspect ratio: 3:2
1.6.2 PRODUCT IMAGES (PLACEHOLDER)
A placeholder image to display when no product image is assigned. Helps to

preserve layout and visual consistency. If not provided, layout may adjust
when menu item has no assigned image.
To be uploaded directly to Olo’s Menu Image Management tool. Optional Optional Optional
Same requirements as 1.6.1 Product Images (Menu Items). We

recommend matching size and aspect ratio to other product images.
Section 2. Email
2.1 EMAIL HEADER IMAGE
Requirements Email
If not provided, logo will be used

Required width: 600px
2.2 EMAIL FOOTER IMAGE (Welcome Email ONLY)
Requirements Email
Applies to Welcome Email only; not supported on order specific emails

Email Header Image
Email
Content
Email Footer Image

Section 3. Desktop
3.0 REFERENCE
3.0.1 ADA COMPLIANCE
Requirements Desktop
To meet AA level requirements under WCAG 2.0, text colors must meet the following minimum contrast
ratios: [reference: https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast]
• Text and images of text have a contrast ratio of at least 4.5:1

• Large text - at least 18 point (typically 24px) or 14 point (typically 18.66px) bold has a contrast
ratio of at least 3:1 Optional
It is recommended to verify your color choices with a contrast checking tool to ensure ADA compliance.
Example: WebAIM Color Contrast Checker - http://webaim.org/resources/contrastchecker
Olo assumes no responsibility for your color choices that do not meet WCAG 2.0 AA requirements.
Furthermore, to the extent you chose to submit non-compliant material to Olo, you agree to indemnify Olo
for such non-compliance.
3.0.2 SWATCHES
Required swatch resolution: 72px dpi

Maximum swatch width: 500px
Maximum swatch height: 500px
Optional
Accepted file types (for swatch):
Swatch Examples
(individual swatches highlighted to exemplify where the edges repeat)
These are good swatch patterns, because the edges blend together seamlessly
These are bad swatch patterns, because the edges do not blend together seamlessly
Section 3. Desktop
3.1 SITEWIDE HEADER & FOOTER
The header and footer backgrounds extend to the edges of the user’s viewport
see section 1.4 for detail on homepage mock up requirement
Header background — choose one

Header
Solid color (provide hex #)
OR Required
Seamless, repeatable swatch (see 3.0.2)
Body
Footer background — choose one

OR
Footer
3.2 HOMEPAGE LAYOUT
3.2.1 FOREGROUND
Foreground: Search field & button: Required

Additional creative content: Optional
Max dimensions: 978px x 700px Required

Transparent or solid background (if solid, must be exactly full 978px x 700px dimensions)
Export as JPG or PNG (required if transparent), remove prompt text “Street Address or Zip”
Include layered content in submitted Homepage PSD
Foreground Area
Section 3. Desktop
3.2 HOMEPAGE LAYOUT (continued)
Foreground Examples
EXAMPLE A: Solid backdrop (required dimensions 978px x 700px)
EXAMPLE B: Transparent backdrop, with swatch background (maximum dimensions 978px x 700px)
EXAMPLE C: Transparent backdrop, with solid background (maximum dimensions 978px x 700px)
Section 3. Desktop
3.2.2 BACKGROUND
Background — choose one

OR
OR
Required
Full-width background image
Required height: 700px
Minimum width: 1920px
Resolution: 72px dpi
File type: JPG or PNG
No text or interactive content; position will vary based on screen size.
Background Area
Section 3. Desktop
Background Examples
EXAMPLE A: Solid color
EXAMPLE B: Repeatable swatch
OPTION C: Full-width background image

Section 3. Desktop
3.3 UPSELL IMAGE

Recommended width: 300px
Recommended height: 200px
Accepted file types: Optional
PNG with transparent background recommended
Upsell Image
Upsell category
Upsell choice
Upsell choice
Upsell choice
Cancel Add to Cart

Section 3. Desktop
3.4 MENU PAGE LAYOUT OPTIONS
3.4.1 Category List — choose one
Down the Left (recommended for products in list view) Across the Top (recommended for products in grid view)
3.4.2 Category Header — choose one
None Image Only
Image
Text Only Image & Text
Category Header Text Image
Category Header Text

Section 3. Desktop
3.4 MENU PAGE LAYOUT OPTIONS (continued)
3.4.3 Category Description — choose one
Hide Category Description on Menu Page Show Category Description on Menu Page
Category Header Category Header

This is the category description, which sits directly below
the category header (if present).
3.4.4 Product List — choose one
List View With Images List View Without Images Grid View With Images
Type something
Product Name Product Name
Image Price and Cal Price and Cal
Product description here Product description here Image Image

Image Price and Cal Price and Cal Product Name Product Name
Product description here Product description here Price and Cal Price and Cal
Product description here Product description here

Image Price and Cal Price and Cal
Product description here Product description here
Image Image
Price and Cal Price and Cal
Image
3.4.5 Product Description, Menu Page — choose one
Show Product Description on Menu Page Hide Product Description on Menu Page
Type something
Price and Cal Image Price and Cal
Image
Product description here

Image

Image

Section 3. Desktop
3.4 MENU PAGE LAYOUT OPTIONS (continued)
3.4.6 Product Price, Menu Page — choose one
Show Product Price on Menu Page Hide Product Price on Menu Page
Type something
Price and Cal Image Cal
Image

Image

Image
3.4.7 Popup Modal Layout — choose one
Image Left, Text Right Image Centered, Text Below No Image

Type something
Product Name
Product Name
Price and Cal
Image Price and Cal Image
Product Name
Price and Cal
3.4.8 Product Description, Popup Modal — choose one
Show Product Description on Popup Modal Hide Product Description on Popup Modal
Type something
Product Name
Product Name
Image Price and Cal Image Price and Cal
Section 3. Desktop
3.5 SSO BUTTON
For Each Button

Required resolution: 72 dpi
Transparent Background
Total dimensions (two buttons + transparent padding):

Required resolution: 72dpi
Optional
Transparent Background
How would you like to checkout?
Log into account Create an account Checkout as guest

(existing users) (easy next time) (no sign up required)
Sign in with Provider

BUTTON TEXT IS
CUSTOMIZABLE
Create an Account TO YOUR CHOOSING
Section 4. Mobile Web
Colors will be pulled from Global Colors (section 1.4) and desktop design.
Defaults mobile fonts will be used unless otherwise requested.
4.1 MOBILE WEB CLIP
Requirements Mobile Web
No transparent background - must have color

End result when someone
No rounded corners, no borders, must be square
pins your site to their
PNG must be 24-bit, RGB color
iOS home screen
This can be same as App Home Screen Icon 5.4.1
Minumum dimensions: 180px x 180px, 72px dpi Required
4.2 HERO IMAGE
Requirements Mobile Web
Displayed on site home screen

Header
Image should not have same background color as header
Static image only - no buttons or interactive elements
Required dimensions: 1500px x 1200px, 72px dpi

Hero Image
Accepted file type:
Required
Form Field
Button
Section 5. Mobile App
5.1 COLORS
5.1.1: Body Text — choose one
Black
(Hex Value: #000000)
Dark Gray
(Hex Value: #4D4D4D) Header Background
Header Text
5.1.2: Header Background & Header Text
Top bar of app Body Text
Color selections must have minimum 4.5:1 contrast
Text: Hex color

Background: Hex color (Cannot be white)
Body Accent
5.1.3: Action Button Background & Action Button Text
Primary action buttons at bottom of screen
Color selections must have minimum 4.5:1 contrast
Text: Hex color
Background: Hex Color (cannot be white, light gray

#EEEEEE or same as 5.1.2 background)
5.1.4: Body Accent Color — choose a color
Color for accent features used on white background, e.g.

Action Button Background
quantity selector, text links
Action Button Text
Must have a minimum of 5.25:1 contrast against white

background #FFFFFF
5.2 FONTS
Requirements Mobile App
We use Helvetica and Roboto as default font families for iOS and Android, but clients can choose to override
the default fonts if they choose.
Any replacement font family must offer regular, bold, and condensed styles. Or you can replace a single style Optional
(with a comparable regular, bold or condensed style) and leave the other(s) as the default.
Fonts must be licensed for use in mobile apps. This is different from a license for web use.
5.2.1: Default Font Styles — replacement optional
iOS Android
Helvetica Regular Roboto Regular

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
Helvetica Bold Roboto Bold

Helvetica Condensed Roboto Condensed

5.3 IN-APP IMAGES
5.3.1: iOS Splash Screen Mobile App
Loading screen for a variety of iOS device sizes

Must have a background color (not transparent)
No text, excepting logo (for ADA reasons)
Splash image typically appears for less than a single second, so simple is better
Multiple sizes required:

320px x 480 px, Splash
640px x 960 px, Image Required
640px x 1136px,
750px x 1334px,
1242px x 2208 px

5.3 IN-APP IMAGES (continued)
Header
5.3.2: Hero Image Mobile App
Displayed on app home screen

Image and app shouldn’t have the same background color Hero Image
Static image only - no buttons or interactivity
Required
5.3.3: No Stores Available Image Mobile App Header
Address Search Bar

Displayed on location search screen when there are no results
Background must be transparent

Required height: 600px Image
Required resolution: 72px dpi Required
5.3.4: No Recent Orders Image Mobile App Header
Displayed on recent orders screen when there are no results


Image

5.3 IN-APP IMAGES (continued)
5.3.5: No Favorites Image Mobile App Header
Displayed on favorites screen when there are no results


Image
5.3.6: Feedback Image Mobile App Header
Displayed on bottom of screen after user submits app feedback


Required height: 600px Image
Required resolution: 72px dpi Optional
5.3.7: Start Order Icon Mobile App Header
Displayed on home screen

Clients can choose from one of the new order / menu icons, or provide an icon
that matches that style Hero Image
Required dimensions: 56px x 56px, 72px dpi Required
Default
Choices
provided
by Olo
5.4 APP STORE SUBMISSION
5.4.1: iOS & Android Home Screen Icon Mobile App
No transparent background - must have color End result when someone

No rounded corners, no borders downloads your app
PNG must be 24-bit, RGB color
Required iOS dimensions: 1024px x 1024px, 72px dpi Required

Required Android dimensions: 512px x 512px, 72px dpi
5.4.2: App Description Text Mobile App
Short description - Android Google Play only - maximum 80 characters

Required
Text description - iOS App Store & Android Google Play store - maximum 4,000 characters
5.4.3: Android Feature Graphic Image Mobile App
• This is the feature graphic at the top of your Store Listing page in the Play Store app or site
• Do not include any copy or important visual information near the borders of the asset, specifically near
the bottom third of the frame
• Try to center align any logo/copy information in the vertical and horizontal center of the frame
• If adding text, use large font sizes
• Your graphic may be displayed alone without the app icon
Optional
(PNG must be 24-bit, with no alpha)

Customer Assets Styleguide: Updated June 16, 2017

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Customer Assets Styleguide: Updated June 16, 2017

Încărcat de

Drepturi de autor:

Formate disponibile

Customer Assets Styleguide

Updated June 16, 2017

Section 1. Global Assets

Requirements Desktop Mobile Web App

Minimum dimensions: 125px x 125px, 72px dpi

Preferred ﬁle types: Required Required Required

Requirements Desktop Mobile Web App

Square dimensions: Favicon

Requirements Desktop Mobile Web App

Arial Lucida Console

We do support the following font foundries:

Accepted ﬁle types:

Requirements Desktop Mobile Web App

Please provide us with 2 to 4 brand colors.

These colors will be used as core colors across all platforms.

1.5 CATEGORY IMAGES

Requirements Desktop Mobile Web App

Separate image for each menu category.

Required resolution: 72px dpi

Accepted ﬁle types:

1.5.2 CATEGORY IMAGES (MOBILE WEB & APP)

Requirements Desktop Mobile Web App

Separate image for each menu category.

Required resolution: 72px dpi

1.6 PRODUCT IMAGES

Requirements Desktop Mobile Web App

Separate image for each menu item.

Required resolution: 72px dpi

Accepted ﬁle types:

1.6.2 PRODUCT IMAGES (PLACEHOLDER)

Requirements Desktop Mobile Web App

A placeholder image to display when no product image is assigned. Helps to

Same requirements as 1.6.1 Product Images (Menu Items). We

2.1 EMAIL HEADER IMAGE

If not provided, logo will be used

Required resolution: 72px dpi

Accepted ﬁle types:

2.2 EMAIL FOOTER IMAGE (Welcome Email ONLY)

Applies to Welcome Email only; not supported on order speciﬁc emails

Required resolution: 72px dpi

Accepted ﬁle types:

Email Header Image

Email Footer Image

3.0.1 ADA COMPLIANCE

• Text and images of text have a contrast ratio of at least 4.5:1

Required swatch resolution: 72px dpi

3.1 SITEWIDE HEADER & FOOTER

Header background — choose one

Solid color (provide hex #)

3.2 HOMEPAGE LAYOUT

Foreground: Search ﬁeld & button: Required

Max dimensions: 978px x 700px Required

3.2 HOMEPAGE LAYOUT (continued)

EXAMPLE A: Solid backdrop (required dimensions 978px x 700px)

3.2 HOMEPAGE LAYOUT (continued)

Background — choose one

Solid color (provide hex #)

3.2 HOMEPAGE LAYOUT (continued)

EXAMPLE A: Solid color

EXAMPLE B: Repeatable swatch

OPTION C: Full-width background image

3.3 UPSELL IMAGE

Required resolution: 72px dpi