Green 4 2.0
With the launch of Medium 2.0 we refreshed our green across the platform. This was a design team project to update Medium’s colors and make a cohesive family of green that felt a bit more lively, social, and vibrant. As we updated our type and our visual language across the platform, it felt like the right time to revisit our primary color and get a bit smarter about how and when we use it.
With Medium 1.0 we had one primary green value. #57AD68 is a nice color, but when you sit down with it you notice a couple things. It reads with some yellow to it in addition to the blue/green base. It is a bit dusty and de-saturated and on today’s high contrast devices it can come off as slightly tart with some green apple hints. The restraint in saturation and brightness, while elegant, over time can come off as sleepy or muted when placed against the bright white of modern screens. That being said, #57AD68 is still a wonderful color and we should all appreciate it for what it is.
#57AD68 had to do a lot of work on its own. It did everything on our system. It acted as the primary text color for links like Publish, it filled the background of our pill buttons, it was a primary icon color, sometimes we used it as an interstitial background. It was a workhorse. Because it had to do everything, it couldn’t do anything great.
To complicate #57AD68’s place on Medium, we added highlights. The color we wanted for highlights had to be lively but subtle, noticeable but sustainable over time, and relaxing not alarming. It needed to indicate the life of the network while not distracting from content. And no matter how much we tried to make #57AD68 fill yet another role (FYAR), it wasn’t taking.
So, with highlights, we added our first non-primary colors to Medium. The result of the discontinuity we all had to stare at daily, that slowly burned into our eyes and brain subconsciously, is above. Since I was responsible for designing highlights and those colors, I vowed to someday fix this.
The opportunity to right a wrong came with 10/7. We thought it was a perfect time to introduce the world to some new green that felt more appropriate for what Medium had evolved into. Given all of our new visual styles and features that we’d introduced since 1.0, it was a natural time to sit down with a nice glass of wine and start feeling our way through colors.
The first choice we made is to switch to using two different green values: one for text and one for fill so that both can do their job great. This is common when working with color as it can be hard to pick a base color that is dark enough for readability of small text on mobile but light enough for a larger button to not look too dark and vice versa.
We also wanted to try to keep all of the greens on the system within the same family with a more easy-to-use rule-set of when to use what color, so that visually we don’t reproduce the disconnect we had with Medium 1.0 greens.
To liven our green up we moved away from the vegetal/organic color. iOS devices tend to pick up the yellow in #57AD68 so we migrated to the right on the hue spectrum towards blue to better accentuate our green.
Starting with our primary fill color, #02B875 landed quite nicely. It was able to hold its own without overwhelming in large full-width interstitial panels, and also read great in smaller fill situations such as icons. #02B875 balances nicely between yellows and blues across all the devices we tested on, which is an important point of clarification.
The funny thing about color is that every device has a different screen manufacturer which has different color characteristics, some accentuate yellows, others accentuate blues, etc. You might have a color that looks gorgeous on your Cinema display, looks ok on an iPhone, looks terrible on a Nexus 6, and looks great on a Samsung Android. So even with just a single color value, there was a lot of comparing across devices and trying to find a great compromise which #02B875 pulled off.
We updated the primary text color to #00AB6B to achieve a similar impact. With @mentions launching we knew we would be seeing green within the post itself and it was important to make sure our text colors read well, both contrast-wise with normal body text and with the rest of the family that we would use in highlights. Highlights as well received a tiny update to better match our family.
For our suite of greens, we landed somewhere in the middle between Medium 1.0-vegetal-green and a Vine-like-green-blue. Just enough blue to brighten our green but not too much. Our new family is unified loosely around a hue value of 158 with brightness and saturation modified to fit accordingly. Above is the difference between Medium 1.0 green family and Medium 2.0 green family with the colors used in the various contexts they appear on the site.
Accessibility-wise, this was a one-step forward two-steps back change. While we improved our contrast for our primary text color, your highlight color, and active highlight color, we decreased the contrast for other highlight colors and also very slightly decreased the contrast for filled buttons with text. And while we managed to unify the color family and have a great direction tonally, there’s still work to be done to improve on our accessibility-game which we will be doing over time with our new greens.
We learned a lot through this process. We now have a consistent family of colors that look fresh and lively across all platforms and devices. In dusting-off our green, we have set ourselves up to introduce other impactful colors (if needed) that can live side by side. We better understand color families on our platform and what ranges of values work and don’t work; we’re learning from the progression of our green family to prototype more generalized color algorithms for possible future efforts.
We also restored a small bit of peace within the color galaxy and now we all sleep a little better because of it.