EveryMundo Design System

Adapt EveryMundo products to your brand

This section is usually reviewed and completed by: UX/UI and/or Branding

We recommend a codeless implementation to get the fastest product delivery. By choosing codeless, you will be able to access a CMS to make changes to colors and fonts in the future on your own, without having to go through EveryMundo to request changes.

The EveryMundo Design System (EMDS) unifies user interfaces (UI) and user experience (UX) of our products, scales improvements in quality, reduces design and development times and serves as single source of truth for design best practices.

It is easy to customize EMDS Tokens to fit your brand with Color, Typography, and Components. 

At the bottom of this page, you will find a link to the Design Survey, where you can upload your website design guidelines. EveryMundo will create a Token Value Proposal for EMDS based on your Design Survey. These are screens that showcase all available tokens personalized to your brand. Together with your design team, you will review and approve them before we start development.

Color Tokens

Below is an example of a set of color tokens and a real life example of how they come together in a Flight Search Panel airModule. See if you can determine where each of the Color Tokens will be used.

Main Colors mark key information and transform to Hover Colors when the cursor touches them.

Context Colors share information with the user.

Utility Colors make up the background, borders, and text.

Typography / Fonts

Styles & variations

You will select:

  • Font styles 1-7
    • This includes details like the Page Title, airModule Title, Fare Card Title, and more.
  • Variants color
    • Determine the color of the text on the page and within Fare airModules
  • Link decoration
    • Including images and descriptions

Components

Components consist of:

1. Buttons: Buttons are used along the flight booking process and give end users the option to see additional results or guide the user through non-booking processes.

2. Forms: End users input or select options from Forms. These include text inputs where the end user can type in their selection, or select an option from multiple choices.

1. Buttons

EMDS includes three types of buttons: Primary, Secondary and Tertiary.

Primary Buttons

For Macro-conversions, like flight search. Primary Buttons are used along the flight booking process.

Primary Buttons EDS examples

Example:

Primary Button EDS Example

 

Secondary Buttons

For micro-conversions, like loading more results. Secondary Buttons are found in airModules with scrolling functionality or when giving users the option to see additional results.

 

Example:

Secondary Buttons EDS example

Tertiary Buttons

For navigation to non-branded forms. Tertiary Buttons are used to guide the user through non-booking processes.

Tertiary buttons EDS

Example:

Tertiary Button EDS Example

2. Forms

Forms come in a variety of designs and functionalities.

Text Field

For navigation to non-branded forms. Tertiary Buttons are used to guide the user through non-booking processes.

Text Field EDS

Example:

Text field EDS example

 

 

Text Inputs

This form is used in filters to prompt users to select a text input from a menu of options. For example, the number of passengers, fare class, or departure and arrival airports.

EDS Text inputs

 

Example:

EDS Text inputs example

Auto-Complete 1

This form is used to capture text input from a menu of options. For example, the departure airport city name or code.

EDS Autocomplete 2

Example:

EDS Autocomplete 2 example

Auto-Complete 2

This form appears in dropdown menus. For example, the dropdown menus found in some airModule filters.

EDS Autocomplete 3

 

Example:

EDS Autocomplete 3 Example

Radio Buttons

This form is used to check on or off certain options, such as Round Trip or One Way options on an airModule filter.

EDS Radio Buttons

 

Example:

EDS Radio Button example

Spin Buttons

This form is used to select the a number input, such as the number of passengers.

EDS Spin Buttons

 

Example:

EDS Spin Button Example

Date Selection

This calendar form is used to select the deperture and return dates.

airModule Date and Budget Filter

Drop Down Menu

Used in navigation elements, dropdown menus, select menus, and autocpmplete menus to select from a list of options.

EDS Drop Down Menu

Tab Reel

This form is used to toggle more information about each option. It can be found in airModules to navigate to each month.

EDS Tab Reel

 

Example:

EDS Tab Reel Example

Table

The table is used to display a list of options along with any features tied to each option, like dates, travel class, and price. The Table airModule is one of the most popular airModules.

EDS Table

 

Example:

EDS Table Example

 

Accordion

The accordion form is used to share large amounts of options in a compressed way. The Destinations Accordion enables airlines to share links to every destination in their route network, organized by country or region.

EDS Accordion

 

Example:

EDS Accordion Example

Bar Graph

Used in Histogram airModules that display the lowest fares by day or by month.

EDS Bar Graph

 

Example:

EDS Bar Graph Example

Page Title Overlay

Used as the main title of the page.

EDS Page Title Overlay

Example:

EDS Page Title Overlay Example

Weather Content Card

Used in our weather forecasting airModule.

Weather forecasting airModule

Fare Card with Button

Used in airModules that display real-time fares and promotions to end-users.

EDS Fare Card Example

Implementation Sections: