YAOTW Stylo - Design System Importer

Yes. You design your system visually in the free WPStylo app at app.wpstylo.dev and export a JSON file. This plugin imports that file and applies it to your WordPress site.

Yes, both the plugin and the WPStylo app are free to use.

Yes. It applies your colors, typography and button styles to Elementor's global Kit. If you use Elementor's Atomic design (v4+), you can additionally inject matching CSS variables and utility classes.

Yes. The recommended action, "Apply (no theme file changes)", applies your tokens without ever modifying your theme's theme.json file. You can also write them into the file with the advanced "Write" (non-destructive) and "Overwrite" (clean slate) modes. Either way, you get five button block styles you can pick in the editor.

Open the plugin page: if your tokens were written into theme.json and a theme update replaced that file, WPStylo detects it and tells you, with the theme version it was updated from. You then have two options, both offered directly in that message: write your tokens again, or switch to "Apply (no theme file changes)", which applies them without touching your theme files so no future theme update can remove them. The second option is the durable fix. You can dismiss the message; it comes back only if the situation changes again.

If you used "Apply (no theme file changes)", nothing: your tokens are applied at runtime and live in the plugin, not in the theme, so a theme update cannot touch them. If you wrote them into theme.json, a theme update replaces that file — as WordPress does when it reinstalls a bundled theme — and your tokens there are lost. You can then restore your theme.json backup from the Tools tab, apply again, or switch to the runtime option.

"Inject Variables & CSS Classes" does two separate things: it injects utility CSS classes, which always work, and it writes Global Variables into your Elementor Kit, which Elementor itself renders under two of its own conditions. First, Elementor only loads its Global Variables module when the "Atomic Widgets" experiment is on (Elementor > Settings > Features). It is on by default on sites whose first Elementor install was version 4.0 or later, and off by default on sites upgraded from a 3.x. Second, Elementor renders variables of type "size" only with Elementor Pro, so the font size variables stay unused on a free install while colour and font family variables work normally. WPStylo detects both and tells you which one applies on the Elementor card, in the result message and in the Summary tab. Nothing is blocked and nothing needs re-importing: the variables are already written and start being used the moment the condition is met. If neither applies to your site, use the utility CSS classes instead — they carry the same values and depend on neither.

No. Everything WPStylo does works with the free Elementor, with one exception that belongs to Elementor rather than to this plugin: Elementor does not render global variables of type "size" unless Pro is active, so the injected font size variables stay unused. Your colours, fonts, button styles, the utility CSS classes and every other target are unaffected.

Yes. The CSS Custom Properties target works on any theme: it injects --wps-* variables and utility classes you can use in your own CSS or templates.

It depends on the target and the action. Applying to Elementor updates the global Kit's system colors, typography and button; your custom colors and custom fonts are preserved. On FSE, "Write" merges alongside your theme's palette and fonts, while "Overwrite" replaces them with yours (a backup is always created first). You are always in control of which action you run.

Yes. You can turn the runtime application off in one click, restore the previous theme.json from the automatic backup, deactivate the injected CSS, or delete the imported configuration entirely from the Tools tab. That backup is the state of the file just before your last apply, not your theme's original file — the Tools tab shows its date and content so you know what you are restoring, and the file it replaces is itself saved first, so a restore can be undone. Note that natively written values (the Elementor Kit and a written theme.json) remain until you restore or change them, while CSS variables, injected classes, block styles, scroll effects and the runtime Full Site Editing application are removed when you deactivate the plugin.

No. Styles are delivered efficiently (inline where appropriate, cached where possible), and front-end scripts are only loaded when a feature such as scroll effects actually needs them. The admin interface is lightweight and scoped so it does not affect the rest of wp-admin.

Optional animations (Fade Up, Fade In, Slide Left, Slide Right, Zoom In) that reveal page sections as visitors scroll. They apply to the Elementor and FSE targets, honor the reduced-motion accessibility setting, and never hide content when JavaScript is unavailable.

Add the CSS class wps-no-reveal to it: in Elementor from the container's Advanced settings, and in the block editor from the block's Advanced settings. The exclusion covers that element and everything inside it, so nothing within it is animated either. It is the right tool for a very short element at the very bottom of a page, a one-line footer for instance. To switch the effect off everywhere instead, use the "Scroll Appearance Effects" card on the Import & Apply tab.

Documentation, tutorials and updates are available at wpstylo.dev. You can also use the support forum on WordPress.org.