twentytwentythree
twentytwentythree copied to clipboard
Variation: "Block-out" (WIP)
I've been messing around with a weird idea for a variation that blocks out your images and featured images with a color fill effect, which I was thinking could be a duotone filter that uses ~the same color~ similar colors for the shadow and highlight.
It could look like this:


Figma: https://www.figma.com/file/1yAfz3sRZoHw1XxNaDPw5N/Block-out-style-variation?node-id=0%3A1
I've changed the colors on the duotone so that the image shows a little bit, figured that might be slightly more practical 😂
^ Updated above and in the Figma!
Here's the theme.json: block-out.json.zip
This style variation has been selected to be bundled with the Twenty Twenty-Three default theme! @critterverse and I have made some tweaks to the submission as a part of the curation process to ensure that all the selected variations work together nicely as a collection. Here are the requested changes:
- The shadow and highlight colors used in the duotone effect are a bit too close — we’ve updated these colors with more contrast so that the images are slightly more visible.
- New shadow color: #E2161D
- New highlight color: #FF9C9C
- Add duotone effect in more places (site logo, etc)
No explicit next steps are needed — feel free to update theme.json files where relevant or they will be updated in development. Thanks for the contribution!