Great product Experiences cross a fine line between being intrusive and being unnoticed by the end-user. Your Experiences should feel perfectly at home in your product to achieve their goal.

In this lesson, you'll learn how to achieve that native look for your Chameleon Experiences.

There are 2 ways you can apply styling to your Experiences:

👉 Let’s see the differences between them and how you can apply your brand style:

Go ahead and add your brand colors in the Dashboard, and create a few Templates to see how your Experiences will look on your website. You can adjust components in the Builder, and use CSS to fine-tune your Experiences.

🎯 You can find a comprehensive list of CSS styling options here.

It’s tempting to use the same colors, fonts, and images in your Experiences as you have in the rest of your product. We recommend you make your Experiences stand out so that users will notice them.

🪄 Use background colors that are contrasting and complementary to your underlying app color. This way, your users will notice it and understand you are guiding them through your product.

🪄 Use your brand fonts, visuals, or custom shapes to ensure a consistent look throughout your product. Apply the same style to all types of Experiences, be it a new feature Tour or a simple modal.

🪄 Use a consistent style for any entry animations you set to display your Experiences.

👉 Continue learning about leveraging data in Chameleon to enrich your Experience analytics and targeting.