Creating and Managing Brand Styles

A brand style is a comprehensive design system that controls the visual identity of your landing pages. It includes 50+ design properties covering typography, colors, spacing, button styles, and more. When you apply a brand style to a page, every section on that page automatically inherits those design properties, ensuring a consistent, professional look without manual styling.

What a Brand Style Includes

A brand style defines:

• Typography - Heading font, body font, highlight font, font sizes for H1-H6 and paragraphs (desktop and mobile), font weights, text transforms, and line heights

• Colors - Primary, secondary, and tertiary brand colors, background colors, text colors, icon colors, and star colors

• Button styles - Button color, hover color, text color, border width, border color, border radius, and padding

• Layout - Max content width, horizontal and vertical padding (desktop and mobile)

• Spacing - Border radius for cards and containers, small radius, button radius

Every property works together to create a cohesive design that matches your brand identity.

Creating a New Brand Style

1. Open the Brand Style modal
   

   From the dashboard, click Brand Styles in the navigation, then click Create Brand Style. You can also access brand style creation when creating a new page.

2. Name your brand style
   

   Give your brand style a descriptive name (e.g., "Summer Campaign 2024" or "Main Brand"). Click the name at the top of the modal to edit it.

3. Configure your design properties
   

   The Brand Style modal is organized into three tabs:

   • Colors - Set your brand colors, background colors, text colors, button colors, and icon colors

   • Typography - Choose fonts, font sizes, weights, and text transforms

   • Spacing - Set layout widths, padding, and border radius values

4. Preview your changes
   

   As you adjust properties, the live preview on the right side of the modal shows how your brand style looks applied to a sample section. Toggle between desktop and mobile preview to check both breakpoints.

5. Save your brand style
   

   Click Save to store your brand style. It will appear in your brand styles library and can be applied to any page.

Using AI to Generate a Brand Style

Instead of manually configuring every property, you can describe your brand and let AI generate a complete style for you.

1. Open the AI generation field
   

   In the Brand Style modal, look for the AI prompt input field with the sparkles icon at the top.

2. Describe your brand
   

   Type a description of your desired style. Be as specific as you like. Examples:

   • "Clean, modern wellness brand with forest green and cream colors"

   • "Bold, energetic fitness brand with dark backgrounds and neon accents"

   • "Elegant luxury skincare brand inspired by Glossier's minimalist style"

   • "Playful kids' snack brand with bright, fun colors and rounded shapes"

3. Choose a style preference (optional)
   

   Select a style preference from the dropdown to guide the AI: Auto, Playful, Professional, Minimalist, Bold, Elegant, or Modern.

4. Generate the style
   

   Click the generate button. The AI will create a complete brand style with all 50+ properties configured to match your description. This uses AI credits from your account.

5. Review and adjust
   

   The generated style is applied to the preview immediately. Review the results and manually adjust any properties you want to fine-tune.

Mentioning a well-known brand in your AI prompt helps produce better results. For example, try "Something like AG1 but with a warmer palette" or "Minimalist style inspired by Glossier" for a strong starting point.

Editing an Existing Brand Style

To modify a brand style you have already created:

1. Open the Brand Styles modal.

2. Click the brand dropdown at the top to see your saved brand styles.

3. Select the style you want to edit. Its properties load into the editor.

4. Make your changes across the Colors, Typography, and Spacing tabs.

5. Click Save to update the style.

All pages using this brand style will reflect the updated properties the next time they are loaded in the builder.

Changing a brand style affects all pages that use it. If you want to experiment without affecting existing pages, duplicate the style first.

Duplicating a Brand Style

To create a copy of an existing style:

1. Open the Brand Style modal and load the style you want to duplicate.

2. Click the options menu (three-dot menu or dropdown) near the style name.

3. Select Duplicate.

4. A new brand style is created with the name "[Original Name] (Copy)".

5. Edit the duplicated style as needed and save it.

Duplicating is useful when you want to create a variation of your main brand style for a seasonal campaign, A/B test, or different product line.

Deleting a Brand Style

To delete a brand style:

1. Open the Brand Style modal and load the style you want to remove.

2. Click the options menu and select Delete.

3. Confirm the deletion in the dialog that appears.

Deleting a brand style is permanent and cannot be undone. Pages that were using the deleted style will retain their last-applied styling but will no longer be linked to a brand style.

Applying a Brand Style to a Page

Brand styles are applied when you create or edit a page:

• When creating a page: Select a brand style from the dropdown during page creation. The style is applied to all sections on the new page.

• In the builder: Change the page's brand style from the page settings or brand style selector in the builder toolbar.

Once applied, all sections on the page inherit the brand style's typography, colors, spacing, and button styles. Individual sections can still override specific properties through per-section customization in the config panel.

Undo and Redo in the Brand Style Editor

The Brand Style modal has its own undo/redo system:

• Press Cmd+Z (Mac) or Ctrl+Z (Windows) to undo changes

• Press Cmd+Shift+Z (Mac) or Ctrl+Shift+Z (Windows) to redo

• Up to 50 history states are tracked

You can also click the undo/redo buttons in the modal toolbar.

If you try to close the modal with unsaved changes, a confirmation dialog will ask whether you want to discard your changes or go back and save them.