Skip to main content
Achieve supreme brand cohesion

Learn how you can achieve a native look for your Chameleon Experiences.

Tiago Mota avatar
Written by Tiago Mota
Updated today

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:

  • account-wide styling in the Dashboard

  • step-level customization in the Builder.

πŸ‘‰ 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.

You can also use a tool like Contraste, to check if your colors respect the accessibility of text against the Web Content Accessibility Guidelines.

πŸ‘‰ Continue learning about leveraging data in Chameleon to enrich your Experience analytics and targeting.

Did this answer your question?