Wix Harmony Editor: Setting Up Your Brand

Apply a color palette to quickly establish your brand's overall identity.

1. Click Change palette.

2. Click through palettes to preview them on your site.

3. (Once you've selected a palette you like) Exit the tab to apply the palette to your site.

Tip: While you're still in the tab, you can easily revert to your original palette by selecting it under Current palette.

Customize the site's base and accent colors to your exact needs. You can even choose the base colors' shades to really make it yours.

1. (If changing shades) Click the Unlock icon

   

   .

2. Select the color you want to change.

3. Choose a new color in the picker.

4. Click Apply.

Tip: Customizing shades does not affect your brand's base colors, so you can adjust each part of the palette the way you want.

Selecting a font set is a great way to quickly establish your brand's voice. Each set comes with 2 fonts: 1 for headings, and 1 for paragraphs.

1. Click Change Set under Font set.

2. Click through sets to preview them on your site.

3. (When you select the option you want) Exit the tab to apply the set to your site.

Tip: While you're still in the tab, you can easily revert to your original text set by selecting it beside Current set.

Choose eye-catching, readable fonts to use on all of your brand headings or paragraphs. Depending on the font you choose, you can also select its weight (Light, bold, etc.).

1. Click Change All next to Headings or Paragraphs.

2. Choose a font from the dropdown.

3. (If applicable) Select the font's weight.

4. Click Apply.

Set up specific text styles to complement your site content, and provide attention to detail in your brand.

1. Click the text style you want to change (e.g. Heading 1, Paragraph 2).

2. Use the options to customize the style:

   • Font: Select a font from the drop-down. Depending on the font you choose, you can also select the font's weight (e.g. regular, bold).

   • Size: Make the text bigger or smaller.

   • Color: Click the color circle and choose the color you want for the text.

   • Styles: Apply formatting to the text (e.g. bold, Italics).

   • Line spacing: Make the spacing between lines smaller or bigger.

1. Click Change Set.

2. Click through sets to preview them on your site.

3. (When you select the option you want) Exit the tab to apply the set to your site.

Tip: While you're still in the tab, you can easily revert to your original button set by selecting it beside Current set.

1. Click the relevant button.

2. Choose the relevant state:

   • Regular: This is what the button looks like before visitors interact with it. Choose which part you want to customize from the dropdown:

     • Button: Design the look of the button itself. You can set the fill color, spacing, and corners, and add borders and shadows to make it stand out.

     • Text: Customize the button text with the formatting and design options. You can even add a highlight color (fill color) around the text to ensure it stands out on the button.

   • Hover: This is what the button looks like when visitors hover over it with their cursor. Choose what to do next:

     • Pick a ready-made effect.

     • Click All design options to set up the hover state from scratch, adjusting every design setting to match your vision.

Tip: You can learn more about customizing elements with our design glossary.

1. Click Change Set.

2. Click through sets to preview them on your site.

3. (When you select the option you want) Exit the tab to apply the set to your site.

Tip: While you're still in the tab, you can easily revert to your original box set by selecting it beside Current set.

1. Click the relevant box.

2. Design the box to look how you want. You can set the fill color, spacing, and corners, and add borders and shadows to make it stand out.

Some editing features in the Wix Harmony Editor, including parts of the Brand panel, are not fully supported when your computer’s accessibility settings change page colors or contrast (for example, Windows contrast themes). In this state, color palettes and other controls in the editor can be hard to see, even though your actual brand settings do not change on your site.

We recommend setting up or editing your brand when your system colors and contrast are set to their default values. After you finish designing, you can turn your high-contrast or color filter settings back on.

1. Open your computer’s accessibility or display settings.

2. Turn off any contrast themes or color filters.

3. Refresh the Wix Harmony Editor and open the Brand panel again to edit your brand.

Yes, you can go back to Brand at any time and customize every part of it, even after you publish your site.

Yes—any changes you make in the Brand panel are applied across the site.

Let's say, for example, that you customize your brand's primary button. Any primary buttons you have added to the site are automatically updated to reflect those changes.

We recommend choosing fonts that are easy to read, and align with your brand's aesthetic. Make sure to maintain consistency across different text styles (i.e., one font for headings, one font for paragraphs).

Absolutely. You can save new colors from the brand panel to build the exact palette you want.

If you customize a box, button, or line and like its look, you can save it as a new style. Simply select the element on the page, and use the action bar to add it to your brand.