Style controls
Sweat the details. Control button colors and shape, corner roundness, backdrop opacity, and how progress is shown — so guides feel built in, not bolted on.
Buttons your way
Set primary and secondary button colors and shapes.
Shape & depth
Dial in corner roundness and backdrop opacity.
Progress styling
Show progress as a bar or a count, in your color.
Live in three steps.
Open styling
Find the design controls in the editor.
Adjust to taste
Colors, shape, roundness, backdrop, progress.
Preview & publish
Confirm it in the live preview, then ship.
Making one launch modal feel like an event.
The project theme handles every ordinary day. Style controls exist for the day that is not ordinary — the launch that earns its own look, one step deep, without touching the system.
Start from the theme
The modal inherits everything: brand buttons, your roundness, 40% backdrop. You are adjusting a working design, not building from zero.
Turn up the drama
In the step's Design tab: width up for the screenshot, backdrop to 70%, corner radius squared off to match the campaign art, text centered.
Recolor with restraint
Background to the launch's dark navy, text to white, accent to the campaign gold — three fields. The buttons keep their shapes, so it still reads as your product.
Reset when the moment passes
Every overridden field shows "reset to theme". After launch week, either reset the step or retire the guide — special is only special once.
What to expect: One step that feels like an occasion, zero drift in the system. The theme stays authoritative for the other twenty-nine guides while this one wears the campaign.
When not to use style controls.
No pattern fits every job. Here’s where we’d point you at something else — sometimes ours, sometimes not.
Fixing the same thing repeatedly
The third time you override backdrop darkness, stop — that preference belongs in the project theme. Per-step controls are for exceptions; recurring choices are the system's job.
Compensating for a weak theme
If guides only look right after manual styling, the theme is wrong. Spend thirty minutes in Brand & styling once instead of five minutes per guide forever.
Layout redesign ambitions
These controls tune colors, width, radius, alignment, and backdrop — they do not turn a modal into a custom component. Structural needs are what the step layouts (one to three columns) and content styles are for.
What can I control on a single step?
Background, text, and accent colors, width, corner radius, button shape, text alignment, backdrop dim for modals, corner position for slideouts — plus tooltip extras: spotlight, arrow toggle, and allow-page-interaction. Banners add ticker scrolling and push-content-down.
Do overrides survive theme changes?
Yes — an overridden field keeps its explicit value when the theme updates; untouched fields follow the theme. That is the cascade working: your exception stays yours until you reset it.
How do I undo an experiment?
"Reset to theme" per field, on any field you have overridden. There is no diffing or archaeology — the control shows you what is custom and one click returns it to the system.
Who should be adjusting styles?
Anyone with edit access — the controls are pickers and sliders, not code. The custom-CSS escape hatch (scoped to widget classes) is the only part that assumes CSS fluency, and most teams never need it.
Do per-step styles affect performance?
No — overrides ship as part of the guide's config, a few extra fields the SDK applies at render time inside the Shadow DOM. There is no extra network cost and no style recalculation on your page; a heavily styled step renders as fast as a default one.
See it on your own app.
Ship your first guide in minutes. Free to start — no credit card.