Stackable has always made designing in WordPress effortless, with our 40+ custom blocks with advanced features precise block options, dynamic display conditions and motion effects. But we knew we could do so much more.
We rethought how we could help agencies, web developers, and designers scale their projects faster, easier, and more efficiently. The result? A massive update that takes designing with the WordPress Block Editor to the next level.
With this update, we’re introducing a few global features:
- Global Spacing & Borders – control column spacing, margins, container paddings, and borders across all blocks
- Global Color Schemes – assign colors across all blocks site-wide, create custom schemes.
- Font Pairs – quickly apply typography sets to all text blocks
- Global Buttons & Icons – ensure uniform styling for buttons and icons throughout your site.
Stackable Global Design System
We’re calling this new global set of features the Stackable Global Design System. Now, every new block you add will automatically inherit these styles, saving you time and keeping your designs cohesive.
Using the Global Design System gives a you some amazing benefits:
- Changes are global, so your design system will affect your entire site
- It will drastically decrease your page size
- Less time tinkering with multiple blocks
This update is just the first phase of our Global Design System, and we will be further enhancing things in the upcoming updates.
What’s New in the Stackable Global Design System?
Global Color Schemes: A Smarter Way to Apply Colors
Forget manually setting colors for each block. With Global Color Schemes, you can define site-wide color sets that automatically apply to blocks, backgrounds, containers, buttons, and more.
Global Color Schemes comes with preset color combinations that look good out of the box.
But what really makes this new feature exciting is the ability to modify colors for all blocks across your website.
Even if you create color schemes, you are not bound by them, you can either override them through the block settings, or if you have created multiple color schemes, then you can assign another color scheme any time.
What’s more, colors from your color schemes will also be added to the color picker so you can use any one of the colors if you want to further customize your website.
You can define different color sets for various block states, allowing you to create visual contrast and highlight key areas of your design effortlessly.
Here’s how it works:
- Base Color Scheme – The default colors applied to all Stackable blocks.
- Background Mode Color Scheme – Used when the background toggle is turned on for a block, allowing you to set a distinct color for blocks meant to stand out.
- Container Mode Color Scheme – Applied to blocks that use the container feature, giving you even more control over structured layouts.
Why This Matters
This means you can introduce variations to your blocks effortlessly, like highlighting containers or maybe even the middle column in a 3-column section.
Additionally, for block sections where you toggle on Background or Container, there is a Color Scheme menu where you can manually select which color scheme it should follow.
Font Pairs: Beautiful Typography in One Click
Typography is a key part of any design, and now, setting it up is easier than ever. Now we’ve always had Global Typography, but we’ve enhanced it with the addition of preset font pairs.
Achieve a professional, polished look with these preset font pairs, allowing you to apply complementary typography combinations to your headings, body text, and button text effortlessly.
You can also create your own font combination by clicking on the plus (+) sign. Set specific typography settings for each heading level and body text.
Global Spacing & Borders: Precision Control Over Layouts
This is a new addition to Stackable’s Global Design System. With Global Spacing & Borders, you can maintain structured, well-balanced designs by managing margins, paddings and borders globally.
This way, you can make effortless adjustments without manually adjusting each block one by one.
Here, you can control the spacing, borders, and shadows for columns, backgrounds, containers, and images.
Global Buttons & Icons
Buttons and icons play a crucial role in UI/UX, and now you can ensure they always match your design system. Another addition to the Stackable Design System is the Global Buttons & Icons.
With this, you can easily define the sizing, borders, and shadows of your buttons, icons, and icon lists.
How this Transforms Your Web Design Workflow
Previously, building websites on the WordPress Block Editor with Stackable meant adding blocks one by one, and designing each block and copy and pasting the styles to other blocks. Now, with the Global Design System, this means you get to customize all blocks from one single panel.
From adding blocks or wireframes, you can move to the Global Design System to set your colors, typography, and spacing then add your content from there.
Experience the Future of Web Design Today
The Stackable Global Design System is now available in the latest Stackable update. This feature is available for free, with a few more presets and options available only for premium users.
Take control of your site’s design like never before and build websites faster, smarter, and more efficiently. Update to the latest version of Stackable now and transform your workflow with the new Global Design System!
