Pages 2.0 | Create and Manage Brand Styles

Pages 2.0 refers to the new version of Happeo Pages, released on April 2, 2025. All Happeo accounts created from this date onward use the new page editor by default.

Important note: Brand styles is an exclusive Pages 2.0 feature. Please refer to this article for Pages 1.0.

What are Brand Styles?

Brand Styles define your organization’s visual identity in Pages 2.0. They allow you to set styling defaults such as colors, typography, and element styles to ensure a consistent look and feel across all Page Groups.

When you create and activate a Brand Style, all new Pages 2.0 content automatically inherits the defaults you’ve set. You can also create additional Brand Styles for specific needs – like sub-brands, departments, or seasonal campaigns – and apply them to individual Page Groups directly from the editor.

Brand Styles give teams a consistent visual foundation when building Pages, while still allowing flexibility to adjust certain style choices within the boundaries you define.

How to create a Brand Style

Note: Brand styles are created by admins and users who have branding permissions. Learn more.

To create a brand style:

1. Click your avatar at the top-right corner of the main navigation.
2. Select Admin Settings.
3. Go to Branding.
4. Navigate to Pages 2.0.
5. Click Create style.
6. Name your brand style by clicking the “My style” text.
7. Define brand style foundations.
   1. Colors: Set the color scheme that will be used for page headers, sections, and widget backgrounds.
      1. For example, in the page editor, when page owners or editors modify the styling settings for a widget, they can choose from a list of colors provided by the brand style associated with the page group.
   2. Typography: Define font styles and formatting.
8. Customize brand style elements.
   1. Widgets: Control widget appearance with padding, background, rounding, borders, and shadows.
   2. Sections: Set the spacing around content within sections and their overall background color.
   3. Hero: Determine the page hero's background color and its vertical size.
   4. Navigation: Adjust the navigation bar's background color, color of active links, and color for a secondary state of active links.

Foundations

Under Foundations, you can establish the core visual elements of your brand by defining its color palette and customizing its typography.

Colors

Here, fixed brand colors are defined in the Colors and Logos section used for header background and text colors. 

Your brand style includes five defined colors: Lightest, Light, Accent, Dark, and Darkest. To ensure consistency, please follow the naming convention. For example, the 'Lightest' color should represent the lightest shade in your palette, and the 'Darkest' color should be the darkest. Once set, users building Pages 2.0 content will be able to use these colors across all design elements.

Note: Page header backgrounds will automatically adopt the accent color by default.

How to edit a color

To edit a color, hover over it and click the Edit icon. You'll then have the option to choose between a solid color or a gradient.

Solid color:

If you select a solid color, you can directly adjust the HEX code and the color name.

Gradient:

When creating a gradient, you can:

• Adjust HEX codes: Modify the existing HEX codes to your preference.
• Add colors: Click Add color within the Color field and input additional HEX codes.
• Delete colors: Click the trash bin icon to the right of a color to remove it.
• Adjust color stops: Either manually type in values (between 0-100) or use the white draggers located on the gradient preview at the top.
• Choose gradient type:
  • Linear: Creates a gradient that progresses in a straight line, either horizontally, vertically, or diagonally, depending on the gradient degree.
  • Radial: Creates a gradient that radiates outwards from a central point.
• Adjust gradient degree: Control the direction of the gradient. For example, a 0-degree setting will make the gradient go from top to bottom, while a 90-degree setting will make it go from left to right.
• Name the gradient: Type in a descriptive color name.

Once you've made your adjustments, click Save.

How to add a custom color or import from a URL

1. Click Add custom color to create a personalized color. Provide a name and enter the HEX code, or use the color selector (after clicking the HEX input box).
2. (Alternatively): Click Import colors from URL to add custom colors. This option enables you to import colors from a website.
   1. Copy-paste the website URL in the input box.
   2. Click Import colors.
3. Once you’re done, click Save.
4. Manage custom colors: Edit or delete custom colors by hovering over them and clicking the pencil or trash bin icon.

Typography

Here, you can find an example of what each header looks like by default.

Light and dark mode: You can toggle between light and dark mode by clicking the toggle at the top right of the page.

• Hero title: The main title of a page or section, usually the largest and most prominent text on the screen.
• Heading 1-3: Hierarchical headings that are used to organize content within a page. Heading 1 is the largest and most important, followed by Heading 2 and then Heading 3.
• Collapsible section header: The title of a section that can be expanded or collapsed to reveal or hide its content.
• Widget header: The title of a widget.
• Quote: The text that represents quotations (i.e. in the Text Widget).
• Body text: The main text of a page.
• Banner button text: The text shown in the banner widget button.
• Link text: The visible portion of a hyperlink.
• Navigation text: Text used in a page’s navigation menu.
• Breadcrumbs text: A trail of links that shows the user's current location within a page’s hierarchy.

