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
30 Comments
Inline Feedbacks
View all comments
moakdesigns
moakdesigns
20 days ago

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

Bob Lalasz
Bob Lalasz
20 days ago

I like the saturation levels, especially for the highlighting.

Aleksander Chamielec
Aleksander Chamielec
20 days 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
19 days ago

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

Pete
Pete
18 days 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.

Bruce Marriott
Bruce Marriott
20 days 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..

Piotr Rajca
Piotr Rajca
19 days ago

Thas all I’ve dreamed off! 🙂

Last edited 19 days ago by Piotr Rajca
Carlos Rebolledo Aguirre
Carlos Rebolledo Aguirre
19 days ago

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

Gracias !!!

M Z
M Z
19 days 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!

Franco
Franco
19 days ago

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

Thanks

Pete
Pete
18 days 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!!!

Gilles
Gilles
18 days ago

That’s a really nice start Jesse

Martin Smith
Martin Smith
18 days ago

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

Alecos
Alecos
18 days ago

Nice!

Rubén García Pérez
Rubén García Pérez
17 days ago

Really cool! Thanks for your work!

Anton
Anton
17 days ago

Yeah!
That is what i expected. Guys, awesome

Joe
Joe
17 days 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?

Kiran
Kiran
17 days 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 17 days ago by Kiran
Amgad
Amgad
16 days 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.

Karel Dries
Karel Dries
16 days 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.

Matt
Matt
16 days ago

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

JUAN CARLOS GALLEGO SANCHEZ
JUAN CARLOS GALLEGO SANCHEZ
15 days 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.

Miguel Serra
Miguel Serra
13 days 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!

Jakub
Jakub
10 days ago

GREAT!!

Alexander Aldrich
Alexander Aldrich
9 days ago

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

Kevin Bergen
9 days ago

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

Ann
Ann
8 days 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!

umesh
umesh
7 days ago

This is awesome. So cool

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 […]

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.