Logos

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. 

Header Logo - The Header Logo appears at the top of your Help Center and serves as the primary brand identifier across all pages. It helps users instantly recognize your company or organization while navigating support content. For best results, use a high-quality horizontal logo with a transparent background that remains clear and readable on both desktop and mobile devices.

Footer Logo - The Footer Logo is displayed at the bottom of your Help Center pages and reinforces your brand presence throughout the user experience. This logo is typically smaller and can be a simplified or alternate version of your primary branding. Ensure the design maintains visibility against the footer background color and aligns with your overall brand style.

Favicon - The Favicon is the small icon shown in browser tabs, bookmarks, and saved shortcuts for your Help Center website. It helps users quickly identify your site when multiple tabs are open. Use a simple, recognizable square icon—such as your brand mark or initials—that remains legible at small sizes.

Font Styling

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 in TIFF format are compatible with Prado. Don't see the font you want? Send us a message at support@getprado.com

Font Styling: 

1. Title Font - used once across the page, usually at the page's hero section as a heading
   • Styling label: "Regular/H 1 - Hero Title"
   • Weight Options: Semi-Bold, Medium, Regular
2. Sub-Title Font - used multiple times across the page, in this case, as a heading for a product card
   • Styling label: “Regular/H 2.1 - Sub-Title”
   • Weight Options: Semi-Bold, Medium, Regular
3. Body Font - used multiple times across the page as a primary size for copy (as a page's hero heading supporting copy, as a product name's description (in price), as item price, button labels, etc)
   • Styling label: "H 3.1 - Body",  "H 3.2 - Body", "H5 - Body", etc
   • Weight Options: Semi-Bold, Medium, Regular
4. Captions Font - used multiple times across the page as a primary size for secondary labels (tag/pill labels, )
   • Styling label: “H 4.3 - Title Captions”

Website Colors: ADA Compliance 

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

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

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:

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

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

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

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

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