#000000

see example palettes here

grayscale is wildly underrated. it usually only comes up when we talk about dark mode, even though it's such a versatile color in general. if you're looking to be trendy, and especially if you want to fit in with the cool kids (e.g. 'prosumer' productivity tools like superhuman), you should be using more gray

to be clear, i still think vibrant palettes (like stripe's) are cool and flashy, but you can only achieve luxe, clean, and minimal interfaces with greyscale styles

below i'll review some inspirational grayscale examples, and give some tips on developing colorful experiences without using color :)

1. b&w in the wild

i like to take inspiration from online retail. brands have been fine-tuning their palettes for years and have clearly figured out how to use gray strategically, to do things like cultivate the image of an upscale brand

luxury branding: aesop's website stands out with a simple 3-color palette that uses 2 tones of dark gray for text and a yellow-white variant as a background. this yellow-white is now a key feature of the brand, as it resembles the lotion they sell and is used consistently across product packaging. using a unique offshoot of white as a backdrop can be a cool way to make your grayscaled marketing materials and products stand out

defined focus: goat uses thin black lines and minimal text as a way of removing distractions on its website so users can focus entirely on the shoes. in a world of so many distractions, helping users easily focus on the right elements of your site can be a huge advantage for retention and engagement. other sites with similar approaches i'd recommend looking at include balenciaga and off-white

2. b&w in tech

new-era luxury software, like notion and superhuman, use gray particularly well

grayscale design contributes to their value prop of minimizing distractions, increasing efficiency, and maintaining exclusivity. proper use of gray can help users feel a sense of elevated status (especially if they had to wait a month to get off the waitlist) and bring joy to even the most mundane tasks

notion: uses a warmer gray palette based off of yellow tones. this makes the app feel friendly and welcoming, a home for your notes. colorful emoji's stand out against the mellow background colors and users can easily navigate between self-defined categories. grayscale also provides a blank canvas feeling that empowers users with the flexibility to do anything they want with the tool

superhuman: a super minimal palette really makes users feel like they're using a luxury email client. with less clutter and color, users can focus entirely on clearing out their emails and reaching the zen that is inbox zero. superhuman also takes an interesting approach to user experience by replacing traditional shaded buttons with powerful keyboard shortcuts, which further cuts out the need for color

3. handling gray

as always, consistency is key. gray can come in both warm and cold varieties, so when building a palette you should make sure to choose gray shades based off of a single color

there's a lot more to consider: pairings of grays with different text sizes, use of gray in background shades, accessibility...

last thoughts

as a bonus, here's my palette for alloy. we use #2B2E32 for all bolded text, and #727272 + #C4C4C4 for headers + body text. #E0E0E0 we use sparingly, for some fun shapes on our landing page. we have yet to find a distinct brand color like aesop has

(our logo uses 8 shades of gray so it's hard to choose a favorite)

i'll leave it to the reader to discover additional grayscale design principles elsewhere ~

original tweet on 5/8. editing creds go to justin