Introduction to Style Guides
Style Guides are a collection of design details that determine the overall look and feel of your ads. These settings are designed to be inherited: they automatically flow from your Company settings to your Campaigns, and then down to individual Ads.
Important Note on Inheritance: Changes to a style guide only flow downwards. If you modify a campaign's style guide, those changes will apply to any new ads created after the modification, but they will not change existing ads.
Here are the details of the fields within the Style Guide:
Font & Text
- Google Font: You can select from a predefined list of Google Fonts or choose the "Custom" option to add a specific Google Font.
- Font Family: This field appears if you select "Custom" in the Google Font dropdown. You can choose from a broad range of variable fonts available on the Google Fonts site. For more details on defining custom fonts, see the section Managing Google Fonts.
- Text: Set the color of your ad's main text. You can use the color picker or type in a hex value.
- Link: Set the color of text hyperlinks within your ads. Use the color picker or type in a hex value.
Buttons
- Button Background: Set the background color for your system-generated buttons. You can use the color picker or type in a hex value. You can also adjust the alpha channel for transparency.
- Button Text: Set the color of the text that appears in system-generated buttons. Use the color picker or type in a hex value.
- Border: Set the color for borders that appear on elements like buttons and input boxes. Use the color picker or type in a hex value.
- Border Width px: Set the width of borders in a range from 0 to 10 pixels.
- Border Radius px: Set the curvature for the corners of system-generated buttons, ranging from 0 to 50 pixels. A setting of 0 will result in square corners, while higher numbers will increasingly round the corners until the button becomes a circle.
- Hover Brightness %: Define the mouseover effect for system-generated buttons, ranging from 0% to 200%. Values below 100% will make the button appear darker on mouseover, while values above 100% will make it lighter.
Background Colors
- Background: Set the primary background color for your ad. You can use the color picker or type in a hex value. Depending on the size of any background image or video, this color may or may not be visible. You can also adjust the alpha channel for transparency.
- Secondary Background: For certain templates that swap backgrounds upon interaction, this defines the secondary background color that will be displayed. You can use the color picker or type in a hex value, and adjust the alpha channel for transparency.
- Dropdown Background: Set the background color for any dropdown menus. You can use the color picker or type in a hex value, and adjust the alpha channel for transparency.
Theme
- 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.