A Great Place to Begin

We often think of this panel as the heart of your brand design. If you are designing around your organization's branding standards, you can get a solid start on your custom brand simply by uploading your logo and setting your palette. (See our five minute branding video for a live example of updating a brand's logo and color palette.)

The logo in your Zen brand serves an important purpose — while visually anchoring the branding of your design, it also serves as a useful navigation tool. Clicking on the logo will take your users back to your homepage (or whatever page you specify: see Custom Logos and Logo Target for more general information on logos, as well as how to change the target for the logo.)

To update your logo, you'll need to

  1. Upload your logo image. (See Managing Images.)
  2. Select it from the Brand Designer dropdown menu. (HINT: It should then show up as a preview beneath the selector.)
  3. Use Logo Position to position your logo (in pixels) from the bottom of your header. 
Logos should be sized to fit within the header area. If you provide a logo that is too big for this space, it will be resized to fit. For reference, the default Zen logo is approximately 110 x 50 pixels.

Zen depends upon a palette of 9 pre-selected colors. You can pick any colors you'd like for these values, but we generally recommend the following guidelines:

Primary, Secondary, and Tertiary

We think of these colors as the core branding standard colors of an organization. (Don't have three? No problem. You can duplicate colors, or better yet, pick a lighter value of one of your colors to give you easy access to accent colors when you are editing pages.)

Your selected PRIMARY color is used by Zen for all Headers, unless you override in the Brand Designer.
Dark, Medium, Light

We generally view these colors as accent colors for a brand. (There are several cases where Zen applies the Zen Light Color as a background color, for instance.) For best design practice, use colors that are harmonious with your core colors.

Dark Gray, Medium Gray, Light Gray, and White

Certain color palettes look best with warmer grays — others with cooler grays. Your choice! 

Changing Colors

Swapping in and out colors in your palette is easy: simply click in the color field and enter your chosen HEX value. (There's a color picker as well if you'd like to experiment.)

So where are these applied?

If you begin with either our Chameleon or Intranet starter brands, many of your brand's color settings will automatically update as you change your palette. The icons, for instance, will automatically use your core colors and you will see them change in the toolbar as your palette is updated. (Feel free to play with this—It's kinda fun!—The Brand Designer is smart, so using the UNDO command, you can easily back out your whacky color palette experiments.)

Note that while many of your brand's color settings will update, you have the option of overriding many of the Brand Designer's referential color settings.