Professional Documents
Culture Documents
Customer Assets Styleguide: Updated June 16, 2017
Customer Assets Styleguide: Updated June 16, 2017
1.1 LOGO
1.2 FAVICON
1.3 FONTS
The following fonts are considered web safe and do not require additional
assets:
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 not support Adobe TypeKit, as the Adobe script is insecure and violates
Olo PCI compliance standards.
1.4 COLORS
Requirements Email
Requirements Email
Email
Content
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]
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
Requirements Desktop
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
Requirements Desktop
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
3.2.1 FOREGROUND
Requirements Desktop
Foreground Area
Section 3. Desktop
Foreground Examples
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
Requirements Desktop
Background Area
Section 3. Desktop
Background Examples
Requirements Desktop
Upsell Image
Upsell category
Upsell choice
Upsell choice
Upsell choice
Down the Left (recommended for products in list view) Across the Top (recommended for products in grid view)
Image
Hide Category Description on Menu Page Show Category Description on Menu Page
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
Show Product Description on Menu Page Hide Product Description on Menu Page
Type something
Product Name Product Name
Price and Cal Image Price and Cal
Image
Product description here
Show Product Price on Menu Page Hide Product Price on Menu Page
Type something
Product Name Product Name
Price and Cal Image Cal
Image
Product Name
Product Name
Price and Cal
Image Price and Cal Image
Product description here
Product description here
Product Name
Price and Cal
Product description here
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
Product description here
Section 3. Desktop
Requirements Desktop
Required
Form Field
Button
Section 5. Mobile App
5.1 COLORS
Black
(Hex Value: #000000)
Dark Gray
(Hex Value: #4D4D4D) Header Background
Header Text
5.2 FONTS
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.
iOS Android
Header
5.3.2: Hero Image Mobile App
Default
Choices
provided
by Olo
Section 5. Mobile App
Text description - iOS App Store & Android Google Play store - maximum 4,000 characters
• 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
Required dimensions: 1024px x 500px, 72px dpi