Colors

The colors in Valamis is a mini-system within the Design System. We call it a system because every color serves its purpose and all of them are interconnected. With the use of color we show what elements are interactive, convey their states, hierarchy between elements, and express our brand colors.

In Valamis Design System there are main colors and supportive colors. 

Our color system is beautiful.

Main colors are 

  • Primary color
  • Background color
  • Portlet color
  • Text color

Supportive colors

  • Hover color
  • Disable color
  • Push color

Status colors

  • Success color
  • Warning color 
  • Error color

Primary color

In our system, the primary color is typically selected to represent Valamis brand. On a customer environment it does the same function and helps the customer with representing their brand.

Valamis Stream — this is our intelligent and lovely blue. Let’s call it Stream because it gives birth to all the flows and interactions in the system. Because use the primary color to express interactive elements on the page and create visual consistency across the entire platform. 

An action button on a page starts the stream, hover makes the stream grow into a river, and a click sends the user to the deeper waters of the lake. Ice is here to freeze the water so that is the metaphor that we use for disabled elements that use primary color.

We use primary color in the system to convey interactive elements as well as to provide feedback about the states of interactive elements.

Primary action buttons are always blue, so are the text buttons and links. We also use blue to highlight current field in the form, active navigation tab, active header element or active Product Menu page, selected checkbox, bookmarked entity, toggle turned on, and selected element in a radio group.

Background Color

In this section we speak about the color that we use on the lowest level of the page canvas. It’s a single color that is only used for single element — background.

In Valamis, this color is called Grey Matter. It’s the surface for all the portlet surfaces. 

This color is only used for the background which is non-interactive element, therefore this color doesn’t have any darker or lighter variants.

Note: this is also used for the product menu. We need to reconsider the hovers and clicks because now we’re using absolute colors, but need to use opacity scale instead.

Surface color

Surface is the container background for portlets, cards, bottom sheets and menus. We use plain white to color surfaces.

Sometimes background and surfaces have the same color so you don’t see any boxes on the page. That makes the whole UI perceived as a single surface. But it’s possible to use a combination of colors if you want surfaces to be distinctive against the background like this.

Text colors

Here we could simply commit to Material’s ‘on-color’ terminology. On-color is applied for those elements that should use colors designed to be clear and legible against the colors behind them — texts, icons, and strokes

“on” colors, referring to the fact that they color elements that appear “on” top of surfaces that use the following colors: a primary color, surface color, background color

The default on color for Valamis is #16181A — Black Color that comes from branding

Texts have several levels of emphasis that we will learn in the next part. 

Just enough visual aid and not more

There are also many cases when we need to use the color more subtly. We can emphasize different levels of importance of text elements or make adjacent text less prominent by using different contrast levels for the text of different levels of emphasis.

High-emphasis text

The first level is plain black. 100% opaque. Used for high emphasis text. Basically high-emphasis is the default mode

Medium-emphasis text

Medium emphasis text uses the same black but with 69% opacity. So it’s always 69% opaque black against any lightbackground. The contrast-level will remain automatically for as long as the background color is light enough.

Suggest improvement →

https://docs.google.com/document/d/1olbI5eUvGaQDax7d9toWHYBz51MpXJh_WiiNEQLP0xU/edit?usp=sharing