Adjust your default and account styling from the Chameleon dashboard Styling page.
One of the first things you may want to do with Chameleon is to set the default styling of your Experiences, such that when you create any new Experience, it will automatically be according to your brand.
Do that by clicking "Set your brand" on the Styling page.
You can then set your brand colors and font here; this will adjust all the individual styling configurations to smartly match your theme.
You can use your exact fonts in Chameleon; just ensure they are spelled in precisely the same way as on your page. Chameleon then pulls this font from your page when showing any Experiences. You can also use a comma-separated list of fonts to include fallbacks if necessary.
Note: this font may not display in the dashboard or previews, but will work when previewing any Experiences in the Builder.
From the Styling section in the Dashboard, you can also adjust different styling components individually, either as the default for your account, or to apply to a particular Tour.
Here you can set your defaults:
Font - Adjust the fonts used in your Experiences. Chameleon pulls these from the fonts loading on your page
Colors - Adjust the colors for your text, backgrounds, buttons, etc.
CSS - Use custom CSS to achieve a more detailed styling and apply it to all Experiences, any particular Experience, or a specific step.
For more information about Styling for Experiences, click here.
💡 Tip - To avoid confusion between your tour and your interface for new users (or those not totally familiar with your product) you should consider using contrasting / complimentary colors for tours, to help them stand out.