When accessed from within an experience (via the Builder Map or Editor), the Style Guide lets you make bulk changes to all screens within a single experience. This helps you stay on-brand, move faster, and keep design elements aligned throughout your experience. From the Style Guide, you can bulk manage the:
Header and body fonts (Google Fonts and custom font uploads supported)
Primary, secondary, and image buttons
Progress bars and back buttons
Logos and background images
Screen transitions and footers
Error message styling
Before you begin
Make sure you have:
Brand colors in Hex or RGB format.
Approved fonts (Jebbit supports Google Fonts and custom font uploads.)
Logos and background images (recommended: .svg files for best results.)
Design specs for buttons, text fields, and other key UI elements.
Open the bulk editor (style guide)
From the Builder Map
Open an experience and select the Builder Map.
Click Design from the toolbar.
From the Editor
Open an experience and select the Editor.
Click Edit style guide.
Edit elements
Select an element from the right-hand preview.
Use the left-hand controls to change design options like fonts, sizes, colors, or images. The left menu updates based on the element selected.
Click Apply.
Updates made here apply to all screens that have:
not yet been individually edited
any new screens added to the experience.
Apply changes to all screens
If you’ve already styled screens manually and want your Style Guide changes to overwrite those styles:
Check the Apply experience design to all screens option at the bottom of the editor window.
Click Apply to override individual screen styling with your Style Guide settings.
Tip: This override is useful when you want to completely refresh the look and feel of your experience without manually editing every screen.
Save changes to the style guide library
If you’d like to reuse a particular design setup within other experiences:
Make any changes.
Click Save to Library.
Select Save to update the style guide in the style guide library.
Select Save as New to add it separately to the Style Guide Library.
Next steps
Finalize your creative assets and set brand-approved styles in the Style Guide.
Use the Apply experience design to all screens option only when you're ready to override individual screen edits.
Save your Style Guide to the Library if you plan to reuse the design in future experiences.
FAQ
What if I apply edits accidentally?
There are a few ways to fix this mistake.
Update your Style Guide and reapply it using the override setting to fix global elements.
Edit screens individually in the screen editor if only a few need tweaks.
Revert to your last published version to undo recent changes and start fresh.
Can I apply a different Style Guide to my experience?
Yes. From the Style Guide menu in the Builder Map, you can select a different Style Guide from your Library.