Configure a style guide to customize forms and pages in Zephr, including colors, fonts, buttons, and logos.

1. Select the Style Guide button in the Add a Site screen. The Style Guide screen is displayed.
   Note: The page styles do not apply to third-party authentication pages. For further information on defining the styles for third-party authentication pages, see the Configure Third-party Authentication topic.
2. Define the colors used in your forms in the Color section under Global Styles . Two colors are displayed for each style, these are applied as follows:
   • The color on the left is the main color.
   • The color on the right is the tinted color.
   You can define the following colors:

   • Text - This defines the color used for titles and body text. The Main color is applied to default text. The Tinted color is applied to areas where a different color of text is required, such as micro text examples in input boxes.
   • Background. This defines the color used for the background in your forms and pages. The Main color is applied to the default background. The Tinted color is applied to inactive areas, such as an unavailable button selection.
   • Accent. This defines the secondary color used to highlight areas of your form or page. The Main color is applied to an active accent. The Tinted color is applied when the end user hovers over the active accent area.
     Note: The Accent color is reserved for future use.
   • Action. This defines the color of selectable areas, for example, buttons and hypertext links. The Main color is applied to active areas. The Tinted color is applied when the end user hovers over the active area.
   • Warning. This defines the color of warnings. The Main color is applied to default warnings. The Tinted color is applied when the end user hovers over the warning.
3. To change a color, complete the following steps:
   • Select the color you want to change, or select the cog icon that displays when you hover over the color you want to change. The color selector displays.
   • Select the Main color that you want to use. You can select a color in any of the following ways:
     • Enter the hex value in the text box.
     • Select the color sample. The color picker displays. You can pick a color from the color picker as follows:
       • Select an area in the color box.
       • Select the eyedropper icon to choose a color used anywhere in your screen.
       • Select the color from the color bar.
       • Enter the hex value in the text box.
       • Select the arrows beside the text box to show the R, G and B text boxes. Enter the red, blue and green color values in the text boxes.
     • Select the Tinted color that you want to use from the options. The options are automatically generated based on the brightness level of the Main color as follows:
       • If the Main color has a brightness equal to or greater than 90%, the Tinted color are each 10% darker. For example, if the Main color has a brightness of 90%, the Tinted color have a brightness of 80%, 70% and 60%.
       • If the Main color has a brightness in the range 0% to 10%, the Tinted color are each 10% brighter. For example, if the Main color has a brightness of 5%, the Tinted color have a brightness of 15%, 25% and 35%.
       • If the Main color has a brightness in the range 11% to 50%, one Tinted color is 10% darker and the other two are 10% brighter. For example, if the Main color has a brightness of 25%, the Tinted color have a brightness of 15%, 35% and 45%.
       • If the Main color has a brightness in the range 51% to 89%, two Tinted color are 10% darker and the other one is 10% brighter. For example, if the Main color has a brightness of 61%, the Tinted color have a brightness of 41%, 51% and 71%.
4. Define the fonts used in your forms in the Typography section under Global Styles . You can define fonts for titles and body text. To define a font, complete the following steps:
   1. Select the Title box to update the font for your titles, the Body box to update the body font in your forms, or select the cog icon that displays when you hover over the font you want to change. The font selector screen is displayed.
   2. Select the font you want to use from the Font drop-down menu You can also enter the font name in the Font drop-down menu. The font that most closely matches the entered text automatically updates as you type. If you are using a custom font, enter the full name of the font. A preview of the font is shown above the font name.
      Note: If you are using a custom font, or one that is unrecognized on the device, a preview cannot be displayed. Instead, the font defined as the fallback font is used in the preview.
   3. Select the type of font to use if the specified font is not recognized by the end users browser from the Fallback Font drop-down menu When rendering the customer site, the fonts are pulled from the customer’s CSS file. The fallback font is used in the following situations:
      • As the Admin Console cannot access the customer site’s CSS file, custom fonts cannot be used in the preview and the fallback font is used instead.
      • If the selected font is not installed on the device used to define the style guide, it is not available for use in the preview and the fallback font is used instead.
      • If an end user views the site, but the specified font is not recognized by their browser, the fallback font is used instead.
5. Define the style of the buttons used in your forms in the Button section. You can define styles for active, on-hover, and inactive buttons. To define the style of a button, complete the following steps:
   1. Select the box containing the example button styles
   2. Select the cog icon at the right of the box The button setting options are displayed.
   3. Select the font style from the drop-down menu.
   4. Enter the size of the font used for the button text in points in the Size text box.
   5. Enter the width of the border, measured in point size, of the border in the Width text box.
   6. Enter the radius of the border, measured in pixels, of the button border in the Radius text box.
      Note: The color of the border is set. The active button uses the Tinted Active color and the hover and inactive buttons use the Main Background color.
   7. Enter the height, measured in pixels, of the button in the Button Height text box.
6. Define the style of the input boxes used in your forms in the Input box section To define the style of an input box, complete the following steps:
   Note: If you do not want to define styles for your pages, you can skip this step.
   1. Select the box containing the example input box style.
   2. Select the cog icon at the right of the box. The input box setting options are displayed.
   3. Select the colour used for the input box border from Color swatches. The available colours are those defined for Main Text, Tinted Text and Tinted Background in the Color section
   4. Enter the width, measured in pixels, of the border in the Width text box
   5. Enter the radius, measured in pixels, of the button border in the Radius text box
   6. Enter the height, measured in pixels, of the button in the Input Box Height text box
7. Upload the logo used in your pages in the Logo section. To upload a logo, you can either drag a file to the drop box, or take the following steps:
   Note: If you want to change the logo, select the Upload a New Logo button, then upload a new logo as described above.
   1. Select the Select a File to Upload button.
   2. Navigate to your file.
   3. Select your file.
   4. Select the Open button.
8. Select the Done button to save your changes and return to the Add a Site screen.