If you've created a style guide that won't save, or styles applied in the editor aren't showing up on your experience, this article covers the most common causes and fixes.
FAQ
I get an error when I click "Save to Library" or "Save as New." What should I do?
Click Apply in the top-right corner of the design modal before saving, to make sure all changes are applied first.
Try saving with a new, simple name with no special characters.
Refresh the page and retry the save.
Confirm you're saving from within Edit Style Guide, not from an individual element's settings.
If the error persists, this is likely a platform-side issue, contact Support with a link to the experience.
How do I confirm my style guide actually saved?
Open a different experience and go to Edit Style Guide, if your style guide appears in the library list under the name you gave it, the save was successful. If it's missing, repeat the save and watch for an error message.
Styles applied in the editor aren't showing on my experience. Why?
Screen-level styles override the style guide. Settings applied directly to an element or screen take priority over the experience-level style guide, so any screen styled individually won't reflect style guide updates.
Changes weren't applied. Editing the style guide isn't enough on its own, click the blue Apply button in the design modal for changes to take effect.
The style guide only applied to some screens (for example, background color changed on the last screen only). What's happening?
This is a scope issue — screens with their own screen-editor settings override the experience-level style guide. Open the affected screens, find the conflicting element-level styling, and update or remove it. Use multi-select (Shift + click) to update several elements at once.
How do I troubleshoot by screen vs. globally (entire experience)?
Global: Open Edit Style Guide, confirm fonts, colors, and button styles, then click Apply.
Screen level: For any screen that still looks wrong, select the affected element and check for local styling overriding the guide.
Element level: Check Positioning (Auto vs. Free Form) and Spacing. Free Form positioning and negative spacing commonly cause layout issues that look like a broken style guide but are really positioning problems.
Verify on a real device, not just Preview. Screen-size differences can shift positioning and image sizing, but fonts and colors should stay consistent — if they don't, revisit the steps above.
My mobile and desktop styles don't match. Is that a bug?
Not necessarily. If Style Independently is enabled, mobile and desktop can each have their own styling. Note that text content, including line breaks, is shared between both views. Use Apply desktop/mobile design to sync them if needed.
My text alignment isn't being respected. What should I check?
Confirm alignment is set in the style guide and that you clicked Apply.
Check whether the element has its own alignment set in the screen editor — element-level settings win over the style guide.
Check the element's Sizing (width) and Spacing (left/right) — a narrow width or uneven padding can make correctly-aligned text look off.
If Style Independently is on, check alignment separately for mobile and desktop.
My buttons look stuck in the hover state even though "Normal" is selected. How do I fix it?
This is a known issue. Workaround: either disable hover on the affected buttons, or set the Hover state to match the Normal state so the button looks the same in both.
Hover styles only apply in Desktop view — make sure you're checking the right view.
Toggle the State selector (Default / Hover / Active) on the button and confirm Default isn't styled like Hover.
If it still looks stuck, delete and re-add the button, then re-style and publish.
How do I verify my style guide is correctly assigned to an experience?
Open the experience in the Editor and click Edit Style Guide.
Confirm the correct style guide is selected from the library list.
Review the fonts, colors, button styles, and alignment shown in the modal.
Click the blue Apply button in the design modal
Spot-check several screens in the editor and in Preview.
For any screen that doesn't reflect the guide, check for and remove screen- or element-level overrides.
Publish, then verify the live experience on an actual device (for example, via QR code).
It looks right in Preview but the live experience (via QR code) is still broken. Why?
This usually means an element is using Free Form positioning, which can overlap or shift depending on the visitor's screen size. Switch the affected elements to Auto Positioning (select the element → three-dot menu → Positioning → Auto Positioning) and reserve Free Form for small decorative details only.
I've tried everything above and it's still not working.
Contact Support with a link to the experience, a screenshot or short screen recording, and the name of the style guide you're trying to save or apply.