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:

tokens.text
palette.black
tokens.error
palette.red.v_1100
tokens.primary
brand.primary.v_1000
brand.primary.v_1100
#2547F3
brand.secondary.v_800
#FFD533
palette.grey.v_400
#999999

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:

This is an error

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

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

tokens.primary
brand.primary.v_1000

Default primary brand color. Commonly used for interactive elements

tokens.primaryDark
brand.primary.v_1100

Default dark variant of the primary brand color. Commonly used for the hover state of interactive elements

tokens.secondary
brand.secondary.v_1000

Default secondary brand color

tokens.secondaryDark
brand.secondary.v_1100

Default dark variant of the secondary brand color

UI Colors

tokens.surface
palette.white

Default background color

tokens.appBar
brand.secondary.v_800

Default app bar component color

tokens.appBarDark
palette.black

Default dark color of the app bar component

tokens.link
brand.primary.v_1000

Hyperlink text color with the application

tokens.fineLine
palette.grey.v_100

Used for divider lines and rules

tokens.loading
palette.grey.v_800

Color for loaders, spinners, and other progress indicators

tokens.success
palette.green.v_1100

Indicates the successful completion of an action in the application

Text

tokens.text
palette.black

Normal text color. (Typically used on top of the $themeTokens.surface color)

tokens.annotation
palette.grey.v_600

Text color with lower visual weight. (Typically used on top of the $themeTokens.surface color)

tokens.textDisabled
palette.grey.v_200

Text color with lowest visual weight. (Typically used on top of the $themeTokens.surface color)

tokens.textInverted
palette.white

Text color for creating sufficient contrast when used on dark backgrounds (such as $themeTokens.primary)

tokens.focusOutline
palette.lightblue.v_800

Used to indicate keyboard focus

tokens.error
palette.red.v_1100

Indicates an application or validation error

Learner activity

tokens.progress
palette.lightblue.v_1000

Indicates "in-progress" learner activity

tokens.mastered
palette.yellow.v_1000

Indicates learner mastery or completion

tokens.correct
palette.green.v_1100

Indicates a correct response by a learner

tokens.incorrect
palette.red.v_1100

Indicates an incorrect response by a learner

User-related labels

tokens.coachContent
palette.lightblue.v_1100

Used for coloring coach content icons

tokens.superAdmin
palette.yellow.v_1000

Used for coloring super admin permission key icons

Content-related labels

tokens.practice
palette.blue.v_800
tokens.watch
palette.lightblue.v_800
tokens.listen
palette.pink.v_1000
tokens.read
palette.red.v_1000
tokens.explore
palette.orange.v_1000
tokens.create
palette.green.v_1000
tokens.reflect
palette.yellow.v_1000
tokens.topic
palette.grey.v_800

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_200, v_400, v_600, … v_1000, v_1100:

palette.green.v_200
#CCF4D8
palette.green.v_400
#99E9B1
palette.green.v_600
#66DD8A

palette.green.v_1000
#00C73C
palette.green.v_1100
#00992E

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.

brand.primary.v_200
#D9E1FD
brand.primary.v_400
#B4C3FB
brand.primary.v_600
#8EA4F9
brand.primary.v_800
#6986F7
brand.primary.v_1000
#4368F5
brand.primary.v_1100
#2547F3
brand.secondary.v_200
#FFF5CC
brand.secondary.v_400
#FFEA99
brand.secondary.v_600
#FFE066
brand.secondary.v_800
#FFD533
brand.secondary.v_1000
#FFCB00
brand.secondary.v_1100
#E5B700

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

palette.white
#ffffff
palette.black
#000000
palette.grey.v_50
#F5F5F5
palette.grey.v_100
#E6E6E6
palette.grey.v_200
#CCCCCC
palette.grey.v_400
#999999
palette.grey.v_600
#666666
palette.grey.v_800
#333333

Full palette

The complete set of colors available in the palette

palette.red.v_200
#FFD9D3
palette.red.v_400
#FFB4A7
palette.red.v_600
#FF8E7C
palette.red.v_800
#FF6950
palette.red.v_1000
#FF4324
palette.red.v_1100
#D21E00
palette.pink.v_200
#FFE5E8
palette.pink.v_400
#FFCCD1
palette.pink.v_600
#FFB2BB
palette.pink.v_800
#FF99A4
palette.pink.v_1000
#FF7F8D
palette.pink.v_1100
#F76474
palette.blue.v_200
#D9E1FD
palette.blue.v_400
#B4C3FB
palette.blue.v_600
#8EA4F9
palette.blue.v_800
#6986F7
palette.blue.v_1000
#4368F5
palette.blue.v_1100
#2547F3
palette.lightblue.v_200
#CCEAFC
palette.lightblue.v_400
#99D5FA
palette.lightblue.v_600
#66C1F7
palette.lightblue.v_800
#33ACF5
palette.lightblue.v_1000
#0097F2
palette.lightblue.v_1100
#0079C2
palette.darkgreen.v_200
#CCDDD6
palette.darkgreen.v_400
#99BBAD
palette.darkgreen.v_600
#669A85
palette.darkgreen.v_800
#33785C
palette.darkgreen.v_1000
#005633
palette.darkgreen.v_1100
#00331E
palette.green.v_200
#CCF4D8
palette.green.v_400
#99E9B1
palette.green.v_600
#66DD8A
palette.green.v_800
#33D263
palette.green.v_1000
#00C73C
palette.green.v_1100
#00992E
palette.orange.v_200
#FFE4CC
palette.orange.v_400
#FFC899
palette.orange.v_600
#FFAD66
palette.orange.v_800
#FF9133
palette.orange.v_1000
#FF7600
palette.orange.v_1100
#E56A00
palette.yellow.v_200
#FFF5CC
palette.yellow.v_400
#FFEA99
palette.yellow.v_600
#FFE066
palette.yellow.v_800
#FFD533
palette.yellow.v_1000
#FFCB00
palette.yellow.v_1100
#E5B700