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.

💡 Before you set the brand settings, make sure your Brand Kit is set up for your workspace. With a Brand Kit, you manage your brand centrally, ensuring all Foleon Docs are automatically on-brand. 

 

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.

💡 It's also possible to have custom brand settings for the tablet and mobile view modes. Changing the brand settings in the desktop view mode will apply to desktop, tablet, and mobile modes. Changing the brand settings in the tablet mode will apply to tablet and mobile modes. If you change brand settings in the mobile mode, it will apply only to mobile.

Screenshot 2023-04-17 at 09.24.43

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

Screenshot 2023-04-17 at 09.25.06

 

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. 

📖 Learn more in our article Govern your brand with a Brand Kit.

Screenshot 2023-04-17 at 10.35.47

 

2. Logos

 

6397003943f85-1

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

Screenshot 2023-04-17 at 09.25.40

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

Screenshot 2023-04-17 at 09.25.53
  • 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.

    639700400f032
  • 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

639700410cee7
Screenshot 2023-04-17 at 10.41.08
 

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.

💡 Just so you know, if you have your navigation bar set to the bottom bar setting, these arrows will appear in the middle right section of the page.

6. Custom fonts

Screenshot 2023-04-17 at 09.27.39

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.

 

📖 Learn more in our article All about fonts.

63970045caae1

 

7. Font styles

Screenshot 2023-04-17 at 09.27.54

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 default font style for a table header.

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

💡The default font sizes, as set in the Brand Kit or brand settings, are a good starting point. However, you might want to adapt them so they fit your content. Learn more here

8. Buttons

Screenshot 2023-04-17 at 09.28.16

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.
    Screenshot 2023-04-17 at 10.48.50

9. Divider

Screenshot 2023-04-17 at 09.28.24

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.

Screenshot 2023-05-30 at 10.01.06

 

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.