Logos

Overview:

Three types of logos are used throughout the Menu Ordering System. These logos can be set in your admin system. The header logo is the logo seen in the top navigation of your menu, the footer logo is seen in the footer navigation of your menu, and the favicon logo your shortcut website icon. 

Additional Notes:

Your logos should be uploaded as PNG files. 

Font Styling

Overview:

You can set the fonts types below within Prado. Some fonts are preloaded that work best within Menu Ordering System. If you'd like to add a different font, Google fonts are compatible with Prado. Don't see the font you want? Send us a message at support@getprado.com

Font Styling: 

• Title Font
  • Name 
  • Size
  • Weight
• Sub-Title Font
  • Name 
  • Size
  • Weight
• Body Font
  • Name 
  • Size
  • Weight
• Captions Font
  • Name 
  • Size
  • Weight

Website Colors: ADA Compliance 

Overview:

Be sure to make sure all colors are ADA-compliant for vision-impaired users. Colors of main text or page elements must be contrasting enough to be readable on their background color.

Use Accessibility Color Checker to verify that any customized website colors meet Web Content Accessibility Guidelines. This is very important in order to ensure proper contrast ratios of text and background colors.

Additional Notes:

Colors should be checked against the following:

• Check to make sure any customized colors meet Accessibility guidelines:
• Your Primary Color must be checked against a white background (#FFFFFF)
• Your Brand Dark Color must be checked against your Light Background Color & a White background (#FFFFFF)
• Your Error Primary Color must be checked against a White background (#FFFFFF) & Error Secondary Color background.
• Your Alert Primary Color must be checked against a White background (#FFFFFF) & Alert Secondary Color background.

Website Colors: Breakdown of Color Use Cases

Overview:

We have set up branding to default to colors you set across your menu ordering system. Within in templates you can change configure individual colors or, you can set your defaults and forget it. 

Primary Brand:

Overview:

Your primary brand color is your main brand color. This color will default components like main action buttons 

Where Primary Brand is used:

• Cart Total Background Color
• Email Sign Up Button Color
• Account Button Color
• Notification Background Color
• System Success Color
• One-time Order Header Color
• Subscription Order Header Color
• CTA Button Background
• Map Icon 
• Shopping Cart Icon Background Color
• Cart Total Background Color
• Subscription Order Header Color
• One-time Order Header Color

Brand Light Background:

Overview:

Your light brand color is an accent brand color. This color will default components like secondary or action buttons and alert banners.

Where Brand Light Background is used:

• Your light background can be used for banners 

Brand Dark Background:

Overview:

Your dark brand color is an accent brand color. This color will default components like many background colors, including the footer background and icon backgrounds. 

Where Brand Dark Background is used:

• Footer Background Color
• Shopping Cart Icon Color
• Hamburger Menu Icon Color
• Menu header background color
• Marketing card Background Color

Text Colors:

Overview:

Your text colors are meant for all text on your site. These can be broken out by titles, sub-titles, regular text, and input text. You may choose to have all be one color or default each type to a different specific color.

Where Text Colors are used is used:

• Header Links Color
• Shopping Cart Text
• Category navigation text color
• Main menu header title color
• Main menu header subtitle color
• Subscription menu header title color
• Subscription menu header subtitle color

Icons & Inputs Colors:

Overview:

Your icons should typically default to what you set as your primary brand color, however you can change this to whatever color you think will fit best with your brand. Your input color is the stroke color for input fields. This defaults to a light gray color. 

Where Icons Color is used:

• Shopping Cart Icon Color
• Hamburger Menu Icon Color

Error & Alert Colors:

Overview:

Your error colors are meant to alert users. You have two sets of alert colors. You have error alerts for when an action cant be performed, something fails, or something is incorrect. You also have alert colors that can be used to grab your customer's attention.

Where Error Colors are used is used:

• Error colors can be used when an action can't be complete, like entering an incorrect password
• Alert colors can be used to alert users, something doesn't need to be wrong for an alert color to be present for examples menu upsell ads default to the alert color.
  • Subscription plan description background color 
  • One-time purchase description background color
  • Subscription Upsell ad Background Color
  • Order Minimum Banner Color
  • Coming Soon Map Icon