Custom Workspace Styles

Overview

Workspace settings started with a simple custom color palette. This allows designers to choose which colors will be available inside the builder. Since then, we've expanded workspace settings to create a full palette. Your workspace palette allows you to set custom values for the following:

• Colors
• Typography*
• Headings*
• Text*
• Buttons*
• Content widths*
• Social Icons*

*These features are not available in the Free BEE Pro plan.

To locate your custom workspace settings, navigate to Settings > Styles. Workspace settings are available in all paid BEE Pro plans. However, you may not have access to them depending on your user role. You need to be either an Owner, Admin, or Manager to access these settings. If you're using a Free account, you only have access to workspace colors.

If you're using the Enterprise plan, check out Advanced Style Kit for Workspace Styles.

Workspace Colors

Using workspace colors, you can create your own custom color palette. A color palette can include, at most, 16 colors. These colors are available inside of any color palette in the BEE builder.

Adding colors

The custom color palette is at the top of your Workspace Styles.

To start adding colors, press the + button to open the color picker. 

You must assign a name to your custom color using the Name your color field above the color picker. Note that custom color names will not populate in the builder. The names are visible in any color picker within your workspace style settings.

You can select a color by clicking around the color picker interface, or you can insert the Hex code or RGB value. Once you've found the color you want and named it, select Save to keep it as part of your workspace palette. You will not be able to click the Save button unless you've provided a name for your color. You will receive a confirmation message in the lower right-hand corner of the screen.

Anywhere there is a color picker in or out of the builder, your custom colors will populate for you to easily select them. 

Removing colors

If you need to remove a color from the palette, hover over the color to populate the delete icon.

If you click on the delete icon, you will need to confirm this action before proceeding.

Workspace Typography

Are you using different fonts for different types of content? Not a problem! You can set default fonts for the following text-based content blocks in this section:

• Headings
• Texts
• Buttons

When you click on any of the font icons, you can either choose from an existing font or add a custom font. 

There is no dedicated preview for this section of workspace styles. The fonts you set here are shown in the previews for the associated type of content block.

Workspace Titles

The title content block in BEE Pro leaves quite a lot of room for customization for your text headings. However, you may want to set defaults for this type of content if you have a lot of designers working in your account. The workspace heading section allows you to set the following:

• Font size scale (H1, H2, H3)
  • Major third (38px, 30px, 24px)
  • Augmented fourth (64px, 44px, 32px)
  • Golden ratio (110px, 68px, 42px)
    
• Default color

The font size scale allows you to set default title size values for H1, H2, and H3. You can also set a default text color with the color picker to the right. 

You can see the font of your headings (set in the Typography section) in the preview for this workspace style. You can also preview all three title text sizes based on the scale you select. 

Workspace text settings

In the workspace text settings, you can set custom text and hyperlink colors. We recently added the ability to set custom font size and line height as well. These are the default values for paragraph and list content blocks.

The font size button opens a small modal where you can use +/- buttons to change the default size of your text. All numbers are allowable as long as the number is a positive value.

You can also set your default line height. Clicking this option will open a modal that matches what you see inside the builder sidebar.

To change the color, click on the color icon above the hex code. This will open the color picker. Select Save to confirm the change.

If you change your default text color to white (#FFFFFF), the preview text will populate over a black background.

The preview will display all of your text workspace styles for paragraph and list blocks. This includes the default font you set in the Typography section above. 

Workspace buttons

BEE traditionally uses a set color scheme for any button when you drag a new button content block to the stage. Now you can customize this button! With button styles, you can drag and drop a button that matches your brand at any time.

By default, your button will populate with BEE Pro colors. A preview of the button is also available. This changes in real-time as you make adjustments to the button values.

You can change the background color and text color. To change the colors for your buttons, click on the color icon to the left of the hex code value. This will open the color picker, where you can select Save to confirm the change.

If your button background is white (#FFFFFF), the preview will populate over a dark background.

The button preview will reflect the button font you set above in the typography section. 

Workspace content widths

This section allows you to set a default content area width for any new email or page you start designing. You can set a different default for both the email and page builder by clicking and dragging. The available widths match the options inside the Settings tab of the builder.

Workspace Social Icons

The social content block populates Facebook, Instagram, Twitter, and LinkedIn icons by default. But what if you aren't using these social media platforms? Or what if you frequently find yourself manually adding other icons?

Now you can customize the social icons that populate when using this content block. Additionally, you can set the URLs from your settings to make it faster than ever to create your design.

To start, the social icon settings will show the same default social icons that you see in the builder.

If you click on one of the existing social icons, a modal will open that allows you to customize the social icon.

In this modal, you can edit the title and the link that will generate in the social content block. The dropdown menu at the top of the modal is locked when you're working with the edit modal. When you select Save, you will see a confirmation message in the lower right-hand corner of the window.

If you click on the + icon in the social links section, you can add a new social icon to your default social icons. In this modal, you can interact with the dropdown menu under Select an option to select a platform. You won't be able to interact with the Save button in this modal unless you have entered a URL. The title field is optional.

If you need to delete one of the social icons, hover over the icon for the one that you want to delete. The checkmark in the upper right-hand corner becomes an X. Click this icon to delete the social icon.

A modal opens to ask you to confirm the action.

Up next: Designing with Workspace Styles