Click on any type of text to access the editor and modify:

• Font family: Select your desired font. Available fonts are managed in the Branding > Fonts section.
• Font weight: Choose the thickness of the font (e.g., light, regular, bold).
• Font size: Set the font size in pixels (PX) or relative units (REM).
• Dark text color: Choose the text color to be used on light backgrounds.
• Light text color: Choose the text color to be used on dark backgrounds.
• Line height: Adjust the vertical space above and below the header text. Enter a value in pixels (PX).
• Letter spacing: Adjust the horizontal space between letters in the header. Enter a value in pixels (PX).

Once you are satisfied with your adjustments, click Save.

Note: Customization options may differ between text types.

Elements

Widgets

Define the visual properties of a widget. The primary elements are padding, background color, rounding, border, and shadow.

• Padding: Controls the space between the widget's content and its border, adjustable from 8px to 64px.
• Background Color: Sets the color for the widget's background area. Color visibility increases with larger padding.
• Rounding: Adjusts the curvature of the widget's corners, ranging from 0px (sharp) to 100px (fully rounded).
• Border: Toggles a colored border around the widget.
  • Direction: Specifies the border's location: all sides, top, bottom, left, or right.
  • Color: Sets the color of the border.
• Shadow: Adds a shadow effect behind the widget, with options for None, Small, Medium, or Large.

Sections

Customize sections by adjusting their padding and background color.

• Padding: This controls the amount of empty space around the content inside a section. It can be adjusted from 8px to 64px. Increasing the padding reduces the area available for any widgets placed within that section.
• Background Color: This sets the color for the section's background.

Hero

Establish the background color and height of your page headers (i.e. hero).

• Text Style: This element inherits its style from the ‘Typography’ section. To modify the text appearance, adjust the settings within the ‘Typography’ section under ‘Foundations.’
• Background color: Choose the background color for the hero.
• Height: Set the desired height of the hero section in pixels by entering a value in the input field.

Important note: Both the hero background color and the accent color influence the appearance of the hero background color. However, if you set a hero background color directly in the hero settings, it will override the accent color setting.

Navigation

Customize the navigation background color, active color, and secondary active color.

• Primary navigation color: Choose the background color of the navigation bar.
• Active color: Choose the color of the active item (e.g., the currently viewed page).
• Add dark active color: Enable this when your active text color is too light to be read on a light background. The dark active color is applied for dropdowns, subpages, table of contents, and breadcrumbs.

How to lock a Brand Style

Brand Style Locking is a toggle that can be applied which enforces the design choices set in your Brand Style. Users will no longer be able to adjust visual elements such as Widgets, Sections, Hero, or Navigation from within the editor – meaning properties like padding, rounding, and background color stay exactly as defined.

For example, if you lock a Brand Style where Sections use the Accent Color (e.g. Green), every Section in Page Groups using that style will appear green — and users won’t be able to change it to another color in your palette.

This is ideal for organizations that want to maintain strict brand consistency and simplify page creation by removing styling decisions.

Coming soon: Partial locking

We’re working on a more flexible version of Brand Style Locking. Soon, you’ll be able to offer a controlled set of options instead of fully locking a setting.

For example, instead of locking all Section backgrounds to Green, you might allow editors to choose between Accent Color (Green) or Dark Color (Mustard) – giving them creative freedom within defined boundaries.

Learn more about Brand Style Locking.

How to set a Brand Style as ‘Default’

Setting a Brand Style as default makes it the default visual theme for all new Page Groups created in Pages 2.0 – whether from scratch or using a template. It applies your chosen fonts, colors, and element styles to ensure brand consistency from the outset.

Note: If a Brand Style is set as Default, a Default tag will appear next to its name in the page editor under Styles.

By default, Happeo’s own style is applied until you create a custom Brand Style and set it as the default. Once set, your custom style will automatically apply to all Page Groups, including those created earlier with Happeo’s fallback style.

You can still manually apply other Brand Styles to individual Page Groups, but the Default Brand Style is always the starting point for new content.

To activate a brand style: 

1. Click your avatar at the top right corner of Happeo’s main navigation.
2. Select Admin Settings.
3. Go to Branding and then to Pages 2.0.
4. Click the brand style you wish to set as your default brand style.
5. Select Set as ‘Default’ brand.

Note: Only one Brand Style can be set as default at a time. You can switch the default style at any point, but doing so will immediately apply it to all existing and new Page Groups.

How to create additional Brand Styles 

