All about the brand settings

Each Foleon Doc also has its own brand settings. This is where you set global styling that applies to an entire Doc. You can edit and save style elements like fonts, buttons, and text links — to use them throughout your Foleon Doc.

Brand settings

When you click menu in the top-left corner of your editor, you'll find the brand settings. We highly recommend setting your brand before creating new pages, blocks, columns, and elements.

The style you set here will automatically apply to all content within a Foleon Doc and can be overridden on the element level. The brand settings of the last created Doc in a project will also automatically copy over to a new Foleon Doc.

Click brand to see the styling options pop up on the right side of your screen:

1. Brand Kit

With a Brand Kit, you manage your brand centrally, ensuring all Foleon Docs are automatically on-brand. Add your logo, set a color palette, choose typography, and more — helping content creators get off to a flying start.

If you've set up a Brand Kit, click apply Brand Kit to make sure you're on-brand. 

2. Logos

Here you can set logos for the navigation bar and the icon for the browser tab — also known as favicon.

• Navigation bar
  As the navigation bar is 57 pixels high, we recommend your navigation bar image to have the same height. Next to that, a rectangular logo in landscape orientation fits best.

  The optimal image format is SVG because it auto-scales. If you can, add some white space to the bottom and top of your logo – the logo container in the navigation bar doesn't have margins.

• Browser tab

  The optimal size for creating a favicon is 16x16 pixels, which is the size in which they are most commonly displayed. However, they can sometimes appear in larger dimensions too (such as 32x32 pixels)

3. Colors

Set up shortcuts for swatches in the colors tab, so you don’t have to add the hex code every time you want to add or change the color of an element.

4. Main navigation

• Background — Set the color for the background of the navigation bar.

• Icons & Text — Set the color for the icons and text in the navigation bar.

• Active page indicator — Set a color to underline the active page to show the reader which page they're on. Disable active page name in the Foleon Doc settings if you prefer this not to be visible — e.g., when you only want a logo in the navigation bar.

  
• Reading progress bar — Set a color for the reading progress bar — which you can select in the Foleon Doc settings. 

• Navigation bar font style — set the font for the text in the navigation bar.

5. Page arrows

Set the background color and arrow color for the page navigation arrows. These arrows allow the reader to navigate through your content by clicking them.

You can also set colors for the hover state of these icons — meaning they will change color when your audience hovers over them with their cursor.

6. Custom fonts

Clicking the + icon opens up the font library, allowing you to add custom fonts for the text in your content. You'll find all the Google fonts there, or you can upload your own custom fonts.

7. Font styles

This section enables you to set the following text styling:

• Headers — set the different levels for headers in your content. There are four different levels to set (H1, H2, H3, and H4).

• Paragraph — set the font styling for the main paragraph text in your content.

• Text link — click on "text link" to style the text links in your Foleon Doc. This will affect all the links in the Doc. After styling from the brand settings, it’s also possible to change the styling manually for each link.

• Quote — set the font styling for the use of quotes in your content.

• Numbered list — set the font styling for the use of numbered lists in your content.

• Bulleted list — set the font styling for the use of bulleted lists in your content.

• Table header — set a defaunt font style for a table header.

• Table cell — set a defaunt font style for a table cell.

8. Buttons

This section enables you to set the following buttons:

• Button 1 — click on the button to set the button 1 styling. You can later select this styling in the settings after adding a button to your content. If you want to edit the button on a specific page, you can manually edit it within a specific element.

• Button 2 — set the styling for button 2 if you want to add an alternative button style to the brand settings.

• Hotspot — set the standard styling for the hotspots in your content. If you then want to edit the hotspot on a specific page, you can edit it manually within a specific element.

• Page scroll button — Set the background color and arrow color for the page scroll button on the bottom of the page.
  

9. Divider

Set the standard styling for the dividers in your content. If you then want to edit the divider on a specific page, you can edit it manually within a specific element.

10. Data elements

The data elements give you the option to visualize data. This includes a counter element that counts up to a given value, a bar element that progresses to a given value, and an animated circle element.

Here, you set the default styling for data elements in your content.

When are these settings overridden?

When you've set up brand and you add a new element, the brand style is inherited by default. You can customize an element manually if you want to use a different style. This connection to the brand settings is broken when you set the style to an element on its own.