Overview

#

During design and development, colors should be referenced by name. Using named colors has a few important benefits:

• More meaningful than hex values in mockups and code
• Encourages consistency and accessibility across the application
• Support for alternate themes

Some examples of named colors in the Kolibri Design System include:

Care must be taken as we adjust the colors in the application. There are a number of considerations to take into account, including:

• Branding, aesthetics, and color harmony
• Sufficient contrast between foreground and background colors
• Accommodation of color blind users
• Maintainability and consistency of the application and code
• Amenability to theming by using tokens correctly

Usage

#

Computed styles

For technical reasons relating to supporting dynamic themes colors must be set using Javascript. Adding Vue.use(KThemePlugin) makes all colors available on every Vue component in your application under the following objects:

• $themeBrand contains colors related to the aesthetic color scheme
• $themeTokens contains colors with special meanings in Kolibri
• $themePalette contains a wide range of additional compatible colors

For example, to color text using $themeTokens.error you use can a computed style to write:

      <div :style="{ color: $themeTokens.error }">This is an error</div>
    

This will display:

Move style definitions from the template to computed props if the style gets complex.

Computed classes

We also attach a special helper function $computedClass which can be used to dynamically create new classes. This is useful for specifying colors in pseudo-elements such as :hover or :focus. For example:

      <input :class="$computedClass({ '::placeholder': { color: $themeTokens.annotation } })" >
    

This is usually not necessary, and using style is preferred for simplicity when possible.

Notation

In the references below we use the following shorthand:

• brand refers to $themeBrand
• tokens refers to $themeTokens
• palette refers to $themePalette

Darken utilities

You can apply darken utilities $darken1, $darken2, and $darken3 to palette colors and tokens to achieve their darker shades. They are available on every Vue component.

      <div :style="{ backgroundColor: $themePalette.red.v_600 }">base</div>
      <div :style="{ backgroundColor: $darken1($themePalette.red.v_600) }">$darken1</div>
      <div :style="{ backgroundColor: $darken2($themePalette.red.v_600) }">$darken2</div>
      <div :style="{ backgroundColor: $darken3($themePalette.red.v_600) }">$darken3</div>
    

These utilities shouldn't be overused. Always check if there is a shade in the palette available that can be used instead.

Tokens

#

Color tokens are the most important set of named colors because they have a specific, well-defined usage within the application. Over time, our set of tokens should grow and shrink as necessary to fit the needs of the application.

Color tokens are by themselves abstract and defined by a purpose, not a color value. A theme makes them concrete by mapping them to specific brand colors and palette colors .

When using tokens, it's very important to choose them based on their semantic purpose, not because of their color values. This ensures that new themes can be created effectively.

Brand shortcuts

UI Colors

Text

Learner activity

User-related labels

Content-related labels

Scales

#

A color scale – sometimes called a color ramp – is an evenly-spaced ramp of shades for a particular color hue. In the Kolibri Design System, we follow Google's Material convention and segment colors into brightness levels, named v_100, v_200, v_300, v_400, v_500, v_600:

Due to the inconsistent way that humans perceive color and light, computing these scales is both art and science. It should not be done by simply sliding a "brightness" setting. We used materialpalettes.com to generate the scales for our primary and secondary brand colors. The same should be done for new themes.

Brand colors

#

Brand colors are chosen to reflect the mood, identity, or trademark of an application or an organization. The design system defines primary (dominant) and secondary (accent) branded color hues.

Palette

#

A color palette is a set of generic base colors that cover a wide range of the color spectrum. We use the 2014 Material Design color palette, which has many colors to choose from.

In our design system, colors from the palette have names like pink, grey, and amber.

With the exception of grey values, choosing arbitrary colors from the palette is only slightly better than choosing arbitrary hex values from the full color spectrum. No consistency or meaning is ensured, and they should generally be avoided in favor of specific color tokens and brand colors.

Grey values

A scale of standard greys

Full palette

The complete set of colors available in the palette