All about the brand settings

Each Foleon Doc has its own brand settings — the global styles that define how your content looks. Brand settings control elements like fonts, buttons, colors, and more, so you don’t have to style each one manually.

You'll access these settings when creating a Brand Kit or editing styling on an individual Doc.

In this article

• Accessing the brand settings

• When are these settings overridden?

• How to set your brand styling:
  1. Brand Kit
  2. Logos
  3. Colors
  4. Main Navigation
  5. Page arrows
  6. Custom fonts
  7. Font styles
  8. Buttons
  9. Divider
  10. Data elements

   

Accessing the brand settings

To open the brand settings in a Foleon Doc, click Menu in the top-left corner of the editor, then choose Brand. This panel allows you to define the styles that apply throughout your Foleon Doc.

Brand settings will automatically apply to new content in your Doc. If no Brand Kit is applied, your new Doc will inherit the brand settings from the last Doc created in that workspace.

You can also set custom styles for the tablet and mobile view modes.

• Changes in the desktop mode will apply to desktop, tablet, and mobile
• Changes in the tablet mode will apply to tablet and mobile
• Changes in the mobile mode will apply only to mobile

When are these settings overridden?

After you've set the brand settings — or applied a Brand Kit — the styling will automatically apply to any new elements you add to the page.

You can still manually style individual elements. Once you do, that element is no longer linked to the brand settings. This means that if you later update the brand settings or apply a new Brand Kit, manually styled elements will not be affected — they’ll retain the custom styling you applied.

How to set your brand styling:

Below is a breakdown of the elements you can style using brand settings — either within a Doc or when building a Brand Kit.

---

1. Brand Kit

With Brand Kits, you manage your brand centrally, ensuring consistency across all your Foleon Docs. Add your logo, set a color palette, choose typography, and more — helping content creators start quickly. For maximum control, create and manage Brand Kits from the Brand Console.

2. Logos

Set logos for the navigation bar and the icon for the browser tab — also known as favicon.

• Navigation bar
  We recommend setting the height of your navigation logo to 57px so it matches the height of the navigation bar. 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, as the logo container in the navigation bar doesn't have margins.

• Browser tab

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

3. Colors

In the Colors section, set your default color swatches for quick access throughout your Doc. This helps maintain visual consistency and saves time entering hex codes. 

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

Page arrows let your audience navigate between pages.

• Set the background color and arrow color for the page navigation arrows.
• You can also set colors for the hover state, meaning they will change color when your audience hovers over them with their cursor.

6. Custom fonts

Click the + icon to open the font library, which allows you to add custom fonts for the text in your content. You can find all the Google fonts here, or you can upload your own custom fonts.

7. Font styles

Configure the text for each font style:

• Headers — Set the different levels for headers in your content (H1, H2, H3, H4)

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

• Text link — Style the text links in your Foleon Doc

• Quote — Set the font styling for quotes in your content

• Numbered list — Set the font styling for numbered lists in your content

• Bulleted list — Set the font styling for 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

8. Buttons

Define the default styles for different button types:

• Button 1 — set the style of your primary button

• Button 2 — set the style of your secondary/alternative button

• Hotspot — set the appearance of the interactive hotspots in your content

• Page scroll button — set the background color and arrow color for the page scroll button
  

9. Divider

Set default styling for dividers that separate content sections.

10. Data elements

Data elements give you the option to visually represent data. These include a counter element that counts up to a specified value, a bar element that progresses to a given value, and a circle element in the form of a donut chart

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