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: Brand styles is an exclusive Pages 2.0 feature. Please refer to this article for branding support for the legacy version Happeo Pages.

🎯 Who this article is for: Admins and users with the branding permission who are responsible for managing how Pages 2.0 looks and behaves across their organization.

💼 Package requirements: Brand Styles are available to all packages.

🔒 Permissions: Only admins and users with the branding permission can create and manage Brand Styles. Note that this permission covers both creating and editing; it is not possible to grant one without the other. Page group owners and editors can apply an existing Brand Style to a Page Group from the editor, but cannot create or modify Brand Styles themselves.

1. Overview

When branding is managed inside individual pages, small formatting differences build up over time and a single brand update can mean going into dozens of pages manually.

Brand Styles solves this by giving you one place to define how your intranet looks. You set your colors, fonts, and how each element looks in the Admin Settings, then apply it to your Page Groups. From that point on, any updates you make to the Brand Style automatically roll out to the Page Groups using it, as long as their elements haven't been manually overridden.

Brand Styles is built on a simple layered principle: 

• Foundation styles (colors and typography) are always enforced centrally. 
• Element styles (widgets, sections, hero, and navigation) set the default look for each element type and can be customized by editors unless locking is enabled.
• Any manual change an editor makes to an element disconnects it from the Brand Style, meaning it won't inherit future updates until it is reset.

You can create multiple Brand Styles to support different teams or brands, set one as the organization-wide default, and manage everything from a single place.

2. Use cases

• Establishing a consistent visual foundation before teams start building: When you're setting up your intranet from scratch, creating a default Brand Style first means every Page Group starts with the same colors, fonts, and element styling from day one. There's no need to coordinate with individual teams to get everyone starting from the same place.
• Letting editors make styling choices within your approved options: With a Brand Style in place, editors aren't starting from a blank canvas — they're working within a set of colors, section, and widget styles you've already defined. They can make pages feel tailored to their content without needing to make brand decisions from scratch each time.
  • 🔎 If you want even tighter control over what editors can and can't change, see Brand Style Locking.
• Rolling out a rebrand without the manual work: When your colors, fonts, or element styling change, you update the Brand Style once. Rather than a rebrand turning into a manual effort across your intranet, the change is made in one place and flows out from there.

3. Before you begin

• You must be an admin or have the branding permission to create and manage Brand Styles.
• Custom fonts must be added to your platform before they will appear as font options when setting up typography. Navigate to Admin Settings → Branding → Fonts to add them, or see our article for more details.
• If Page Groups are created before a default Brand Style is configured, they will use Happeo's built-in default styling until a Brand Style is set as default. Those Page Groups will need to be manually updated to align to the new default Brand Style once one is configured.
• If you use migration tooling before setting up Brand Styles, your migrated content will default to Happeo's built-in styling. This can result in an inconsistent look across your intranet and require additional cleanup later. We recommend configuring your Brand Styles before creating or migrating content into Pages 2.0.

4. How to create a Brand Style

Creating a Brand Style takes you through three areas of configuration: Foundation styles, Element styles, and optional settings like locking. To get started:

1. Click your avatar from the main navigation.
2. Select Admin Settings.
3. Navigate to Branding → Pages 2.0.
4. Click Create style.

Name your Brand Style

Click the My style text at the top to rename the style. Brand Style previews look similar because they are all based on your organization's core brand identity. A clear, descriptive name (e.g. "Main Brand," "EMEA Sub-brand") makes it easy to identify and update the right style later.

Set up your Foundation styles

Foundation styles are always applied. Editors cannot change them regardless of whether the Brand Style is locked.

Colors

Your Brand Style includes five defined colors with a fixed hierarchy: 

• Lightest
• Light
• Accent
• Dark
• Darkest

🗒 Note: These five colors make up the only color options available to editors when styling pages, regardless of whether the Brand Style is locked or unlocked.

The naming convention matters: Lightest should be your lightest shade and Darkest your darkest, as the hierarchy is used to remap colors when a Brand Style is switched or updated.

Page header backgrounds use the Accent color by default. You can edit any color by hovering over it and selecting the edit (pencil) icon. The editing options include:

• Solid fill
• Gradient
• Custom HEX code
• Import colors from a URL

How to add a custom color

