Introduction to Style Guides

Style guides are a collection of design details that determine how an ad looks. Style guides are automatically inherited from Company to Campaign to Ads, but will not flow the other direction. If you modify a campaign's style guide, those changes will be applied to any ads created after the change is made, but will not change existing ads.

Details of the fields within the style guide are as follows.

  • Google Font: You can select from the predefined Google Fonts or select the Custom option to add a specific Google Font.
  • Font family: This field will apprear if you select the Custom option in the Google Font dropdown. You can select from a broad range of variable fonts on the Google fonts site. For more details about how to define custom fonts, see the section Managing Google Fonts.
  • Text: Set the color of the text. You can use the color picker, or type in the hex value for the color you wish to use.
  • Link: Set the color of the text hyperlinks. You can use the color picker, or type in the hex value for the color you wish to use.
  • Button Background: Set the background color for your system generated buttons. You can use the color picker, or type in the hex value for the color you wish to use.  Note that you can also set the alpha channel for the color, allowing you to give a transparency
  • Button Text: Set the color of the text that appears in system generated buttons. You can use the color picker, or type in the hex value for the color you wish to use.
  • Border: Set the color for the borders that appear including buttons, input boxes, etc. You can use the color picker, or type in the hex value for the color you wish to use.
  • Border Width px: Set the width of the borders in a range from 0 to 10 pixels.
  • Border Radius px: Set the radius for corners of system generated buttons in a range from 0 to 50 pixels. A setting of 0 will give you square corners, while the higher the number will begin to round the corner until the button becomes a circle.
  • Hover Brightness %: Set the mouseover effect for system generated buttons in a range from 0% to 200%. Anything below 100 will cause the button to go darker on mouseover, while anything over 100 will cause the button to go lighter.
  • Background: Set the background color for you ad. You can use the color picker, or type in the hex value for the color you wish to use. Depending on the size of the image/video that makes up the background for your ad, this color may or may not be visible.  Note that you can also set the alpha channel for the color, allowing you to give a transparency
  • Secondary Background: Certain templates swap backgrounds upon interaction. This secondary color is then displayed. You can use the color picker, or type in the hex value for the color you wish to use.  Note that you can also set the alpha channel for the color, allowing you to give a transparency.
  • Dropdown Background: Set the background color for any dropdowns. You can use the color picker, or type in the hex value for the color you wish to use.  Note that you can also set the alpha channel for the color, allowing you to give a transparency
  • Theme: Select the color of icons that appear in your ads. The Dark theme displays white icons for use over dark colors and the Light theme displays dark gray icons for use over light colors.