EveryMundo Design System

Adapt EveryMundo products to your brand.

The EveryMundo Design System (EDS) 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.

In short: EDS makes it possible to adapt EveryMundo’s products to your brand.

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

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 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:

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.

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. 

Buttons

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

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

2. 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.

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

Forms

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

Example:

2. 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. 

Example:

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

Example:

4. Autocomplete 3: This form appears in dropdown menus. For example, the dropdown menus found in some airModule filters.

Example:

5. 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. 

Example:

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

Example:

7. Date Selection: This calendar form is used to select the deperture and return dates.

Example:

8. Drop Down Menu: Used in navigation elements, dropdown menus, select menus, and autocpmplete menus to select from a list of options.

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

Example:

10. 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.

Example:

11. 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.

Example:

12. Bar Graph: Used in Histogram airModules that display the lowest fares by day or by month.

Example:

13. Page Title Overlay: Used as the main title of the page.

Example:

14. Weather Content Card: Used in our weather forecasting airModule.

15. Fare Card with Button: Used in airModules that display real-time fares and promotions to end-users.