Colors guide

All E-Com Plus stores should include Storefront Twbs to improve compatibility between brand colors, store template and third party widgets, keeping as possible a consistent visual identity.

To create a new template, you SHOULD use as possible the default Bootstrap components, and/or adapt them to mirror your theme visual identity.

To create a new widget, you MUST use Bootstrap components the maximum as possible, to follow the theme and store brand visual identity, you should also use CSS vars and utilities.

Brand colors

The merchant would set the $primary and $secondary colors following the store brand.

Primary

Should be used to drive attention to the main tasks that should be done while using the app. It is meant to be used in major interactive elements of the page.

Usage examples:

• Links;
• Call to actions;
• Obligatory forms;
• Check boxes;
• Radio buttons;
• Toggles;

Secondary

Should be used to drive attention in the elements with relevant info, but where the user is not intended to take action.

Usage examples:

• Secondary buttons;
• Badges;
• Sales tags;
• Hotmarks;