Default and Customizable Color Schemes - Polishing Time ?

[AIIX]

Greetings !

As we are nearing first image release and have picked up on the development pace, it also now time to start polishing our Graphical User Interfaces, one of the main dominant aspects of User Interfaces and how they stand out are the color schemes used across the board to provide a unified look and feel, This discussion resolves around our current default color scheme for the general user interface of the shell as well as for Skills, and what everyone would like to see supported in terms of customisation.

Idea Proposal: Lets go with the 60-30-10 UI design rule

What is the 60-30-10 UI design rule ?

Taken straight from internet search: " It's a classic decor rule that helps create a color palette for a space. It states that 60% of the room should be a dominant color, 30% should be the secondary color or texture and the last 10% should be an accent "

But how does this relate to Smart Speakers and User Interfaces ?

It is very easy to correlate architecture and decor to your skill user interfaces, the first thing to do is to think of the Screen / Display as your own personal digital estate, this digital estate that extends into your physical environment where ever you choose to place it, It automatically becomes the object that can either standout or blend in with rest of your personal space. The 60-30-10 rule is meant to balance out the colors used in your space in a pleasing way, by assigning percentages to the colors used, this rule works in two favours:

• the first it makes it easy for developer to choose between a limited color set and properties letting him get less confused about how many colors he should throw into a user interface
• the second it make the life of users easy, specially users who love customising things, when users have just 3 colors to customise and transform their whole experience with the 3 colors nicely categorised into what they are meant to change.

How are the colors defined in this rule ?

So if you did read the above, there are main 3 colors in your tool set, ( Don't worry this limit does not include gradients, shades and cross over from the 3. Gradients and cross overs between the 3 colors works great, so you really have more colors to play with within those bounds. )

• The first a dominant color (primary color) that most of the UI space will acquire think of backgrounds or button colors when there are no images
• The second a secondary color that certain objects of the UI space will acquire think of card backgrounds when there are no images
• The third the accent color or the text color which certain objects of the UI space will acquire think of line separators and text items or icon colors

What does the result look like ?

So lets take a look at two skill examples both using the rule and both without the rules:

Timer Skill Current:

Time Skill Color Schemed:

Audio Player Current:

Audio Player Color Schemed:

The above are just quick examples of using the current default 3 color scheme we use for our menus and drop downs, but using the combination of the 3 colors with their gradients and shades can give cooler results in any skills in various combinations.

What is the main / default color scheme currently and do we want to change it ?

This is an important but interesting question, yes we do kind of have a default color scheme based on our OVOS Logo, which includes Black, Red, and White as seen in the picture below:

(taken from github profile, kind of low quality, but shows the colors)

• Black and shades of black is our dominant color we currently use for mainly background, button backgrounds, etc
• Red and shades of it are used as our secondary color, drop down menus, highlights, seperators
• White and shades of it to display text

All of the above has been only limited to our usage in the homescreen and drop down menus for now.

So when we take the above 60-30-10 idea and think about color schemes as a whole spreading across skill user interfaces, we have many questions that needs answers:

• do we want this to stay our default color scheme ?
• do we want to start looking beyond the logo colors ?
• are the colors too loud or too meh ?

Finally What are your thoughts on the proposed concept as a whole ? or do you have any other designer concepts or ideas to share ? Feel free to join the discussion as its time to make everything look awesome !

[builderjer]

I love the idea of a common color scheme. But if you are looking to polish up all of the gui, there are a few other things to do also. Maybe another discussion. I know that I am one of the few that has a vertical screen. There are several skills that do not scale well to a vertical screen, the weather skill for one. I can go through all that I can and create an issue in each repo if necessary.

Next thought, is there, or will there be, a way for the user to set the colors to use? That would be awesome if that could be done. Even if it was only the 3 basic colors that the user would like, and then the gradients and such are just handled automatically.

[AIIX]

For the vertical screens an issue would help, at least on the skills in OVOS repos. Users will be able to set the colors to use that is the customization part i probably forgot to add in there

[JarbasAl]

would be awesome if we could provide global themes and let the user choose

I'd like to have a neutral/dark theme (current) a ovos red (themed timer example) and a mycroft blue

We will also need some docs page to tell skill devs how to use this, the wiki should work for now until we get some proper docs page going

[AIIX]

The idea is to provide a customizable color palettes, the primary color, the secondary color and text color can all be changed from the additional menu -> theme settings, we can also provide pre configured color themes, where the primary, secondary and text are defined, so in case of mycroft blue [mycroft grey, mycroft blue, white] and show it a seperate menu to select a provided color scheme

[j1nx]

I played with some of the colorschemes the other day. I believe there are now 6 by default. I kind of fell in love with purple one, however dislike the white-isch background of it.

what about shipping default with two times three color schemes (or more, but...) three color schemes, light themed and the same three color schemes, dark themed.

(if agreed, please do not forget the dark purple one 😋 ) ( Otherwise I will create my own theme, but like my idea above for everyone)