by Yohann-YAOTW 0 (0 reviews)

YAOTW Stylo – Design System Importer

Name: YAOTW Stylo – Design System Importer
Author: Yohann-YAOTW

Import a full design system (colors, typography, buttons, effects) into Elementor, the block editor, or CSS variables. No code needed.

YAOTW Stylo ranks #31,592 among WordPress.org plugins with 10+ active installations, is #3,714 of 8,590 in the Customization category, and was last updated Aug 25, 2026. Data from WordPress.org, refreshed twice daily — see methodology.

Compatible with WP 7.1.2

v2.3.0 Current Version v2.3.0

Updated 4 weeks ago Last Update on 25 Aug, 2026

Refreshed 7 hours ago Last Refreshed on

#3,714 of 8,590 in Customization Top 50% by installs Actively maintained

View on WordPress.org

Rank

#31,592

— No change

Active Installs

10+

+900%

KW Avg Position

70 better

Downloads

509

+2 today

Support Resolved

— No change

Rating

Review 0 out of 5

0 (0 reviews)

Next Milestone 20

Total Progress 40%

10+ 20+

18,330

Ranks to Climb

Growth Needed

8,000,000

Active Installs

Pro

Unlock Exact Install Count

See the precise estimated active installs for this plugin, calculated from real-time ranking data.

Exact install estimates within tiers
Track install growth over time
Milestone progress predictions

Upgrade to Pro

Need 6 more installs to reach 20+

Rank Changes

Current #31,592

Change

Best #

Upgrade to Pro

Unlock 30-day and 90-day rank history charts with a Pro subscription.

Upgrade Now

Active Installs Growth

Upgrade to Pro

Active Installs 0,000,000+

Growth +0.0%

Peak 0,000,000

Downloads Growth

Downloads

Growth

Peak

Upgrade to Pro

Unlock 30-day, 90-day, and yearly download history charts with a Pro subscription.

Upgrade Now

Reviews & Ratings

0.0

0 reviews

Overall 0%

0 (0%)

Track This Plugin

Get detailed analytics, keyword tracking, and position alerts delivered to your inbox.

Start Tracking Free

Plugin Details

Version: 2.3.0
Last Updated: Aug 25, 2026
Requires WP: 6.5+
Tested Up To: 7.1.2
PHP Version: 7.4 or higher
Author: Yohann-YAOTW

Support & Rating

Rating: ☆ ☆ ☆ ☆ ☆ 0
Reviews: 0
Support Threads: 0
Resolved: 0%

Keywords

design system design tokens elementor full-site-editing theme.json

Upgrade to Pro

Unlock keyword rankings, search positions, and detailed analytics with a Pro subscription.

Upgrade Now

Similar Plugins

Adminify – White Label, Admin Menu Editor, Login Customizer

6K+ installs

#2,760

Master Addons for Elementor – Elementor Addons, Widgets, Mega Menu Builder, Popup Builder, Widget Builder & Template Kits

30K+ installs

#1,009

Elementor Website Builder – more than just a page builder

10M+ installs

LiteSpeed Cache

7M+ installs

Ultimate Addons for Elementor – Widgets, Templates, WooCommerce & Header Footer Builder

2M+ installs

#26

Essential Addons for Elementor – Popular Elementor Templates & Widgets

1M+ installs

#29

Starter Templates: AI-Powered Website Templates for Elementor & Gutenberg

One Click Demo Import

1M+ installs

#62

Translate Wordpress with GTranslate

900K+ installs

#71

View all Customization plugins

Frequently Asked Questions

Common questions about 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, 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.

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.

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, 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.