Colors in Workflowy: Initial Visual Design

By

July 9, 2021

We’ve started implementing a prototype of colors in Workflowy, which we hope to release for early feedback in the next week or so (don’t hold me to that). As mentioned in this article summarizing a plan based on your initial feedback our first prototype is focused on three things:

  1. Highlighting text with color
  2. Coloring text
  3. Coloring tags

Below are the visual designs we’ll be implementing. This does not include any interaction designs, which are still in progress. Please let us know what you think! 💬

Visual design for the prototype

The exploration that lead there

4.8 32 votes
Article Rating
Subscribe
Notify of
guest
33 Comments
Inline Feedbacks
View all comments
monoomni
monoomni
3 months ago

I’ve been wanting this for so long! Thank you!

Would be nice to search by color 🙂

Demola Okesola
Demola Okesola(@okesola_demola)
3 months ago

Stuff of Dreams. Awesome work guys.

trackback

[…] We’ve implemented the three main things we mentioned in the previous colors post. […]

trackback

[…] implemented the three main things we mentioned in the previous colors post. To apply text highlighting, simply select some text and you’ll see the new option in the […]

umesh
umesh
4 months ago

This is awesome. So cool

Ann
Ann
4 months ago

I second adding gray to the list (where the background is white). Personally, I would use it for things that are completed, but I want to be able to keep them in the view (without having to use the completed toggle which for me has an exhaustive list).

All the colors are great and given that this is long overdue, the colors are not that important to me. However, having red and green (for those who are not color blind) is something I would recommend as it can represented something is in progress or has not started or is late…

Can’t wait to use this feature so thanks!

Kevin Bergen
4 months ago

Just asked support about color and turns out it’s happening! Now, how will I know when it’s available??

Alexander Aldrich
Alexander Aldrich
4 months ago

I think this is a lovely start to a very exciting feature. Great color schemes to begin with. Thanks!

Jakub
Jakub
4 months ago

GREAT!!

Miguel Serra
Miguel Serra(@arc_serra)
4 months ago

I love the fact that you’re letting your thoughts here before the updates! Thanks so much for that!

I 100% subscribe to the black/white highlighting. And would love to see more saturation/neon on the colors!

JUAN CARLOS GALLEGO SANCHEZ
JUAN CARLOS GALLEGO SANCHEZ
4 months ago

About coloring the text of tags, instead of their background, this is a more subtle effect, and the tag text keeps integrated in the paragraph, while allowing for some scanning.

One kind of tags (#this) could work the way you propose, and the other kind of tags (@that) the way I say.

Matt
Matt
4 months ago

Will I be able to color a tag text with the same color, so the text is ‘invisible’?

Karel Dries
Karel Dries(@karel3s)
4 months ago

Nice colors! Some of them match quite closely with Tailwind’s color palette, which is a good thing, Steve Schoger is a pro!

I quickly made a mockup in Figma with the Tailwind colors, you can check it out here.

You might want to add pink and grey as well, they worked quite well in Notion.

Amgad
Amgad
4 months ago

Looks good. Some gray(s) would be good too. Not sure how you plan on implementing, so while I sympathize with those suggesting unlimited colours–which as others have mentioned are obtainable using Tampermomkey and Stylish/Cascadea–starting with just a few colours seems wise.

Kiran
Kiran
4 months ago

Feedback: The first 2 colors (red & orange) in both 300 and 600 versions have very little color contrast. It may be challenging to differentiate between the colors given the actual size of content which has the colors and the color variation due to various monitors, screen brightness, viewing angle etc.

Last edited 4 months ago by Kiran
Joe
Joe
4 months ago

Would it be possible to link a colour scheme to information such as dates or hashtags. e.g. a red to blue colour spectrum where the nearest dates appear towards the red end of the spectrum and the further away ones toward the blue?

Anton
Anton
4 months ago

Yeah!
That is what i expected. Guys, awesome

Rubén García Pérez
Rubén García Pérez(@rubengpmv)
4 months ago

Really cool! Thanks for your work!

Alecos
4 months ago

Nice!

Martin Smith
Martin Smith
4 months ago

Been waiting so long for colours to be part of the toolset! Awesome work guys…

Gilles
Gilles
4 months ago

That’s a really nice start Jesse

Pete
Pete
4 months ago

Once the color palette is in place, being able to add checkboxes (for tasks) and/or different choices of bullet styles will really take WF to the next level and the best part of all… without breaking the simplicity and essence of WF! These features can be used or not used, how great is that! Plus, if you make these awesome new UI features part of conditional formatting well… I’m just sayin. Smokin!!!

Franco
Franco
4 months ago

I like it a lot!!
Exactly what I wanted.

Thanks

M Z
M Z
4 months ago

That’s fantastic… Would be great to see GRAY & BLACK highlight colors… and maybe ADD them under the menu of “B U I” link (bold, underline, italic), something like the Preview app on MAC does when highlighting… also, because there might me so many color options, one could use “FAVORITE” to add his/her TOP 5-6 colors in the mini menu :)) THANKS!

Carlos Rebolledo Aguirre
Carlos Rebolledo Aguirre(@carebolledo)
4 months ago

Me gusta y alegra ver que el color está por llegar

Gracias !!!

Piotr Rajca
Piotr Rajca
4 months ago

Thas all I’ve dreamed off! 🙂

Last edited 4 months ago by Piotr Rajca
Bruce Marriott
Bruce Marriott
4 months ago

There is an existing system involving Tampermonkey and Stylus or Stylish that is a pain to setup at first but does have 140 glorious colours. I’d really like to see those 140 colours carried forward, or at least much more colour variation than the 12 colours that seem to be shown here. That’s way too restrictive. That said, I’m pleased that something is happening..

Aleksander Chamielec
Aleksander Chamielec
4 months ago

thanks for sharing!

how about adding a grey color? same as notes or completed items have. it would allow to grey out some of let’s say less important entries in one’s list.

or maybe an ability to set custom colors?

Bruce Marriott
Bruce Marriott
4 months ago

Yep – needs lots of colours so folks can use colour in clever ways without being restricted. (sorry for banging on!)

Pete
Pete
4 months ago
Reply to  Bruce Marriott

Exactly, Bruce, why limit the color palette at all? Give users the ability to use colors in ways that work best for them. If you’re going this far to introduce colors (which, btw, is an AWESOME feature), then don’t limit yourself and others with a subset of choices, this feature is all about design & expression, which should never be limited.

Bob Lalasz
Bob Lalasz
4 months ago

I like the saturation levels, especially for the highlighting.

moakdesigns
moakdesigns(@moakdesigns)
4 months ago

Looks absolutely amazing so far! Really good strong start too!

Share on twitter
Share on facebook
Share on linkedin
Share on email

Subscribe to the newsletter

We'll send you a weekly roundup of the latest posts

Overwhelmed?

Workflowy replaces your notebooks, stickies and bloated apps with a simple, smooth digital notebook that makes it easy to get organized and be productive.