1. Navigate to Admin Settings → Branding → Pages 2.0.
2. Open a Brand Style.
3. Go to Colors under Foundation styles.
4. Click Add custom color.
5. Under Color, type a custom HEX code or click the input field to open the color picker and select a color.
6. Under Color name, click the purple AI icon to accept the generated name, or name the color manually.

How to delete a custom color

1. Navigate to Admin Settings → Branding → Pages 2.0.
2. Open a Brand Style.
3. Go to Colors under Foundation styles.
4. Under Custom colors, hover over a color.
5. Click the trash (bin) icon.
6. Confirm deletion.

🗒 Note: Deleting a custom color removes it from the palette immediately, but any pages already using that color will continue to display it. To remove it, the affected elements need to be reset — either at the element level or from the Styles tab on the page. See Section 9 for details on how to reset.

Typography

Define text styles for: 

• Hero title
• Heading 1-3
• Collapsible section header
• Widget header
• Quote
• Body text
• Banner button text
• Link text
• Breadcrumbs text

For each text style you can configure: 

• Font family
• Font weight
• Font size (PX or REM)
• Text color (light and dark mode)
• Line height
• Letter spacing

Toggle between light and dark mode preview at the top-right while configuring. Available options differ slightly between text types.

Element styles

Element styles set the default look for each element type. When a Brand Style is unlocked, editors can adjust the look of individual elements on a page. When locked, these defaults become the fixed standard across all pages using that Brand Style.

• Widgets: Padding, background color, corner rounding, border (direction and color), shadow (None, Small, Medium, or Large).
• Sections: Padding and background color.
• Hero: Background color and height. 
  • ⚠️ Important: If a hero background color is set here, it overrides the accent color from Foundation styles.
• Navigation: Primary navigation color, active color, and dark active color (used for accessibility when active text is light on a light background).

Once your Foundation styles and Element styles are configured, click Save.

5. How to set a Brand Style as default

Setting a Brand Style as default makes it the starting point for all new Page Groups going forward. A Default tag will appear next to the style name in the editor and in Admin Settings.

1. Navigate to Admin Settings → Branding → Pages 2.0.
2. Click the Brand Style you want to set as default.
3. Select Set as 'Default' brand.

⚠️ Important: Changing the default Brand Style only affects new Page Groups created after that point. Existing Page Groups continue using their currently assigned Brand Style and must be manually updated if you want them to reflect the new default. The former default Brand Style remains intact and continues to apply to any Page Groups that were using it — nothing is reassigned automatically. Only one Brand Style can be set as default at a time. It is not currently possible to force-apply a Brand Style to all Page Groups at once.

To update an existing Page Group to use the new default, you can do this in two ways:

From Admin Settings:

1. Navigate to 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. Your changes will save automatically.

From the Page Group:

1. Navigate to the Page Group.
2. (Admins): Click your avatar at the top right corner of the main navigation and toggle Admin.
3. Click the pencil icon at the top right to enter the page editor.
4. Go to Styles.
5. Hover over the Default style and click the blue checkmark icon. Your changes will save automatically.

6. How to edit a Brand Style

1. Navigate to Admin Settings → Branding → Pages 2.0.
2. Hover over the Brand Style you want to edit.
3. Click the pencil icon.
4. Make your changes and click Save.

The changes apply immediately across every Page Group using that Brand Style. Editors do not need to republish pages for the updates to show.

⚠️ Important: If the Brand Style is unlocked, any elements that editors have manually overridden will not update. They keep their custom look until they are reset. See section 9 for guidance on resetting overrides.

🗒 Note: There is no version history, preview option, or way to revert changes for Brand Styles. Changes are permanent once saved. If editing a style that is already in use, see section 10 before making changes.

7. How to duplicate a Brand Style

1. Navigate 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 copy appears at the bottom of the list with "copy" appended to the name. Rename it to keep your Brand Styles list clear and manageable.

8. How to delete a Brand Style

1. Navigate 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 the deletion.

⚠️ Important: Deletion is permanent. When a Brand Style is deleted, it is removed from the visible list but remains applied to any Page Groups already using it. Those Page Groups are not immediately broken, but we recommend that you manually assign an active Brand Style to them.

9. Understanding style overrides

