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 33 votes
Article Rating
Subscribe
Notify of
guest

33 Comments
Inline Feedbacks
View all comments
Steve
Steve
1 year ago

*led

sorry, I know that’s rude, but I’m leading the one-man crusade to save the worldwide spelling of the past tense of “to lead”

monoomni
monoomni
1 year ago

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

Would be nice to search by color šŸ™‚

Demola Okesola
Demola Okesola
1 year 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
1 year ago

This is awesome. So cool

Ann
Ann
1 year 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
1 year 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
1 year ago

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

Jakub
Jakub
1 year ago

GREAT!!

Miguel Serra
Miguel Serra
1 year 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
1 year 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
1 year ago

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

Karel Dries
Karel Dries
1 year 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
1 year 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
1 year 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 1 year ago by Kiran
Joe
Joe
1 year 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
1 year ago

Yeah!
That is what i expected. Guys, awesome

RubƩn Garcƭa PƩrez
RubƩn Garcƭa PƩrez
1 year ago

Really cool! Thanks for your work!

Alecos
1 year ago

Nice!

Martin Smith
Martin Smith
1 year ago

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

Gilles
Gilles
1 year ago

That’s a really nice start Jesse

Pete
Pete
1 year 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
1 year ago

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

Thanks

Carlos Rebolledo Aguirre
Carlos Rebolledo Aguirre
1 year ago

Me gusta y alegra ver que el color estĆ” por llegar

Gracias !!!

Piotr Rajca
Piotr Rajca
1 year ago

Thas all I’ve dreamed off! šŸ™‚

Last edited 1 year ago by Piotr Rajca
Bruce Marriott
Bruce Marriott
1 year 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
1 year 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
1 year ago

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

Pete
Pete
1 year 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
1 year ago

I like the saturation levels, especially for the highlighting.

moakdesigns
moakdesigns
1 year ago

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

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.