While you can only have one default Brand Style, it is possible to make additional brand styles that you can switch to within the Pages 2.0 editor. For detailed instructions on creating brand styles, please refer to the preceding section titled ‘How to create a brand style.’ 

To learn more about using secondary brand styles as a page group owner or editor, please refer to this article.

How to duplicate a Brand Style

Note: Brand styles can only be duplicated by admins and users with branding permission.

To duplicate a brand style:

1. Go to Admin Settings > Branding > Pages 2.0.
2. Hover over the brand style you want to duplicate.
3. Click the duplicate icon (paper stack).

The brand style will be copied and found at the bottom of the list with “copy” next to its name.

How to delete a Brand Style

Important: Please note that deleting a brand style is irreversible. Once deleted, it cannot be recovered.

Note: Brand styles can only be deleted by admins and users with branding permission.

To delete a brand style:

1. Go to Admin Settings > Branding > Pages 2.0.
2. Hover over the brand style you want to delete.
3. Click the trash bin icon.
4. Confirm deletion.

The brand style will then be deleted from the list.

How to edit a Brand Style

To edit a brand style:

1. Go to Admin Settings > Branding > Pages 2.0.
2. Hover over the brand style you want to edit.
3. Click the pencil icon.
4. Make any changes you wish.

Edits made to a Brand Style that is already in use – whether its the default brand style or a secondary style – will automatically update all content that uses it. The only exception to this, is when elements within pages have style overrides.

What are style overrides?

When you create a Brand Style, all Page Groups start from a consistent visual foundation, with default settings for colors, typography, and element styles to ensure brand alignment. However, those creating and managing pages still have flexibility to make adjustments within your approved parameters. 

For example, changing a section’s background color or a widget’s padding. When these local changes are made, they override the default Brand Style settings for that specific element – this is known as a style override. 

Note: Style overrides are not possible if a Brand Style is locked. This is because it revokes access to the styling settings of elements within the Pages 2.0 editor. This ensures the Brand Style is always enforced, and any updates made in the Admin Panel automatically apply to all Page Groups using it. Learn more about Brand Style Locking.

Making adjustments to elements within a page triggers a confirmation modal to appear from the styling panel. This informs the user that they’re about to create an override.

Once an override is applied, the element becomes disconnected from the Brand Style and will no longer reflect edits or updates made to that particular Brand Style from within the Admin Panel. 

To bring an element back into alignment with the Brand Style, you’ll need to reset it so it inherits the default settings of your Brand Style.

How to reset to your default Brand Style

The Reset to style default function enables users to easily bring these customized pages back in line with the original brand style selected for the page group. 

Here are some examples of where this may come in useful in realigning your content and improving brand governance:

1. 

   Realigning content over time: Your Brand Style may have been in use for some time, with teams creating pages and occasionally applying style overrides – for example, changing section backgrounds to other approved colors. Later, you decide to update your Brand Style so all section backgrounds use your Accent Color – say, green. However, any elements previously overridden won’t reflect this change. By using Reset to style default, you can quickly reapply the updated style settings across pages, ensuring everything is visually aligned with your latest brand direction.

2. Supporting experimentation: A user may experiment with different layouts, colors, or padding but later decide the changes aren’t quite right. The Reset to style default button acts as a safety net – allowing them to instantly revert individual elements to the original Brand Style without manually undoing each change or rebuilding the page from scratch.

You can reset overrides and restore the original brand style at two different levels:

1. For a specific section or widget: If you only want to reset the changes made to a single component, navigate to that section or widget and click the edit icon. In the Styles tab, you will see a message indicating that the styles have been customized. Click the Reset to style default button within this message to revert that specific component to the original brand style settings.
2. For an entire page group: To remove all custom overrides and restore the brand style across an entire page group, navigate to the main Styles tab in the left-hand page editor menu. A message will be displayed at the top, stating that the brand style has been customized. Click the Reset to style default button to revert all components in the page group to their original brand style settings.

FAQs

Understanding the basics

How will Brand Styles for Pages 2.0 interact with Page Group Styles in Pages 1.0?

The styles for Pages are set by their respective editors: Page Group Styles in Pages 1.0 and Brand Styles in Pages 2.0. Moving forward, Pages 1.0 styling will remain unchanged. Admins and users with branding permissions will be able to set primary and secondary brand colors, as well as typography and elements. Once configured, these brand styles for Pages 2.0 can be applied to all page groups and pages automatically, ensuring brand consistency across the intranet. Importantly, Brand Styles (Pages 2.0) and Page Group Styles (Pages 1.0) are independent and will not interact or interfere with each other.

Applying and updating styles

What happens if I replace our default Brand Style with a new Brand Style?

When you change the default Brand Style, all page groups currently using it will automatically update to reflect the new color scheme.

