Consistency. That’s the name of the game when it comes to designing a website. And having a way to design, and apply, like-styling to whole sets of blocks is a huge step towards publishing pages with consistency and speed.

So I explored an idea I’m calling Colorways — a “simple mode” for stylizing page content.

How it works

You design a few “mini themes” essentially, where background, heading, text, and button colors are established.

This would happen within the custom theme.json object (for now), providing a group of CSS variables for applying styles to these groups of blocks.

Each colorway is visually selectable within a control I’ve added to the toolbar of select blocks (group, cover and columns blocks).

Once applied, the colorway’s values take precedence over any un-styled blocked within the group.

Why this is so cool

I already mentioned that this could be a simple tool for consistently styling whole sections of blocks — but there’s another benefit that I think is much more impactful, albeit less front-and-center.

A challenge we’re facing today with WordPress editing, is that if you apply any colors — standardized or not — those color combinations are unlikely to work across themes.

Look at it this way. If I change the background of a group block to use a theme’s secondary color with the primary color applied to the text — those secondary and primary colors probably won’t have the same contrast ratio on another theme.

Themes aren’t intended to always have the same dark, or light, values for each color palette item — at least not yet.

Colors may mostly be light pastels, like in my Wabi block theme. Or darker, as seen in Wei. Or perhaps the new theme doesn’t have a secondary color value at all — which results in a fallback in this case to whatever value the body text is.

Each of these scenarios creates friction — if any colors are applied to any blocks. This idea of colorways could reduce that friction considerably.

Here’s how.

I apply a theme’s “Darkest” colorway to a group of blocks. If I change my theme at some point, the new theme’s “Darkest” colorway values would be applied to those same blocks — resulting in a color combination that still looks great.

Another win: I don’t have to adapt every existing page or post page to fit the new theme’s colors — they just work.

An experiment

Colorways could certainly become an approachable design experience for people to style consistently across a whole site — and have those styles still look right, even when changing themes.

I’m envisioning an experience within Global Styles even, where you can edit a theme’s colorways; maybe add your own even. But anyway that we can reduce friction and make editing more approachable is a win in my book.

I’m currently experimenting with colorways as a small plugin, but I’d say there’s potential for colorways to make their way into the WordPress editor wholesale. What do you think? Join the conversation on Twitter.

Want to give it a try? DM me.