Branding

In the Branding section, you can change the look and feel of the guide by changing various cosmetic aspects.

Fable comes with deep customization capability which will allow you to have a high degree of control over how your interactive demo looks and feels. You can change every aspect of the guide to match it with your brand. The following interactive demo shows you the various customization options and how you can utilize them to match the demo’s theme to your brand.

• Primary color: This is the color of the main button of the guide. By default, the ‘Next’ button is set to this color but it can be modified as well.
• Background color: This is the color of the background of the guide.
• Border color: This is the color of the border of the guide.
• Font color: This is the color of the text inside the guide.
• Selection color: This is the color of the highlighter which focuses the attention on the element of the page on which the guide is focussed on.
• Font family: This is the font of the text inside the guide. By default, Fable tries to match the font of the guide message to the font of your web page/application.
• Button layout: This sets the width of the button.
• Selection shape: This pertains to the highlighter which focusses the attention on the element of the page on which the guide is focussed on. It has two options:
  • Box: The highlighter is in the shape of a box that encompasses the element of focus.
  • Pulse: The highlighter is in the shape of a pulsating point that is close to the element of focus.
• Padding: This sets the padding the text gets within the guide.
• Border radius: This sets the border radius of both the guide as well as the buttons inside it.

Barring the Selection color and Selection shape, all other settings once applied in a particular screen of the demo, applies it across the entire demo. Both Selection color and Selection shape can be different across different screens of the demo.

After you have matched the look and feel of the demo to that of your brand, we will then take a look at the buttons that are present through out the demo in the guide. Head over the CTAs page to know more about this.