The talented design team at Evil Martians makes a strong case for adopting opacity as a core component of your color system: ​“Transparent colors are a staple of modern operating systems, yet, for some reason, web apps still underutilize this marvel of modern interface design. And what happens when you properly integrate transparent colors into your design toolkit? You can minimize the number of design tokens, styles, and component variations — making your workflow more efficient and flexible.”

Roman Shamin and Evil Martians keep building amazing tools for working with colors. Harmony is a beautiful color palette built with a primary focus on visual contrast and accessibility. It provides an equal contrast within lightness levels and consistent chroma (thanks OkLCH!), mirrored contrast pairs for light and dark modes, P3 gamut support, and Figma variables support. A great example of how a modern color palette should be built. Make sure to read Roman’s thread with all the nitty-gritty details of building this palette.

So happy to see that this geeky tool hit 2nd place as a Product of the Day at ProductHunt last week! Its author Roman Shamin collaborated with me on Accessible Palette in the past and built a few other projects featured in this newsletter. While the UI of the color picker may seem complicated at first, its guiding principle was educating and demonstrating new concepts underlying the OKLCH and LCH color spaces. It’s my go-to tool for working with these color spaces and wide-gamut P3 colors.

For additional context, see an in-depth article OKLCH in CSS: why we moved from RGB and HSL by Roman’s co-author on using OKLCH color space in code, as well as my article Accessible Palette: stop using HSL for color systems on using perceptually uniform color spaces as a foundation for design systems.

Speaking of the font metrics, I’ve just bought the Martian Grotesk font family for the upcoming redesign of my personal website. Its author Roman Shamin put a great deal of work into making this font a fantastic choice for web and digital design — equal vertical metrics for perfect positioning inside a bounding box, glyph height sticking to the pixel grid at common sizes, case sensitivity, and a variable version. It’s one of the most thoughtfully made fonts for the UI work and currently it’s 60% off until September 4th. (See also his free open-source font Martian Mono.)

An epic blog post from Roman Shamin describes a better way of working with a dynamic color system and how to build an internal plugin that makes it possible.

Ever wondered what’s the best name for that specific shade of the color? This plugin lets you select any node with a solid fill and see the closest color’s name.