In this article, we will cover where you can apply custom colors across FERMÀT and give tips on which of your brand colors you should use where.

To edit your brand colors navigate to the settings tab in the side menu and then select

With our custom colors functionality you have the freedom to apply subtle pops of brand colors all the way to fully customized layouts. Here are a few popular implementations.

By adjusting just a few accent colors you can create an experience that feels on brand, you can also take it a step further and build something truly unique like Dose has done.

Colors will be applied at the account level and can be overridden with some lander and PDP modules. Here's what you have control over and how that will be applied across the experience.

you will be able to define the following as well as text color on each:

Surface colors define the backgrounds and backdrops for content within FERMÀT. These surface areas are the foundation on which the rest of the experience is built.

This is surface color and text is what will be used as the backdrop for modules and areas of the app that should be considered part of the "base" experience so that surface 2 can be used to pop in comparision.

This surface color and test is what is used to draw more attention to certain areas. In the example above Dose is using a muted green to draw attention to hero sections and subscription offers in the experience.

Your accent color and text will be used for small callout elements through FERMÀT such as badges and chips.

Be sure to select a text colour that provides strong contrast to the accent color. These elements are much smaller in comparison to other areas of the experience.

Button colors define... you guessed it, your button colors. You have two button types that you can customize. Your primary which is used for main actions such as add to cart, and secondary for buttons that don't point directly to the next desired step.

You can choose to keep both of these buttons the same.

Your primary button is used when directing the customer to the next step of the purchase journey. When asking a customer to add a product to bag or to checkout.

Add to Bag in the example above

Your secondary buttons are used when the action is not moving the customer to the next step of the purchase funnel. These buttons are usually directing to additional information or context to inform a purchase.

View product in the example above