Title: YAOTW Stylo – Design System Importer Author: Yohann-YAOTW Published: June 22, 2026 Last modified: August 25, 2026 --- Search plugins ![](https://ps.w.org/yaotw-stylo/assets/banner-772x250.png?rev=3582383) ![](https://ps.w.org/yaotw-stylo/assets/icon.svg?rev=3582383) # YAOTW Stylo – Design System Importer By [Yohann-YAOTW](https://profiles.wordpress.org/yaotw/) [Download](https://downloads.wordpress.org/plugin/yaotw-stylo.2.3.0.zip) * [Details](https://test.wordpress.org/plugins/yaotw-stylo/#description) * [Reviews](https://test.wordpress.org/plugins/yaotw-stylo/#reviews) * [Installation](https://test.wordpress.org/plugins/yaotw-stylo/#installation) * [Development](https://test.wordpress.org/plugins/yaotw-stylo/#developers) [Support](https://wordpress.org/support/plugin/yaotw-stylo/) ## Description **Bring one consistent design system to your whole WordPress site, whether you build with Elementor, the block editor, or plain CSS.** YAOTW Stylo turns a design system (colors, typography, buttons, spacing, effects) into real WordPress settings. You design your system visually in the free **WPStylo app** ([app.wpstylo.dev](https://app.wpstylo.dev)), export a single JSON file, then import it here and apply it to your site in one click. No more copying hex codes by hand, no more mismatched headings between your page builder and your block templates. Define your tokens once, apply them everywhere, and keep every page on brand. Design your system at [app.wpstylo.dev](https://app.wpstylo.dev). Learn more at [wpstylo.dev](https://wpstylo.dev). #### Why designers and developers use it * **One source of truth.** Your colors, fonts and button styles come from a single JSON file, so your whole site stays consistent. * **Works with your stack.** Apply the same design system to Elementor, to the block editor on any theme, or to any theme through CSS custom properties. * **No code required.** Design visually, import, apply. The plugin writes the settings for you. * **Non-destructive by default.** Your existing content is preserved, backups are created before risky operations, and everything can be restored or removed. * **Lightweight.** Styles are delivered efficiently and the admin stays fast; nothing heavy is loaded on your front-end unless a feature needs it. * **Free.** The plugin and the WPStylo app are free to use. #### Apply your design system to three targets **1. CSS Custom Properties (works on any theme)** Injects `--wps-*` CSS custom properties and ready-to-use utility classes (for headings, body text and buttons) into your site. Use them anywhere in your own CSS or templates. Perfect when you write your own CSS or templates. **2. Elementor** Applies your tokens to Elementor’s global Kit (Site Settings): colors, typography and button styles, including text case, button box-shadow and per-corner border radius. Custom color and typography roles you created in the app are applied too. Using Elementor’s newer Atomic design (v4+)? One extra click injects matching variables and utility CSS classes, without overwriting your existing global variables. **3. Block Editor / theme.json (works on any theme)** Feeds your design system to the WordPress block editor, so any content written in blocks picks up your colors, font sizes, font families and button variants. `theme.json` is how the block editor is configured, not a block-theme feature, so this works on classic themes too — including sites whose pages are built with a page builder and whose posts are written in blocks. The recommended way is **Apply (no theme file changes)**: your palette, fonts, font sizes and element styles are handed to WordPress on every page load, and your theme’s` theme.json` file is never modified. Because nothing is written into the theme, ** a theme update cannot wipe your configuration**. Pick whether to keep the theme’s own palette and fonts alongside yours (_Preserve_) or to expose only yours (_Replace_). If you would rather write the tokens into the file itself — for example to keep them without the plugin — the advanced **Write to theme.json** actions are available on block themes: * **Write** (non-destructive): merges your palette and fonts alongside the theme’s existing ones. * **Overwrite**: replaces the palette, font families and font sizes with yours only, for a clean slate (other theme.json settings such as spacing and layout are left untouched). Either way, a backup is created first and can be restored in one click. On every theme you also get five ready-made button block styles (**Stylo Primary, Secondary, Outline, Ghost, Link**) selectable directly from the editor. #### Scroll appearance effects Give your pages a polished feel with built-in scroll animations (**Fade Up, Fade In, Slide Left, Slide Right, Zoom In**) that reveal sections as visitors scroll. They run on the Elementor and block theme targets, respect the “reduced motion” accessibility preference, and never hide your content when scripting is off. Enable or disable them any time, no re-import needed. #### What gets imported Colors (semantic roles, including your own custom roles), fluid typography (responsive` clamp()` sizing, including your own custom typography roles), text case (uppercase, lowercase, capitalize) for headings, body text and buttons, button variants with hover and focus states, button box-shadow, border radius — uniform or per corner— transitions, and scroll appearance effects. #### Built for real workflows * Re-import an updated design system any time; applying again keeps your custom content intact. * Export the currently imported configuration as a JSON backup you can re-import later. * Clear, tabbed admin: Import & Apply, Reference (copy-ready classes), Summary, Tools, and an in-plugin Guide. Design your system at [app.wpstylo.dev](https://app.wpstylo.dev). Full documentation and tutorials at [wpstylo.dev](https://wpstylo.dev). ## Screenshots [⌊Import & Apply: import your JSON configuration and apply it to Elementor, the block editor (theme.json), or CSS custom properties.⌉⌊Import & Apply: import your JSON configuration and apply it to Elementor, the block editor (theme.json), or CSS custom properties.⌉[ Import & Apply: import your JSON configuration and apply it to Elementor, the block editor (theme.json), or CSS custom properties. [⌊Reference: copy-ready CSS class names for typography and buttons, plus the Stylo button block styles.⌉⌊Reference: copy-ready CSS class names for typography and buttons, plus the Stylo button block styles.⌉[ Reference: copy-ready CSS class names for typography and buttons, plus the Stylo button block styles. [⌊Summary: a clear overview of the imported design system (colors, typography, buttons, element tokens).⌉⌊Summary: a clear overview of the imported design system (colors, typography, buttons, element tokens).⌉[ Summary: a clear overview of the imported design system (colors, typography, buttons, element tokens). [⌊Tools: export your configuration, restore theme.json from backup, or delete the configuration.⌉⌊Tools: export your configuration, restore theme.json from backup, or delete the configuration.⌉[ Tools: export your configuration, restore theme.json from backup, or delete the configuration. [⌊Guide: built-in documentation for every target.⌉⌊Guide: built-in documentation for every target.⌉[ Guide: built-in documentation for every target. ## Installation 1. Install the plugin from your WordPress dashboard (Plugins > Add New > search for“ YAOTW Stylo”), or upload the plugin zip via Plugins > Add New > Upload Plugin. 2. Activate the plugin through the Plugins menu. 3. Open **YAOTW Stylo** in your admin menu. 4. Design your system at [app.wpstylo.dev](https://app.wpstylo.dev) and export a JSON configuration (or paste one you already have). 5. On the **Import & Apply** tab, upload or paste your JSON, click **Import configuration**, then apply it to the target you use (CSS Custom Properties, Elementor, or Block Editor / theme.json). Tip: always try the plugin on a staging or development site first, and back up your files and database before applying on production. ## FAQ ### Do I need the WPStylo app? Yes. You design your system visually in the free WPStylo app at [app.wpstylo.dev](https://app.wpstylo.dev) and export a JSON file. This plugin imports that file and applies it to your WordPress site. ### Is it free? Yes, both the plugin and the WPStylo app are free to use. ### Does it work with Elementor? 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. ### Does it work with the block editor and block themes? Yes, and on classic themes too. The recommended action, “Apply (no theme file changes)”, hands your tokens to the block editor without ever modifying your theme’s `theme. json` file, whatever your theme is. On a block theme 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, on any theme. ### My pages are built with Elementor but my posts are written in blocks. Does this help? Yes, this is exactly what the Block Editor / theme.json target is for. Turn on “ Apply (no theme file changes)” and your posts pick up your palette, font sizes and font families in the editor and on the front end, while your pages keep being built with Elementor as before. Nothing is written to your theme and nothing about your page builder changes. The five Stylo button block styles become selectable on Button blocks as well. Two limits worth knowing. If your theme keeps the WordPress default font sizes, WordPress’ own “Small” size takes precedence over the Small role of your design system, so that one role is not applied in the block editor; every other role works. And on WordPress below 7.0 with a classic theme that ships no `theme.json` of its own, WordPress only passes the CSS variables through, so colors and font sizes do not appear as presets — the button variants still work. ### My design system disappeared after a theme update. What do I do? 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. ### What happens to my design system when my theme updates? 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. ### I injected the Elementor variables but I do not see them. Why? “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. ### Do I need Elementor Pro? 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. ### I don’t use Elementor or a block theme. Can I still use it? Yes, twice over. 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. And the Block Editor / theme.json target also works on any theme, so content written in blocks picks up your design system even on a classic theme. ### Will it overwrite my existing settings? 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 a block theme, “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. ### Can I undo the changes? 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 block editor application are removed when you deactivate the plugin. ### Will it slow down my website? 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. ### What are the scroll appearance effects? 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 block theme targets, honor the reduced-motion accessibility setting, and never hide content when JavaScript is unavailable. ### How do I stop one element from animating? 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. ### Where can I get help? Documentation, tutorials and updates are available at [wpstylo.dev](https://wpstylo.dev). You can also use the support forum on WordPress.org. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “YAOTW Stylo – Design System Importer” is open source software. The following people have contributed to this plugin. Contributors * [ Yohann-YAOTW ](https://profiles.wordpress.org/yaotw/) “YAOTW Stylo – Design System Importer” has been translated into 1 locale. Thank you to [the translators](https://translate.wordpress.org/projects/wp-plugins/yaotw-stylo/contributors) for their contributions. [Translate “YAOTW Stylo – Design System Importer” into your language.](https://translate.wordpress.org/projects/wp-plugins/yaotw-stylo) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/yaotw-stylo/), check out the [SVN repository](https://plugins.svn.wordpress.org/yaotw-stylo/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/yaotw-stylo/) by [RSS](https://plugins.trac.wordpress.org/log/yaotw-stylo/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 2.3.0 * New: The design system now reaches the block editor on every theme, not only on block themes. The card, renamed “Block Editor / theme.json”, is shown whatever your theme, and its “Apply (no theme file changes)” action works everywhere. * New: The five Stylo button block styles (Primary, Secondary, Outline, Ghost, Link) are available on every theme as soon as a configuration is imported. * Improved: The Stylo button styles now also apply to buttons added before WordPress 6.1, which were left unstyled before. * Improved: Writing into your theme.json file still requires a block theme; on other themes the card now says so instead of hiding everything. * Improved: Clearer wording across the plugin, which no longer calls this target“ Full Site Editing”. * Fixed: Stylo buttons in the block editor could render with the theme font instead of your design system font, on themes whose stylesheet resets the page font. The button styles now carry the font explicitly. #### 2.2.0 * Fixed: An element at the very bottom of a page never appeared. A short footer, or anything sitting in the last few pixels of a page, stayed invisible however far you scrolled, because there was no scrolling left to bring it into view. Everything is now revealed by the time you reach the end of the page. * Fixed: On a page too short to scroll, anything below the first screen stayed hidden for the same reason. It is now visible as soon as the page loads. * New: You can exclude one element from the effect by giving it the CSS class ` wps-no-reveal`. The exclusion covers that element and everything inside it. * Changed: Sections now start animating slightly earlier as they come into view. #### 2.1.1 * Fixed: Very tall sections never appeared. If a section was taller than roughly ten screens, the scroll appearance effect kept it invisible for good, whatever you scrolled. It now appears normally, at any height. * Fixed: Sections just below the top of the page no longer wait for your first scroll to appear, which used to leave a large blank area under the first screen when the page loaded. * Fixed: A section nested inside another one could stay invisible until its parent appeared. Each section now animates on its own. * Improved: On sections with many elements, the cascade no longer stretches out. The last element now appears within one second instead of up to six. * Improved: The effect is lighter on your visitors’ devices, especially on long pages with many animated sections. #### 2.1.0 * New: “Apply (no theme file changes)” for block themes. Your colors, fonts and button styles are applied without ever modifying your theme’s theme.json, so a theme update can no longer wipe your configuration. Choose whether to keep your theme’s own palette and fonts alongside yours, or to show only yours. * New: WPStylo now tells you when a theme update has wiped the settings it had written into your theme, and offers to apply them again or to switch to the safer option. * New: Text case (UPPERCASE, lowercase, Capitalized) is now applied on Elementor, on block themes and in the CSS classes. * New: Buttons can have a different radius on each corner. Buttons using a single radius are unaffected. * New: Your own typography roles now reach Elementor too: global fonts in Site Settings, a ready-to-use CSS class, and a line in the Reference tab. * Improved: The Full Site Editing card leads with the safer option; “Write to theme. json” and “Overwrite” are still there, grouped as advanced. * Improved: “Inject Variables & CSS Classes” now tells you when Elementor will not display what it wrote (its “Atomic Widgets” feature switched off, or font size variables without Elementor Pro). * Fixed: The theme.json backup is now described honestly. It is the state of the file just before your last apply, and Tools shows its date, theme version, and whether it already contained your configuration. * Fixed: Restoring that backup can now be undone, and a damaged backup is refused instead of being restored over a working file. * Fixed: Deleting your configuration no longer leaves stale “Last applied” dates behind, and uninstalling cleans up the backup files WPStylo created next to your theme.json. * Fixed: Multi-word typography role names now produce a clean, valid name everywhere. The eleven standard roles are untouched. * Fixed: A color WPStylo cannot read is left out of theme.json instead of being written blank, and a malformed value in an imported file no longer produces PHP warnings on every page load. * Compatibility: tested and confirmed working with WordPress 7.1. #### 2.0.0 * New: Scroll appearance effects (Fade Up, Fade In, Slide Left, Slide Right, Zoom In) for the Elementor and FSE targets, with a runtime on/off switch and reduced- motion support. * New: Full Site Editing “Overwrite theme.json” mode, which replaces the palette, font families and font sizes with yours only (alongside the existing non-destructive“ Write” mode). A backup is always created first. * New: Redesigned plugin admin (brand header, clearer target cards with guidance, restyled Guide and Tools). * Improved: Full Site Editing now maps the Text and Background colors automatically to your design system roles. * Improved: Summary now shows transitions and scroll appearance effect tokens, with an accurate element-tokens count. * Improved: clearer descriptions and warnings across the Import & Apply, Reference and Guide tabs. #### 1.9.0 * New: Full Site Editing button block styles (Stylo Primary, Secondary, Outline, Ghost, Link) selectable from the editor. For the complete version history, see changelog.txt in the plugin files. ## Meta * Version **2.3.0** * Last updated **1 month ago** * Active installations **10+** * WordPress version ** 6.5 or higher ** * Tested up to **7.1.2** * PHP version ** 7.4 or higher ** * Languages * [English (US)](https://wordpress.org/plugins/yaotw-stylo/) and [French (France)](https://fr.wordpress.org/plugins/yaotw-stylo/). * [Translate into your language](https://translate.wordpress.org/projects/wp-plugins/yaotw-stylo) * Tags * [design system](https://test.wordpress.org/plugins/tags/design-system/)[design tokens](https://test.wordpress.org/plugins/tags/design-tokens/) [elementor](https://test.wordpress.org/plugins/tags/elementor/)[full-site-editing](https://test.wordpress.org/plugins/tags/full-site-editing/) [theme.json](https://test.wordpress.org/plugins/tags/theme-json/) * [Advanced View](https://test.wordpress.org/plugins/yaotw-stylo/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/yaotw-stylo/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/yaotw-stylo/reviews/) ## Contributors * [ Yohann-YAOTW ](https://profiles.wordpress.org/yaotw/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/yaotw-stylo/)