YAOTW Stylo – Design System Importer

YAOTW Stylo connects your WordPress site to the WPStylo app — a free visual design system configurator for colors, typography, buttons, and global elements.

Design your system once in the app, export a JSON config file, then apply it in one click via three independent targets:

CSS Custom Properties (universal) Injects --wps-color-*, --wps-font-*, and --wps-btn-* CSS variables plus .wps-text-* and .wps-btn-* utility classes into every front-end page. Works with any theme or page builder.

Elementor integration Updates system colors, system typography, and global button styles via the Kit Manager API. Injects Elementor Global Variables (colors, font families, font sizes) and utility CSS classes (.wps_h1—.wps_nav, .wps_btn_*) directly into the active Kit’s custom CSS. User-created Custom Colors, Custom Fonts, and Global Variables are preserved on re-apply.

FSE / theme.json Merges WPStylo design tokens into the active block theme’s theme.json (color palette, font families, font sizes, heading and body styles, button element) while preserving all other theme settings. Automatic backup before every write.

Key features

• JSON import via file upload or paste, validated against the wpstylo/v1 schema
• Responsive typography via clamp() (CSS) and automatic tablet size interpolation (Elementor)
• Non-destructive re-apply — user content preserved in Elementor and FSE
• Automatic theme.json.wpstylo-backup before every FSE write
• Copy-to-clipboard class reference table in the admin

Requirements

• Elementor 3.0+ — required for the Elementor target only (optional)
• A block theme — required for the FSE target only (optional)

The CSS Custom Properties target works with any theme and any builder.

External services

This plugin loads the Google Fonts stylesheet from Google’s CDN (fonts.googleapis.com) on the plugin’s admin settings page only, to render a live preview of the typography defined in your imported configuration.

When you open the YAOTW Stylo admin page, your browser requests the selected font families from fonts.googleapis.com. The selected font family names are included in the request URL. No personal data is sent by the plugin, and this request never happens on your site’s front end.

Google Fonts is a service provided by Google LLC. Terms of service: https://policies.google.com/terms — Privacy policy: https://policies.google.com/privacy