If you’d like to apply the new style to page groups that aren’t set to the default, you can do this in two ways as an admin:

Admin Settings:

1. Navigate to the Admin Settings > Page Groups
2. Click the three dots next to a page group
3. Click Edit page group
4. Go to Styles
5. Hover over the Default style and click the blue checkmark icon
6. Your changes will be saved automatically

Page group:

1. Navigate to the page group
2. Click your avatar at the top right corner of the main navigation
3. Toggle Admin (this allows you to edit the page, even if you are not an owner or editor)
4. Click the pencil icon at the top right corner of the page to enter the page editor
5. Go to Styles
6. Hover over the Default style and click the blue checkmark icon
7. Your changes will be saved automatically

What happens if I make changes to a Brand Style?

Updates to Brand Styles, irrespective of whether they’re locked or not, will reflect in pages using them – with an important caveat. If elements within a page (like Widgets, Sections, Hero, or Navigation) have been overridden – meaning the editor manually changed styling from the default – those elements are considered disconnected from the Brand Style. 

As a result, updates to the Brand Style will not apply to them. However, if a new Brand Style is applied to a page group from within the editor, all elements (with default or override styles) will update to reflect the new style.This ensures that your branding remains consistent across all new and existing content.

Can I force-apply a default brand style to all page groups?

Currently, it is not possible to force-apply a default brand style to all page groups at once. When a default brand style is set, it will only be applied to page groups using the default style. 

This is due to a hierarchical system: editor changes take precedence over brand styles, and brand styles take precedence over the base Happeo default. Essentially, it's a layered structure where each level builds upon the one below. Therefore, applying a brand style universally would conflict with any existing custom edits made within individual page groups. While a "force apply" feature is under consideration for future development, the current system prioritizes preserving granular customizations.

Customization and precedence

Can I customize the brand style for individual pages within the page editor?

No, it is not possible to edit a brand style from within the page editor itself. You can only select and apply existing styles there.

To edit or create Brand Styles, you must be an Admin or have branding permissions. You can do this by:

• Navigating to Admin Settings > Branding > Pages 2.0.
• Alternatively, from the page editor, click Styles > Manage Styles.

Can I use custom fonts in my brand style?

Yes, you can incorporate custom fonts for a fully branded experience.

1. Navigate to Admin Settings > Branding > Fonts.
2. Follow the instructions to upload your custom font files.
3. Once added, your custom fonts will be available in any font list, including when you define the typography for your brand styles.

Can I customize parts of my pages even when a Brand Style is applied?

Yes – as long as Brand Locking is not enabled for the active Brand Style. You can adjust styles for individual elements by clicking the cog icon on a widget, section, or header, or from the navigation tab. These customizations will override the default settings from your Brand Style for that specific element.

What happens to my customizations if I later change the Brand Style?

When you customize an element (e.g., change background colour, padding, etc.), it becomes disassociated from the core Brand Style. This means that future changes to that Brand Style in the Admin Settings will not affect those customized elements. If you want them to reflect new Brand Style changes, you’ll need to either revert the overrides or apply a different Brand Style entirely.

What happens if I delete a custom color from a Brand Style?

Impact on pages

• Immediate removal – When you delete a custom color from a brand style, it is immediately removed from the color palette available to all page groups using that brand style.
• Visual changes – Any pages currently using that color will keep displaying it until you manually update them. We recommend reviewing this action carefully to understand its impact across your pages.

Update affected pages

If specific pages were heavily reliant on the deleted color, you might need to adjust their color settings manually. 

Page group owners and editors can use the page editor to modify the color settings of individual elements like headers, sections, and widgets.

Alternatively, you can manually update these page groups in two different ways:

1. Admin Settings

As an admin, you can edit a page group through the Admin Settings:

1. Navigate to the Admin Settings > Page Groups.
2. Click the three dots next to a page group.
3. Click Edit page group.

2. Page group

As an admin, you can edit a page group by navigating to the page group and toggling admin mode.

1. Navigate to the page group.
2. Click your avatar at the top right corner of the main navigation.
3. Toggle Admin (this allows you to edit the page, even if you are not an owner or editor).
4. Click the pencil icon at the top right corner of the page to enter the page editor.

Important considerations

• Before deleting a custom color, consider its impact on existing pages.
• After making changes, test the affected pages to ensure the desired visual outcomes
  • Duplicate the brand style, delete the color from the duplicate, and apply it to a page group.
• If possible, maintain a version history of your brand style to revert to previous versions if needed.
  • To create a version history, we recommend that you create a copy of the original as a backup.

Feedback

Got any feedback for us regarding Pages 2.0 Help Center content? Please fill out this form.