When a Brand Style is unlocked, editors can manually change how widgets, sections, the hero, or navigation elements look on a page. Any element that an editor customizes is referred to as a disconnected element — it has been changed away from its Brand Style default and will no longer inherit future updates automatically. An element that has not been customized and still follows the Brand Style is referred to as a connected element.

Any time an editor makes a manual change to an element's styling, that element stops following the Brand Style. If the Brand Style is updated later, that element won't pick up the changes.

🗒 Note: Editors can still customize individual elements even when a Brand Style is applied, as long as the Brand Style is unlocked. If you want to prevent this, enable Brand Style Locking before editors start building.

To bring an element back in line with the Brand Style, you need to reset it. There are two ways to do this from the pages editor:

• Element-level reset: Click into the section or widget → Select the settings icon (cog) → Navigate to the Style tab → Select Reset to style default. This restores only that element.
• Page-level reset: From the Styles tab on the page, click Reset to style default. This brings every manually changed element on the page back in line with the active Brand Style. 

🗒 Note: Locking a Brand Style stops editors from making new manual changes, but does not undo any changes that already exist.

🗒 Note: If a Brand Style is applied to a Page Group from within the editor, all elements on that page will update to the new style — including any that had been manually overridden. This is different from editing a Brand Style, where overridden elements are left unchanged.

10. Best practices

How you set up your Brand Styles from the start can save you a lot of cleanup down the line. These tips will help you maintain visual consistency as your intranet grows.

• Decide on locking before editors start building: Locking a Brand Style after pages already exist doesn't undo any styling changes editors have already made. If you know you want tight brand control, it's much easier to enable locking before anyone starts building than to clean things up after the fact.
• Duplicate before editing a live Brand Style: There is no version history for Brand Styles. If you need to update a style that is already in use, duplicate it first, test the changes on a Page Group, and then apply the updates to the live version once validated.
• Keep the number of Brand Styles small: The more Brand Styles you have, the harder it becomes to know which one to update and which Page Groups are using what. Most organizations only need one or two. If you find yourself creating many styles, it's worth stepping back and thinking about whether they can be consolidated.

11. Frequently asked questions

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

Brand Styles (Pages 2.0) and Page Group Styles (Legacy Pages) are completely independent and will not interfere with each other. Legacy Pages styling remains unchanged. Once configured, Brand Styles for Pages 2.0 can be applied to all Page Groups and pages automatically, ensuring brand consistency across your intranet.

Can I edit a Brand Style from within the page editor?

No. You can select and apply existing Brand Styles from the page editor, but you cannot create or edit them there. To create or modify a Brand Style, navigate to Admin Settings → Branding → Pages 2.0, or go to Styles → Manage Styles from the page editor.

Can I see which Page Groups are using a specific Brand Style?

No. There is no single place to see all Page Groups using a specific Brand Style. The Default Brand Style will typically be the most widely used, as all new Page Groups pick it up automatically. To keep things manageable, limit the number of active Brand Styles in use across your organization.

Do editors need to republish pages after a Brand Style is updated?

No. Brand Style updates apply automatically. Elements that haven't been manually overridden update straight away. Elements that editors have changed keep their custom look until they are reset.

What happens to pages within a Page Group when a different Brand Style is applied?

Elements that haven't been manually overridden pick up the new colors, fonts, and default styling right away. Elements that editors have changed keep their custom styling. Background colors that have been overridden retain their position in the color hierarchy — for example, an element set to Darkest will stay at Darkest, just using the new palette's Darkest shade.

Does a Brand Style affect page layout or structure?

No. Brand Styles control visual styling only: colors, typography, and element appearance. Page structure, widget placement, and content decisions remain entirely within the editor and are not affected.

How is Brand Style different from a page template?

Brand Styles define the visual foundation of a Page Group — colors, typography, and how elements like widgets and sections look. Templates control structure and layout, meaning how content is arranged on a page. Templates do not enforce branding; the Brand Style does. Any template used within a Page Group will automatically reflect the Brand Style applied to that group.

If a Brand Style is updated while I am editing, what happens?

The update will apply, but you may need to refresh to see structural or configuration-level changes.

Are Brand Style changes reflected live during collaborative editing?

No. Brand Styles are applied at the Page Group level. Changes to Brand Style configuration or styling are not reflected live and require a refresh.

Feedback

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