Isotoop Design system for WordPress

Making WordPress webdesign fast, easy and consequent

3 Design components

The Isotoop Design System consists of 3 basic components: structure, color and typography.


Structure and spacing

Design and manage your structure, width, height, margin and paddings.


Typography text & styles

A consequent system for typography and text. Based on the Golen Ratio.


Colors tints & shadows

An easy to use and complete color palet for all your WordPress websites.


Why Isotoop is such a powerful design and editing tool

Easy to start

Getting started simple and smooth

Simple and quick set up

It takes minutes to install and set up Isotoop.

Easy to use out of the box

No need to install additional software

No coding skills requiered

No need to learn coding skills. It's simple.

WordPress in mind

Made with WordPress in mind

For most WordPress themes

Works with most decent WordPress themes

Works with Gutenberg editor

Works with WordPress Gutenberg editor

For best WP page builders

Works with the best WordPress page builders.

Works without page builder

Isotoop works with and without page builder.

Extra features not in builders

Features not available in WP page builders.

Based on fibonacci principle

Based on fibonacci Golden Ratio principle

Better performance

Boost the performance of you and your website

Faster web pages

Faster web page loading in browser.

Consequent layout

Consequent webdesign layout.

Great for teams

Great for groups, teams to edit.


Save in the long and short term

Will work long lasting

CSS codes will work long lasting.

Save time and energy

Work faster. Save time and energy.

Save money

No need to buy many design tools.


High standards in the quality of the code and development process.
The best for you and your website.

Well proportioned

Design elements well proportioned

CSS written well

CSS written and developped well.

Golden Ratio

Design based on Golden Ratio.

How does Isotoop work?

Isotoop consists of prefab simple shortcodes. Paste the shortcode in the existing class (style) field anywhere on your website. This applies to blocks, columns, rows, text and all other elements that have a so called class field in WordPress.

Where to apply style?

You can find the class field in most cases under the advanced tab in your editor, basically everywhere in WordPress.
This way the design is everywhere the same all over your website where you used the style. The bigger the website the more handy, fast and consequent it gets.

Easily add styles

In this example you will see how this works in the WordPress Gutenberg editor. It also works out of the box with the most common page builders like Elementor, Beaver builder, WP Bakery Builder.

Click to enlarge demo

Simple style names

All hundreds of styles have very simple names to make it easy for you to learn and remember. In practice you will use te same codes all the time. For example everything with text starts with t-...

Some examples

Styles text size:

t-xs | t-s | t-n | t-l | t-xl | t-xxl

Styles text color:

t-red03 | t-red07 | t-red13
t-blue03 | t-blue07 | t-blue13

Styles background color:

purple02 | purple06 | purple11
green03 | green07 | green13

Spacing for elements:

margin normal: m-n
margin top: m-t
margin right: m-r

Scroll to Top