The Style Guide allows you to create a consistent visual template that reflects your brand across all your experiences in the platform. Whether you choose to apply a single style guide across all campaigns or tailor variations for specific initiatives, using a style guide ensures that every experience aligns with your brand standards.
Once applied, a style guide can act as either a fixed design or a customizable starting point for each individual experience.
Before you begin
Before setting up your style guide, gather the following:
Brand colors in Hex or RGB format.
Approved fonts (Google Fonts and custom font uploads.)
Logos and background images (recommend: .svg files.)
Design specifications for interactive elements such as buttons and input fields.
Create a style guide
To create a style guide:
Navigate to Builder > Style Guide Library.
Click Create Style Guide.
In the lightbox that appears, click the underlined New Style Guide text and enter a name.
Click Save.
Customize each element type
Use the preview and editor windows to tailor your brand’s look and feel.
Text styles
Click the default heading style element and adjust the settings:
Heading type
Color
Font
To upload a custom font, scroll to the bottom of the font options, click Add custom font, upload a .OTF or .TTF file, and click Save.
Size
Bolding
Spacing
Buttons
There are three button types to configure:
Primary
Secondary
Image
Select each button in the preview and the editable components appear in the editor window. Adjust the:
State (Determines how the button reacts when the user interacts with it)
Expand the dropdown and choose between Normal, Hover, and Click.
Background color or image
Corner radius
Border width and color
Shadow effect
Text color, font, & size
Logo
Select the generic logo from the preview window.
Select Change logo from the editor window.
Upload logos using one of the methods provided. You can upload multiple logos at once.
Double click the logo from the media library.
Adjust the spacing as needed.
Enter alternative text.
Back Button
The back button is disabled by default. To enable it:
Select the back button
Click Add back button.
Set the back button to the top or the bottom of the screen.
Configure the colors.
Set the back button icon (circle, arrow, or chevron)
Configure spacing
Select the Show label checkbox to show the label term or not.
Change the Label text.
Select the font and boldness.
The progress bar
The progress bar is disabled by default. To enable it:
Select the progress bar.
Click Add progress bar.
Select the style
Continuous
Segmented
Custom (upload a custom icon)
Label only, no image
Set the bar to the top or the bottom of the screen.
Configure the colors.
Select the shadow checkbox to turn it on or off.
Set the font, size, and color.
Set to show or not show the percent of progress throughout.
Background
Click the background of the screen in the preview window.
Change the color or upload an image from your media library.
Customize error messaging for all experiences
Any changes made to the error messaging of one Style Guide applies to all other Style Guides automatically (so you don't have to worry about updating multiple Style Guides.)
Select Edit error messaging from the editor window.
Select the color box to change the color of the error message.
The message for each error type appears in grey in the textbox. To override it, enter new text into the box.
Click Save.
To restore the default language, remove any text you entered and save it.
To change the error messages for a single experience only, open the style guide from within an experience and edit the error messages for that experience only.
Mobile vs. desktop views
Experiences are designed mobile-first, but both mobile and desktop views can—and should—be styled independently to ensure your content looks great on any device. Key differences between views are:
Layout: Mobile layouts stack content vertically, while desktop layouts display sections side-by-side.
Backgrounds: Images may crop on mobile and scale differently on desktop. Be sure to preview how they appear in each view.
Secondary section (desktop only): The desktop layout includes a secondary section that doesn't appear on mobile. This gives you more design flexibility for wider screens.
Style the desktop view
Click the preview background to reset the editor window.
Select the Desktop radio button at the top of the preview window.
Click the Secondary section to open its configuration panel.
Apply a color or background image to this section.
Always preview your experience in both mobile and desktop views before publishing. This ensures brand consistency and helps you spot layout or image issues early.
Next steps
Select your new style guide when creating your next experience.
FAQ
What file type can I use for logos?
Use .SVG files for the best quality and performance.
Can I apply different style guides to different campaigns?
Yes. You can create multiple style guides with slight variations and apply them to specific experiences or campaigns.
Can I edit a style guide after it’s applied to an experience?
Yes. You can customize each experience individually after applying a style guide.
What fonts are supported?
Experiences supports Google Fonts and custom font uploads (.OTF and .TTF formats.)
Where can I find my saved style guides?
All created style guides are stored in the Builder > Style Guide Library.
Do custom error messages copy over when copying an experience?
Any copied experience will inherit the error messaging of the original experience.